CSS

5. CSS选择器

• CSS选择器(Cascading Style Sheet,层叠样式表)

• css代码的写法：hl{color:red;} 选择器{css属性:属性值;}

• css代码的引入

# 方式一
​
head标签里面写
<style>
    div{
        background-color:red;
        height:100px;
        width:100px;
    }
<style>
​
​
# 方式二
​
内敛式样：
<div style=" height:200px;width:200px;"></div>
​
# 方式三
外部文件引入
head标签里面写link标签
<link rel="stylesheet" href="文件路径">

1. 基本选择器

1.1 元素选择器

div{ # 标签名字
    color:red;
}
​
id 选择器：id值不能重复
​
<div id="xuefei">
    大美女
</div>
​
# 指定id值的变颜色
#id值{
    color:red;
}

1.2 类选择器

class 类值可以重复
​
<div id="dazhuang" class="c1">
    大壮
</div>
<div id="xuefei" class="c1"> 
    雪飞大美女
</div>
​
.c1{
    color:green;
}
div.c1{ # div标签里面含有class值为c1的标签
    color:green;
}
​
# 通用选择器
​
*{ # 找到所有的标签
    color:green;
}

1.3 后代选择器【继承】

# body标签里面的所有标签都继承body标签的式样，除了a标签以外，a标签的字体颜色设置必须选中a标签才行。
选择器 选择器{}
div a{ # 找到div标签后代里面的所有a标签
    color:red;
}

1.4 儿子选择器

选择器>选择器{}
div>a{ # 找到div标签后代里面的所有a标签
    color:red
}

1.5 毗邻选择器

选择器 选择器{}
div+a{ # 找到的是紧挨着div标签的下一个标签(是兄弟标签)
    color:red;
}

1.6 弟弟选择器

选择器~选择器{}
div~a{ # 找到的是同级的后面的所有兄弟标签
    color:red;
}

2. 属性选择器

# 通过属性名来查找
[title]{ # 找到所有含有title标签属性的标签
    color:red;   
}
div[title]{ # 含有title属性的div标签
    color:red;    
}
​
# 通过属性对应的值来查找，当属性的值为数字的时候，数字要加上引号[title='666']
​
input[type=text]{ # 含有type属性，并且type属性的值为text的input标签
    background-color:red;
}

3. 分组

# 多个选择器选择相同的标签设置相同css样式的时候，就可以用分组
​
div,p{ # div选择器和p选择器共同设置相同的样式，可以都好分割写多个选择器
    color:red;
}

4. 伪类选择器

a标签自带的效果：未访问过的时候是蓝色的字体，访问过后的是紫色字体，自带下划线
​
/* 未访问的链接*/
选择器:link{}
a:link{
    color:#FF0000
}
​
/*已访问过的链接*/
选择器:visited{}
a:visited{
    color:#00FF00
}
​
/*鼠标移动到链接上的颜色*/ # 这个用的比较多，可以应用在器它的标签上
选择器:hover{}
a:hover{
    color:#FF00FF
}
​
​
/*选定的链接*/ 就是鼠标点下去还没有抬起来到那个瞬间，可以让它变颜色
选择器:active{}
a:active{
    color: #0000FF
}
​
/* input输入框取焦点时的样式*/
input:focus{ # input默认的样式，鼠标点进去的时候，input框会变浅蓝色的那个感觉
    # outline: none;
    background-color:# eee; # 框里面的背景色
}

5. 伪元素选择器

/*伪元素选择器*/  # first-letter 首字母
选择器:first-letter{}
div:first-letter{
    color:red;
    font-size:20px;
}
​
/*在p标签内容的前面插入一些内容*/
选择器:before{}
p:before{
    content:'?';
    color:green;
    font-size:100px;
}
​
/*在p标签后面插入一些内容*/
选择器:after{}
p:after{
    content:'哈哈';
    color:pink;
}

6. 选择器的优先级

