gin49sz

导航

 
（学习日记）二、CSS样式

3.CSS样式

3.1快速了解

什么是CSS样式？

<img src="..." style="height:100px">

<div style="color:red"></div>

3.2CSS应用方式

1.在标签上

<div style="color:red"></div>

2.在<head>中

<head>
    <style>
        .c1{color:red;}
    </style>
</head>
<body>
    <div class="c1">
        ...
    </div>
</body>

3.写到文件中

导入文件的方式

<head>
    <link rel="stylesheet" href="/static/css_file.css">
</head>

.c1{
    color:red;
    font-size:larger;
    height:100px;
}

开发流程：设计页面→集成到web框架

3.3CSS选择器

1.类选择器

（最多）.css1{}与样式关联，使用方式为<标签 class="css1"></标签>

.css1{
    color:red;
}

2.id选择器

（不能重复，只能针对一个标签）#css2{}与id关联，使用方式为<标签 id="css2"></标签>

#css2{
    color:blue;
}

3.标签选择器

li{}与标签关联，链接该css文件后，该html文件中所有<li>标签都会应用该样式

li{
    color:green;
}

4.属性选择器

<input type="text">
<input type="password">
<input type="radio">

将所有type为text的input标签应用某种样式

input[type='text']{
    color:pink;
}

<div class="c1" xx="type_1"></div>
<div class="c1" xx="type_2"></div>
<div class="c2" xx="type_2"></div>

将所有class为c1，xx为type_2的div标签应用某种样式

.c1[xx="type_2"]{
    color:gold;
}

5.后代选择器

<div class="c1">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
</div>
<div class="c2">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
</div>

将样式为c2的<div>标签下的<li>置为某种样式

.c2 li{
    color:purple;
}

<div class="c2">
    <a>baidu</a>
    <div>
    	<a>google</a>
    </div>
</div>

将样式为c2的<div>标签下的子代<a>标签置为某种样式，不包含孙子代

.c2 > a{
    color:white;
}

6.多个样式覆盖的问题

<div class="c2 c1">Chinese Communication</div>

.c1{
    color:#ffffff;
}
.c2{
    font-size:28px;
    color:#39c5bb
}

如果用了两个样式，两个样式会进行组合应用到这个标签，如果有重复项，css中后者会覆盖前者，即c2会覆盖c1，与标签中的class中的标记无关

补充：强制使某一样式中的项覆盖所有其他项

.c3{
    color:red !important;
    font-size:30px;
}

3.4样式

1.高度和宽度

默认情况下，块级标签的width是一整行，即使右边有空白也不可以占用

.c1{
    height:100px;
    width:200px;
}

注意事项

  • 宽度可以设置为百分比，即当前页面宽度的x%，但高度不支持
  • 高度和宽度默认对行内标签无效，对块级标签有效

2.块级和行内标签

通过css样式让一个标签既具备块级标签的特点又具备行内标签的特点，即块级&行内标签

display:inline-block;

.c1{
    display:inline-block;
    height:100px;
    width:200px;
    border:1px solid red;
}

<div>
    <span class="c1">xxx</span>
    <span class="c2">yyy</span>
</div>

将块级标签主动变为行内标签

display:inline

<div style="display:inline;">
    xxx
</div>

将行内标签变为块级标签

display:block

<span style="display:block;">yyy</span>

3.字体和颜色

常见的字体设置

.word-color{
    color:red;
}/*调整字体的颜色*/
.word-size{
    font-size:10px;
}/*调整字体的大小*/
.word-border{
    font-weight:400;
}/*调整字体的加粗*/
.word-style{
    font-family:"New Times Roman";
}/*调整字体的类型*/

4.文字对齐方式

.align1{
    text-align:center;/*水平居中*/
}
.align2{
    line-height:59px;/*垂直居中，只有一行文本*/
}

5.浮动

.float-right{
    float:right;
    border:1px solid red;
}/*将标签元素置于右侧*/

