CSS基础样式总结

2020-12-11 本文已影响0人西北有高楼lee

二、CSS基础样式

1、CSS样式简介

（1）内联样式

在标签内部通过style属性设置元素的样式
存在问题：
使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍，并且当样式发生变化时，必须要一个个的修改，非常的不方便。因此，在开发中绝对不要使用内联样式。

<p style="color: blue; font-size: 50px;">少小离家老大回，乡音无改鬓毛衰</p>

（2）内部样式

将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。
注意：
内联样式的优先级高于内部样式，因此当内部样式与内联样式同时为一个标签设置样式时，标签会按照内联样式来执行
存在问题：
内部样式只能对一个网页起作用，不能够跨网页进行复用

    <style>
      /* p标签的样式 */
        p{
            color: brown;
            font-size: 30px;
        }
    </style>

写在style中的内容不属于html，因此注释的方式也不同

（3）外部样式

可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件。将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验
注意：外部样式的优先级高于内部样式

<link rel="stylesheet" href="01CSS简介.css">

三种样式优先级比较：

内联样式 > 外部样式 > 内部样式
在实际开发中会优先使用外部样式

2、CSS选择器

（1）常用的选择器

标签选择器

作用：根据标签名来选中指定元素
语法：标签名{}
```
h1{
  color: crimson;
}
```
id选择器

作用：根据标签的id属性值选中一个元素
语法：#id属性值{}
```
#blue{
  color: blue;
}
```
类选择器

作用：根据元素的class属性值选中一组元素
语法：.class属性值{}
```
.yellow{
  color: yellow;
}
```
通配选择器

作用：选中页面中的所有元素
语法：*{}
```
*{
  margin: 0;
  padding: 0;
}
```

（2）复合选择器

交集选择器

作用：选中同时符合多个条件的元素（选中的是同一个标签的多个属性值）
语法：选择器1选择器2选择器n{}（各个选择器挨着写，不需要任何间隔）
注意：交集选择器中如果有标签选择器，必须使用标签选择器开头
```
div.red{  /* 表示选中带有类名为red的div标签 */
  font-size: 30px;
}
.a.b.c{  /* 表示选中同时具有a,b,c三个类名的所有标签 */
  color: blue;
}
<div class="red">我是div1</div>
<div class="blue a b c">我是div2</div> 
```
并集选择器

作用：同时选择多个选择器对应的元素（选中的是多个标签的不同属性值）
语法：选择器1，选择器2，选择器n{}
这样的组合也是可以的： #b1,.p1,h1,span,div.red{ }
```
h1,span{ /* 表示选中h1和span标签 */
  color: chartreuse;
}
<h1>标题</h1>
<span>哈哈哈</span> 
```

（3）关系选择器

子元素选择器

作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
```
div.box>span{
  color: red;
}
```
后代元素选择器

作用：选中指定元素内的指定后代元素
语法：祖先后代{}
```
div span{ /* 选择div中所有的span元素 */
  color: royalblue;
}
```
兄弟选择器

作用：为兄的弟弟设置样式
语法：
兄 + 弟{} 只改变兄后面一个标签的样式
兄 ~ 弟{} 改变兄之后所有弟弟的样式
```
        p + span{
            color: green;
        }
        p ~ span{
            color: hotpink;
        }
```

（4）属性选择

选择含有指定属性的元素

语法：标签名[属性名]{ }
```
p[title]{
  color: hotpink;
}
```
选择含有指定属性名和属性值的元素

语法：标签名[属性名=属性值]{}
```
p[title=abc]{
  color: indigo;
}
<p title="abc">少小离家老大回</p>
```
选择属性值以指定值开头的元素

语法：标签名[属性名^=属性值]{}
```
p[title^=abc]{
  color: lawngreen;
}
<p title="abcdef">乡音无改鬓毛衰</p>
```

选择属性值以指定值结尾的元素

语法：标签名[属性名$=属性值]{}

p[title$=abc]{
  color: lightseagreen;
}
<p title="helloabc">儿童相见不相识</p>

选择属性值中含有某值的元素

语法：标签名[属性名*=属性值]{}

p[title*=e]{
  color: maroon;
}
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>

（5）伪类选择器

伪类：不存在的类，特殊的类
伪类用来描述一个元素的特殊状态，比如第一个子元素，被点击的元素，鼠标移入的元素等等
伪类一般情况下都是用：开头

:first-child表示第一个子元素
```
ul>li:first-child{
  color: red;
}
```
:last-child表示最后一个子元素
```
ul>li:last-child{
  color: blue;
}
```
:nth-child()选中第n个子元素

括号中可以填写需要修改样式的子元素的序号，默认从1开始
特殊值：
n 表示选中所有标签
2n或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位的元素
```
ul>li:nth-child(2n+1){
  color: chartreuse;
}
```

    <ul>
        <span>我是一个span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

需要注意的是：
上述伪类选择器是将ul标签下所有的标签进行排序，包括li标签和其他标签。然后按着伪类选择器中的序号选择相应的元素。由于在前面限制了只选择ul下的li元素，因此如果ul下只有li元素，那么我们可以得到我们想要选中的元素；如果ul下还有其他的元素，那么元素的排序就不只是按着li的顺序排列，得到的结果也不一定是我们所需要的。

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序

:first-of-type
:last-of-type

:nth-of-type()

ul>li:first-of-type{
  color: yellow;
}

:not()否定伪类