/* 优先级数字越大，越优先显示其效果，优先级相同的，显示后面定义的选择器对应的样式*/
​
/*id选择器优先级为100*/
#d1{
    color:deepskyblue;
}
​
/*继承的优先级为0*/
body{  
    color:red;
}  
​
/*类选择器的优先级为10*/
.c1{
    color:blue;
}
.c2{
    color:orange;
}
​
/*元素选择优先级为1*/
div{
    color:green;
}
​
/*内敛样式优先级为1000*/
<p class="cc3" style="color:red;">我是cc3的p标签</p>
​
​
/*important*/ #最高级的
.cc1 .cc3{
    color:purple!important;
}

6. css 属性相关

6.1 高度宽度设置

• 注意：只有块级标签能够设置高度宽度，内敛标签不能设置高度，它的高度宽度是由内容决定的

div{
    width:100px; # 宽度
    height:100px; # 高度
    background-color:pink;
}

6.2 字体属性

1. 字体和字体大小

.c1{
    font-famliy:'楷体','宋体','微软雅黑';
    font-size:14px; # 默认字体大小为16px
}

2. 字体颜色

color:red;

3. 字重，粗细

.c1{
    font-weight:bold;
    font-weight:100;
}
​
值       描述
normal  默认值，标准粗细
bold    粗体
bolder  更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold

4. 颜色表示方式

# 有四种方式
p{
    color:red;
    color:#78FFc9;
    color:rgb(123,199,255);
    color:rgba(123,199,255,0.3); 多了一个透明度的数字：0-1的一个数字
}
​

6.3 文字属性

1.文字对齐

text-align
​
div{
    width:200px;
    height:200px;
    background-color:yellow;
    /*text-align:center;*/
    text-align:right;
}
​
left    左边对齐 默认值
right   右对齐
center  居中对齐

 

2. 文字装饰

text-decoration：underline # 默认的下划线
​
div a{
    /*text-decoration:none;*/ # 给a标签去除下滑线
    /*text-decoration：line-through;*/  # 中划线
    text-decoration:overline;  # 上划线
}

3. 首行缩进

p{
    text-indent:32px; # 首行缩进两个字符，因为一个字的默认大小为16px
}

6.4 背景属性

1. 背景颜色

背景颜色
background-color:red;
​
div{
    width:600px;
    height:600px;
    /**/
    /*background-image:url("yeye.jpg");*/
    /*background-repeat:no-repeat;*/
    /*background-position:100px 50px;*/ 相对于div标签的，距离左边100px，距离上面50px
    /*background-position：right top;*/
    background:url("yeye.jpg") no-repeat left center;
}
​
# 简写方式
颜色      图片路径        是否平铺        图片位置
background:#ffffff url("1.png") no-repeat right top;
background-attachment:fixed; 固定在屏幕的某个位置上

7 边框

div{
    width:200px;
    height:200px;
    /*border-style:solid;*/ 边框样式
    /*border-color:red;*/ 边框颜色
    /*border-width:10px;*/ 边框宽度
    /*border：10px solid red；*/ 简写方式
    
    
    
    
    
    
    
    /*border-left-style:solid;*/ 
    
    /*border-right-style:dashed;*/ # 右虚线
    /*border-top-style:dashed;*/    # 上虚线
    /*border-bottom-style:dashed;*/  # 下虚线
    /*border-right-width:5px;*/     
    border-left:10px solid red; 单独设置边框的简写的方式
    
    
    
}
border-top:1px dotted red;  # 虚线
​
控制圆角
border-radius：50%;

1. display属性