<div>标签元素应用float样式后不会占据一整行

<div class="float-right">
    xxx
</div>
<div class="float-right">
    xxx
</div>
<div class="float-right">
    xxx
</div><!--这三个div元素会被放置在一行中-->

浮动＝脱离文档流，会导致子标签与父标签脱离开，需要用clear:both样式来使得子标签附着在父标签内

<div>
    <div class="float-right">
        xxx
    </div>
    <div class="float-right">
        xxx
    </div>
    <div style="clear:both;"></div>
    <!--会将父div覆盖子div，即将子div拽回父div中，否则父div默认是没有高度的-->
</div>

6.内边距

内部数据和边框之间的间距

.border{
    border:1px solide red;
}/*边框样式*/
.c1{
    padding-top:10px;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:10px;
}/*自己内部与边框的距离*/
.c2{
    padding:10px;
}/*直接为上下左右设置10px的内边距*/

7.外边距

边框与外部之间的间距

.c3{
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
}
.c4{
    margin:10px;
}

<div>居中方式

.c1{
    margin:0 auto;/*0表示上下边距为0，auto表示左右边距相等，故居中*/
}

8.案例：小米商城

<!DOCTYPE html>
<html>
<head>
    <title>Mi Store</title>
    <meta charset="UTF-8">
    <style>
        body{
            margin:0;/*body标签默认有一个边距*/
        }
        .header{
            background: #333;
        }
        .header .container{
            width: 1226px;
            margin: 0 auto;/*上下为0，左右为auto*/
        }
        .header .menu{
            float: left;
            color:white;
            height: 38px;
        }
        .header .account{
            float: right;
            color:white;
            height: 38px;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;/*垂直居中，此处为最内部，设置高度后可以撑起外部div的高度，因此外层的div无需设置高度*/
            display: inline-block;
            font-size: 12px;
            margin-right: 5px;
        }

    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a>小米商城</a>
                <a>MIUI</a>
                <a>云服务</a>
                <a>有品</a>
                <a>开放平台</a>
            </div>
            <div class="account">
                <a>登录</a>
                <a>注册</a>
                <a>消息通知</a>
            </div>
            <div style="clear: both;"></div>
        </div>  
    </div>
</body>
</html>

小结

  • body标签默认有一个边距，会造成页面四边有间隙，可以用 margin:0; 样式去掉

  • 网站内容（即标签所包括的整个内部区域和外部区域）居中，首先自己要有宽度，然后用margin调整左右外部间距

    <style>
    .container{
        width:980px;
        margin:0 auto;
    }
</style>
<body>
    <div class="container">
        xxx
    </div>
</body>

  • 父亲没有高度或者宽度，其高度和宽度等于孩子的高度和宽度（或者孩子高度或者宽度之和）

  • 如果页面中存在float，必须加入以下内容（在最后）来撑起父标签

    <div style="clear:both"></div>

  • 关于布局，先划分区域，后根据区域确定布局

4.CSS案例

4.1案例：二级菜单

1.划分区域

划分区域

2.搭建骨架

.sub-header{
	height: 100px;
	background-color: #b0b0b0;
}
.sub-header .container{
	width:1128px;
	margin:0 auto;
}
.sub-header .ht{
	height: 100px;/*将公共部分提取出来*/
}
.sub-header .logo{
	width: 234px;
	float:left;
}
.sub-header .menu-list{
	float:left;
}
.sub-header .search{
	float:left;
}

<div class="sub-header">
	<div class="container">
		<div class="ht logo">f</div><!--将ht和logo同时应用到div标签上-->
		<div class="ht menu-list">f</div>
		<div class="ht search">f</div>
		<div style="clear: both;"></div>
	</div>
</div>