将符合条件的元素从选择器中去除，可以在括号中写上面的伪类选择器，写不同类型的选择器也会得到不同的结果。
```
ul>li:not(:nth-child(3)){
  color: red;
}
```
```
ul>li:not(:nth-of-type(3)){
  color: red;
}
```

（6）超链接的伪类

:link用来表示没访问过的链接
```
a:link{
  color: red;
}
```
:visited用来表示访问过的链接
```
a:visited{
  color: seagreen;
}
```

:hover用来表示鼠标移入的状态

a:hover{
  color: sienna;
  font-size: 20px;
}

:active用来表示鼠标点击即鼠标按下还没有抬起的状态
```
a:active{
  color: springgreen;
  font-size: 50px;
}
```

（7）伪元素选择器

伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素的使用：：开头

标签名::first-letter表示第一个字母

/* 为p标签中的第一个字母设置字号 */
p::first-letter{
  font-size: 50px;
}

标签名::first-line表示第一行

/* 为p标签中的第一行设置背景颜色 */
p::first-line{
  background-color: brown;
}

标签名::selection表示选中的内容

/* 为鼠标在网页中选中的p标签中的内容设置背景颜色 */
p::selection{
  background-color: chartreuse;
}

标签名::before元素的开始位置

标签名::after元素的最后位置

注意：before和after必须结合content属性使用，表示为相应位置添加内容

        div::before{
            content: "abc";
            color: crimson;
        }
        div::after{
            content: "xyz";
            color: cyan;
        }
              <div>hello hello how are you</div>
在页面中输出的内容为：
abchello hello how are youxyz

通过before和after添加的内容在网页中为不可选中的状态（虽然可以看到，但是无法选中）

3、样式的继承

我们为一个元素设置的样式同时也会应用到它的后代元素上，继承的发生是在祖先和后代之间。继承的设计是为了更方便去开发，利用继承我们可以将一些通用的样式统一设置到公共的祖先元素上，这样只需要设置一次即可让所有的元素都具有该样式。

注意：
并不是所有的样式都会被继承
比如：背景相关的。布局相关的等样式都不会被继承

4、选择器权重

样式的冲突
当我们通过不同的选择器选中相同的元素，并且为相同的样式设置不同的值时，就会发生样式冲突发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
选择器的权重（由高到低）
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式没有优先级
比较优先级时，需要将所有的选择器的优先级进项相加计算，最后优先级越高，则优先显示（分组选择器单独计算）。选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器，如果优先级计算后相同，此时则优先使用靠下的样式。可以在某一个样式的后面添加!important，则此时该样式会获取到最高的优先级，甚至超过内联样式，这个属性在开发中慎用。

        div{
            color: darkorange;
        }
        .red{
            color: red !important;
        }
        #box1{
            color: royalblue;
        }
        <div id="box1" class="red">我是一个div</div>

5、单位

（1）长度单位

像素：
屏幕实际上是由一个一个的小点构成的，不同屏幕的像素大小不同，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同设备下显示效果是不一样的。

        .box1{
            width: 200px;
            height: 200px;
        }

（2）百分比

可以将属性值设置为相对于其父元素属性值的百分比，设置百分比的好处是可以使子元素跟随父元素的改变而改变。

        .box2{
            width: 50%;
            height: 50%;
        }

（3）em

em是相对于元素的字体大小来计算的，1em=1font-size，em会根据字体大小的改变而改变。如果没有自定义字体大小，浏览器默认字体大小是16px。

        .box3{
            font-size: 20px;
            width: 10em; /* 实际的大小相当于10*20=200px */
            height: 10em;
        }

（4）rem

rem是相对于根元素（html）的字体大小来计算的，原理和em相同

        html{
            font-size: 10px;
        }
        .box4{
            font-size: 50px;
            width: 10rem;
            height: 10rem;
            background-color: sienna;
        }

6、颜色

颜色单位，在CSS中可以直接使用颜色名来设置各种颜色，如red,,green,dark等，这样是非常不方便的

（1）RGB值

RGB通过三种颜色的不同浓度来调配出不同的颜色，每一种颜色的范围在0_255（0%100%）之间语法：RGB（红色，绿色，蓝色）

background-color: rgb(255, 0, 0); /* 红色 */

（2）RGBA值

在RGB的基础上增加了一个a表示不透明度，需要四个值，前三个和RGB一样，第四个表示不透明度，1表示完全不透明；0表示完全透明；.5表示半透明。

background-color: rgba(0, 200, 100, .5);

（3）十六进制的RGB值

语法：#红色绿色蓝色
颜色浓度为：00~ff
如果颜色两位两位重复可以进行简写，即#aabbcc与#abc的值相同

background-color: #bbffaa;

（4）HSL、HSLA值

H 色相 0~360
S 饱和度，颜色的浓度 0%~100%
L 亮度 0%~100%
A 不透明度

background-color: hsl(0, 90%, 80%);
background-color: hsla(100, 100%, 10%, .5);

CSS基础样式总结

二、CSS基础样式

1、CSS样式简介

（1）内联样式

（2）内部样式

（3）外部样式

2、CSS选择器

（1）常用的选择器

标签选择器

id选择器

类选择器

通配选择器

（2）复合选择器

交集选择器

并集选择器

（3）关系选择器

子元素选择器

后代元素选择器

兄弟选择器

（4）属性选择

选择含有指定属性的元素

选择含有指定属性名和属性值的元素

选择属性值以指定值开头的元素

选择属性值以指定值结尾的元素

选择属性值中含有某值的元素

（5）伪类选择器

:first-child表示第一个子元素

:last-child表示最后一个子元素

:nth-child()选中第n个子元素

:not()否定伪类