div{
    width:100px;
    height:100px;
    border:1px solid red;
    /*display:inline; !* 将标签设置为内敛标签*！*/
    /*display:inline-block;!*将标签设置为同时具备内敛和块级标签的一些特性，比如可以设置高度宽度，但不独占一行*！*/
    /*display：none;！*隐藏标签，并不占用自己之前的空间*！*/
}
​
​
span{
    border:2px solid blue;
}
​
.c1{
    width:200px;
    height:200px;
    /*display:inline-block;*/
    display:block; /*将内敛标签设置为块级标签*/
}
​
​
值               意义
display:"none"  html文档中元素存在，但是在浏览器中不显示。一般用于配合JaveScript代码使用。
​
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
​
display:"inline"  按行内元素显示，此时再设置元素的width，height，margin-top，margin-bottom和float属性都不会有什么影响。
​
display："inline-block" 是元素同时具有行内元素和块级元素的特点。
​
visibility：hidden；/*隐藏标签，但是标签还占用原来的空间*/
/*display：none; !*隐藏标签，并且不占用自己之前的空间*！*/
​

2 css盒子模型

content内容区域
padding内边距
border 边框宽度
​
值      描述
none    无边框。
dotted  点状虚线边框。
dashed  矩形虚线边框。
solid   实线边框。
​
div{
    width:200px;
    height:100px;
    border:2px solid deeppink;
    /*padding-top:10px;*/
    /*padding-left:5px;*/
    /*padding-right:2px;*/
    /*padding-bottom:4px;*/
    /*padding:10px 20px; !*10px上下内边距，20px左右内边距*！*/
    /*padding：10px 20px 5px 2px; */
    padding:10px 20px 5px 0;
}
​
margin 外边距
top 距离上面标签的距离
bottom距离下面标签的距离
left距离左边标签的距离
right 距离右边标签的距离
​
​
.d1{
    width:200px;
    height:200px;
    border:2px solid deeppink;
    margin-bottom:200px;    
}
.d2{
    margin-top:100px;
    border:2px solid blue;
}
​
两种简写方式
​
/*margin:10px 20px;*/
margin:10px 5px 6px 3px;
两种情况：
垂直方向如果上下两个标签都设置了margin外边距，那么取两者的最大的值。
水平方向，两个标签都设置外边距，取两者的边距之和

3 浮动float【重点】

• 布局时用，设置了浮动的标签会脱离文档流。

.c1{
    background-color:red;
    height:100px;
    width；100px；
    float：left;
}
.c2{
    background-color:bule;
    height:100px;
    width:100px;
    float:right;
}
浮动会造成父级塌陷问题
解决方法：
1 父级标签设置高度
2 伪元素选择器清除浮动，给父级标签加上下面这个类值
<父级标签 class="clearfix"></父级标签>
​
.clearfix:after{
    content:"";
    display:block;
    clear:both; 清除浮动clear
}
​
clear的值和描述
值       描述
left    在左侧不允许浮动元素
right   在右侧不允许浮动元素
both    在左右两侧均不允许浮动元素

4 overflow溢出属性

.c1{
    width:200px;
    height：200px;
    border:1px solid red;
    /*overflow: hidden;*/
    overflow:auto;
}
<div class="c1">
    总结一下：为什么要有浮动啊，是想做页面布局，但是浮动有副作用，父级标签塌陷，所以要想办法去掉这个副作用，使用了clear来清除浮动带来的副作用，我们当然也可以通过设置标签为inline-block来实现这种布局效果，但是把一个块级标签变成一个类似内敛标签的感觉，不好操控，容易混乱，所以一般都用浮动来进行布局。
</div>
​
值       描述
visible 默认值。内容不会被修剪剪，会呈现在元素框之外。
hidden  内容会被修剪，并且其余内容是不可见的。
scroll  内容会被修剪，但是浏览器会显示滚动条一以便查看其余内容。
auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
​

5 圆形头像示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圆形的头像示例</title>
  <style>
​
    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;
      overflow: hidden;
    }
    
    .header-img>img {
        width: 100%;  #让img标签按照外层div标签的宽度来显示
​
    }
  </style>
</head>
<body>
​
<div class="header-img">
  <img src="meinv.png" alt="">
</div>
​
</body>   
</html>