3.填充内容

  • logo区域

    .sub-header .logo a{
	display:inline-block;
    margin-top:22px;
}
.sub-header .logo a img{
    height: 56px;
    width: 56px;
}

    <div class="ht logo"><!--a标签是行内标签（默认），不能设置高度和边距 -> 用display将其设置为 行内&块级 标签-->
	<a href="https://www.mi.com/index.html">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/s02.mifile.cn/assets/static/image/logo-mi2.png">
    </a>
</div>

  • 菜单部分

    .sub-header .menu-list a{
	display:inline-block;
	padding:0 10px;
	color: #333;
	text-decoration: none;/*设置文本样式，链接默认样式含有下划线，修改为none则表示删除默认样式*/
}
.sub-header .menu-list a:hover{
	color:#ff6700;/*设置鼠标悬停的样式*/
}

    <div class="ht menu-list">
	<a href="https://www.mi.com">Xiaomi手机</a>
	<a href="https://www.mi.com">Redmi红米</a>
	<a href="https://www.mi.com">电视</a>
	<a href="https://www.mi.com">笔记本</a>
	<a href="https://www.mi.com">平板</a>
</div>

小结

  • a 标签是行内标签，行内标签的高度和边距都是默认无效的，如果想让其有效，需要将其变为块级&行内样式

  • 垂直方向居中

    • 文本：line-height: xxx ;
    • 图片：margin-top: xxx ;

  • a 标签默认有下划线，去掉用 text-decoration:none 样式

  • 悬停样式a:hover

4.2案例：推荐区域

1.划分区域

推荐-划分区域

2.案例的实现

img{
    height: 100%;
    width: 100%;/*将所有图片的高度和宽度都设置为100%，然后通过调整父亲标签的高宽来指定大小*/
}
.slider .container{
    height: 460px;
    width: 1226px;
}
.news{
    margin: 14px;
}
.news .container{
    height: 170px;
    width: 1226px;
}
.left{
    float: left;
}
.news .channel{
    width: 228px;
    height: 164px;
    background-color: #5f5750;
    padding: 3px;
}
.news .list-item{
    width: 316px;
    height:170px;
}
.news .channel .item{
    height: 82px;
    width: 76px;
    float: left;
    text-align: center;
    opacity: 0.80;
}
.news .channel .item a{
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    margin-top: 18px;
    display: block;
}
.news .channel .item img{
    height: 24px;
    width: 24px;
    margin:0 auto 4px;
    display: block;
}

<div class="news">
    <div class="container">
        <div class="channel left">
            <div class="item">
                <a href="https://www.mi.com">
                    <img src="https://i1.mifile.cn/f/i/2018/mihome/flashpurchase.png">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com">
                    <img src="https://i1.mifile.cn/f/i/2018/mihome/flashpurchase.png">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com">
                    <img src="https://i1.mifile.cn/f/i/2018/mihome/flashpurchase.png">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com">
                    <img src="https://i1.mifile.cn/f/i/2018/mihome/flashpurchase.png">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com">
                    <img src="https://i1.mifile.cn/f/i/2018/mihome/flashpurchase.png">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com">
                    <img src="https://i1.mifile.cn/f/i/2018/mihome/flashpurchase.png">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="clear:both"></div>
        </div>
        <div class="list-item left" style="margin-left: 14px;">
            <img src="https://i1.mifile.cn/a4/xmad_1564584687704_fIYFd.jpg">
        </div>
        <div class="list-item left" style="margin-left: 14px;">
            <img src="https://i1.mifile.cn/a4/xmad_15632000838536_bfVMh.jpg">
        </div>
        <div class="list-item left" style="margin-left: 15px;">
            <img src="https://i1.mifile.cn/a4/xmad_15604776623629_bRHhl.jpg">
        </div>
        <div class="clear:both"></div>
    </div>
</div>

小结

  • 如何设置透明度：opacity:0~1;

5.CSS知识点(伪类)

5.1hover

鼠标悬浮上时候的样式，是一种伪类

<style>
    .c1{
        color:red;
        font-size:18px;
    }
    .c1:hover{
        color:green;
        font-size:50px;
    }
    .c2{
        height:300px;
        width:500px;
        border:1px solid red;
    }
</style>

<div class=c1>
    xxx
</div>
<div class="c2">
    yyy
</div>

构造一个下载格式

<style>
    .download{
        display:none;/*display:none表示隐藏该元素*/
    }
    .app:hover .download{/*改变了含有download样式的标签在鼠标悬停的情况下的样式*/
        display:block;
    }
</style>
<div class="app">
    <div>下载APP</div>
    <div class="download">
        <img src="xxx.jepg" alt="">
    </div>
</div>

5.2after

在应用该样式的标签后追加一些内容，也是一种伪类

<style>
    .c1:after{
        content:"def";
    }
</style>
<div class="c1">
    abc
</div><!--最后呈现的结果为abcdef-->

作用：替换含有float样式尾部的clear:both

<style>
    .c1{
        float:left;
    }
</style>
<div>
    <div>
        <div class="c1">xxx</div>
        <div class="c1">xxx</div>
        <div class="c1">xxx</div>
        <div class="clear:both"></div>
    </div>
</div>

等价于

<style>
    .clearfix:after{/*清除浮动，一般标记为clearfix样式*/
        content:"";
        display:block;
        clear:both;
    }
    .c1{
        float:left;
    }
</style>
<div class="clearfix">
    <div class="c1">xxx</div>
    <div class="c1">xxx</div>
    <div class="c1">xxx</div><!--此时无需再添加尾部-->
</div>

5.3position

  • fixed
  • relative
  • absolute

1.fixed

固定在窗口的某个位置

案例：返回顶部

<style>
    .back{
        position: fixed;
        width: 60px;
        height: 60px;
        border: 1px solid red;
        left: 0;
        top: 0;
    }
</style>
<div class="back">
    xxx
</div>

案例：对话框

<style>
    .mask{
        top:0;
        background-color: #333;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0.8;
        z-index: 999;
    }
    .dialog{
        top: 200px;
        width:300px;
        height: 400px;
        background-color: white;
        position: fixed;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 1000;/*z-index用于调整展示的层数，越大越高，显示在更加前面*/
    }
</style>
<div class="mask"></div>
<div class="dialog">

</div>

2.relative&absolute

父相子绝，调整父子元素的位置

<style>
        .c1{
        height: 300px;
        width: 500px;
        margin: 100px;

        position: relative;
    }
    .c1 .c2{
        height: 59px;
        width: 59px;
        background-color: #333;
        position: absolute;
        right: 20px;
        bottom: 10px;
    }
</style>
<div class="c1">
    <div class="c2">
        
    </div>
</div>

案例：下载APP

<a href="https://www.mi.com" style="position: relative;" class="app">下载APP
    <div style="position: absolute;height: 100px;width: 100px;" class="download">
        <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1">
    </div>
</a>

5.4border

边框

.c1{
    border:1px solid red;/*(边框厚度, 边框样式, 边框颜色)，样式除了solid(实线)，还有dotted(虚线)*/
}
.c2{
    border-left:1px solid red;/*仅有左边框*/
}
/*特别的*/
.c3{
    border:1px solid transparent;/*transparent表示透明色，可以提前设置边框的厚度，避免添加边框后元素移动*/
}

示例：

<style>
    .c1{
        height:50px;
        width:100px;
        margin:100px;
        border:1px solid transparent;
    }
    .c1:hover{
        border:1px solid red;/*因为预设了透明边框，鼠标移动到内容上时，内容不会移动*/
    }
</style>

5.5background

.c1{
    background-color:red;
}
posted on 2024-02-16 13:23  树深时见鹿nnn  阅读(15)  评论(0)  编辑  收藏  举报
 
Powered by:
博客园
Copyright © 2024 树深时见鹿nnn
Powered by .NET 9.0 on Kubernetes