总结一点:width宽度设置的时候,直接可以写100px,30%这种百分比的写法,它的宽度按照父级标签的宽度的百分比来计算.

6 定位position：相对定位和绝对定位【重要】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color:red;
            height:100px;
            width:100px;
        }
        .c2{
            background-color:blue;
            height:100px;
            width:100px;
             /*position:relative; !*相对定位，保留原来的空间位置，相对自己原来的位置移动，以左上角为基准*！*/
        /*top:20px;往下移动20px，距离原来位置的上边框20px*/
        /*top:-20px;*/
        /*left:20px;*/
        /*right: ;*/
        /*bottom: ;*/
        position:absolute;/*绝对定位,不保留自己原来的位置,按照父级标签或者祖先级标签..设置了position为 relative的标签的位置进行移动,如果一直找不到设置了设个属性的标签,那么按照body标签来移动 */
        top:20px;
        left:20px;
        }
        .c3{
            background-color:green;
            height:100px;
            width:100px;
        }
        .ccc{
            height:100px;
            width:200px;
            background-color:purple;
        }
        .cc{
            position:relative;
            left:200px;
            
        }
    </style>
</head>
<boby>
<div class="ccc"></div>
<div class="cc">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</div>
​
</boby>
</html>
​
position:static.  默认就是它
position:relative;相对定位,保留原来位置的空间,相对自己原来的位置移动
position:absolute;绝对定位,不保留原来位置的空间,按照父级标签或者祖先标签中有设置了position为相对定位的标签,如果有,按照他的位置移动,如果没有按照body移动
position:fixed; 固定定位.根据浏览器窗口位置来定位

回到顶部示例:position为fixed固定定位,通过相对于浏览器窗口的距离来设置位置.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color:red;
            height:500px;
            width:200px;
            
        }
        .c2{
            background-color:green;
            height:500px;
            width:200px
        }
        .s1{
            position:fixed;/*固定定位，位置是根据浏览器窗口来到*/
            /*top:20px;*/
            left:20px;
            bottom:20px;
            background-color:blue;
            height:40px;
            width:80px;
            text-align:center;
            line-height:40px;/*和标签高度一致，标签内容就垂直居中*/
            
        }
        .s1 a{
            color:white;
            text-decoration:none;
        }
    </style>
</head>
<boby>
<!--<a name="top">这里是顶部,亲爱的</a>-->  <!-- 锚点 -->
<div id="top">这是顶部</div> <!-- 锚点 -->
​
<div class="c1"></div>
<div class="c2"></div>
​
<span class="s1">
    <a href="#top">回到顶部</a> <!-- 触发锚点 -->
</span>
    
</boby>
</html>
​
锚点设置的两种方式
    <!--<a name="top">这里是顶部,亲爱的</a>-->  <!-- 锚点 -->
    <div id="top">这是顶部</div> <!-- 锚点 -->
触发锚点的a标签写法
<a href="#top">回到顶部</a> <!-- 触发锚点 -->

7 z-index控制层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background-color:rgba(0,0,0,0.5);
            z-index:99;
        }
        .mode{
            position:ficed;
            height:400px;
            width:300px;
            background-color:white;
            z-index:100px; /*数值越大越在上层显示*/
            left:50%;/*按照窗口的50%来移动*/
            mragin-left:-150px;
            mragin-top:-200px;
        }
    </style>
</head>
<boby>
<div>
    <h1>
        22期，吴老板唱歌
    </h1> 
</div>
    
<div class="mode">
​
</div>
​
<div class="shadow">
​
</div>
    
</boby>
</html>

opacity透明度

.c1{
    background-color:rgba(255,0,0,0.3);/*背景颜色或者字体颜色等单独的透明度。*/
    height:100px;
    width：100px;
}
.c2{
    background-color:rgb(255,0,0);
    height:100px;
    width:100px;
    opacity:0.3;/*整个标签透明度*/
    
}
<div class="c1">
    你好
</div>
<div class="c2">
    我好
</div>