「理解 CSS|青训营笔记」参与「第五届青训营」伴学笔记创作活动的第2天。今日学习了CSS的基本知识：什么是CSS，

这是我参与「第五届青训营」伴学笔记创作活动的第2天。

今日初步认识了CSS：

什么是CSS？
CSS引入方式

CSS选择器

颜色表示
font字体

什么是CSS？

CSS（Cascading Style Sheets）层叠样式表。用来定义页面元素的样式（字体、颜色、位置、大小等）

CSS引入方式

CSS有三种引入方式：

外链式
嵌入式
内联式

内联式只能对本条标签进行样式设计，所以一般情况下我们使用外链式或嵌入式来引入CSS。

外链式：

CSS写在单独的CSS文件中，通过link标签引入。

外链式.png

嵌入式：

将CSS写在html文件的style标签中。

嵌入式.png

内联式：

将CSS样式写在标签中。

内联式.png

CSS选择器

基础选择器

通配选择器

*{CSS属性名:属性值;}

对所有的标签进行样式设置

    <style>
        *{
            color: red;/* 将选中标签的文字颜色设置为红色 */
        }
    </style>
   <h1>h1标签</h1>
   <div>div标签</div>
   <ul>
    <li>li标签</li>
   </ul>
   <p>p标签</p>

通配选择器.png

标签选择器

.类名{CSS属性名:属性值;}

找到页面中所有这类标签并进行样式设置

    <style>
        p{
            color: red;/* 将选中标签的文字颜色设置为红色 */
        }
    </style>
   <p>P标签</p>
   <h1>h1标签</h1>
   <div>div标签</div>

标签选择器.png

类选择器

.类名{CSS属性名:属性值;}

找到页面中所有带有这个类名的标签进行样式设置

    <style>
        .red{
            color: red;/* 将选中标签的文字颜色设置为红色 */
        }
    </style>
   <p>class不为red的p标签</p>
   <p class="red">class为red的p标签</p>
   <div class="red">class为red的div标签</div>

类选择器.png

id选择器

#id属性值{CSS属性名:属性值;}

找到页面中所有带有这个id属性值的标签进行样式设置

    <style>
        #red{
            color: red;/* 将选中标签的文字颜色设置为红色 */
        }
        #blue{
            color:blue;/* 将选中标签的文字颜色设置为蓝色 */
        }
    </style>
   <p>id不为red的p标签</p>
   <p id="red">id为red的p标签</p>
   <p id="blue">id为blue的p标签</p>

id选择器.png

属性选择器：

[属性]{CSS属性名：属性值；}

找到页面中所有带有这个属性的标签进行样式设置

    <style>
        [placeholder]{
            color:green;/* 将选中标签的文字颜色设为绿色 */
            
            border:3px solid red; /* 将选中标签的边框宽度设为3px，实线，红色 */
        }
    </style>
    <input type="text" placeholder="" value="含placeholder属性">
    <!-- value：文本框的初始值 -->
    <br>
   <input type="text" value="不含placeholder属性">

属性选择器.png

    <style>
        a[href="绿色"]{/* 选中是a标签并且属性href的值为绿色的标签 */
            color:green;
        }
        a[href^="#"] {/* 选中是a标签并且属性href的值以"#"开头的标签 */
          color: red;
        }
        a[href$=".jpg"] {/* 选中是a标签并且属性href的值以".jpg"结尾的标签 */
            color: blue;
        }
    </style>
    <p><a href="#top">回到顶部</a></p>
    <p><a href="a.jpg">查看图片</a></p>
    <p><a href="绿色">绿色超链接</a></p>

属性选择器2.png

复合选择器

后代选择器

选择器1>选择器2{CSS}

后代选择器表示：在选择器1找到的标签的后代中，找到满足选择器2的标签，设置样式，选择器与选择器之间用空格隔开。

    <style>
        ul p{/*对ul标签后代中的p标签设置样式*/
            color:red;
        }
    </style>
    <ul>
        <li>
            <p>ul中的li标签中的p标签</p>
        </li>
        <li>
            ul中的li标签
        </li>
    </ul>
    <p>不在ul标签中的p标签</p>

后代选择器.png

子代选择器

选择器1>选择器2{CSS}

子代选择器表示：在选择器1所找到的标签的子代中，找到满足选择器2的标签，设置样式，选择器与选择器之间用">"隔开。

子代选择器与后代选择器的区别：

子代选择器只在选择器1的子代中，寻找满足选择器2的标签。
后代选择器是在选择器1的后代中寻找满足选择器2的标签，后代包括子代，孙代...

    <style>
        div>b{
            color: red;
                }
    </style>
    <div>
            <b>子代b标签</b>
            <br>
            <span>
                <b>孙代b标签</b>
            </span>
    </div>

子代选择器.png

可以看到，孙代b标签没有被选中。

并集选择器

选择器1,选择器2{CSS}

并集选择器表示：在页面中找到选择器1 和选择器2 选中的标签，设置样式，选择器与选择器之间用","隔开。

    <style>
        div,p{
            color:red;
        }
    </style>
    <div>div标签</div>
    <p>p标签</p>

并集选择器.png

交集选择器

选择器1选择器2{CSS}

交集选择器表示：在页面中找到既能被 选择器1 选中，又能被 选择器2 选中的标签,选择器与选择器之间没有间隔。

    <style>
        div.red{
            color:red;
        }
    </style>
    <div class="red">红色div标签</div>
    <div>div标签</div>

交集选择器.png

兄弟选择器

选择器1~选择器2{CSS}

在选择器1 选中的标签的兄弟元素中，选中符合选择器2 的标签修改样式，选择器与选择器之间用"~"隔开。

    <style>
        p~span{
            color:red;
        }
    </style>
    <div>
        <p>p标签</p>
        <span>span标签</span><br><br>
        <b>b标签</b><br><br>
        <span>span标签</span><br><br>
    </div>

兄弟选择器.png

相邻选择器

选择器1+选择器2{CSS}

在选择器1 选中的标签的兄弟元素中，选中 第一个符合选择器2 的标签修改样式，选择器与选择器之间用"+"隔开。

<style>
        p+span{
            color:red;
        }
    </style>
    <div>
        <p>p标签</p>
        <span>span标签</span><br><br>
        <b>b标签</b><br><br>
        <span>span标签</span><br><br>
    </div>

相邻选择器.png

伪类选择器

伪类选择器：用来描述元素的特殊状态，比如第一个元素，最后一个元素，鼠标悬停，鼠标点击等...

状态伪类：

a:link{}设置超链接默认状态的样式

a:visited{}设置超链接被访问过之后的样式

:active{}设置元素在鼠标按下时的样式

:focus{}设置元素聚焦时的样式

结构伪类：

E:first-child{}

在父元素的子元素中，选择第一个元素并且类型为E。

E:last-child{}

在父元素的子元素中，选择最后一个元素并且类型为E。

E:nth-child(n){}

在父元素的子元素中，选择第n个元素并且类型为E。

E:nth-last-child(n){}

在父元素的子元素中，选择倒数第n个元素并且类型为E。

E:nth-of-type(n){}

在父元素的E类型的子元素中，选择第n个。

颜色表示

十六进制表示

“#”+6位16进制数
例如：color:#ffffff;、color:#a4b4e5;

rgb与rgba表示

rgb（red,green,blue）通过控制红绿蓝三种颜色的深浅来表示不同的颜色。
rgba（red,green,blue,alpha）在rgb的基础上增加了a控制颜色的透明度。

rgb(0~255,0~255,0~255)
例如：color:rgb(0,0,255);、color:rgb(0,255,255)
如果要控制颜色的透明度，可以使用rgba(0~255,0~255,0~255,0~1)，最后一位数字代表不透明度，越接近1越不透明
例如:color:rgba(33,24,17,0.3)

hsl与hsla表示

hsl即色相（Hue）、饱和度（Saturation）、亮度（Lightness）。

色相（H）是颜色的基本属性，就是平常所说的颜色名称，如红色、黄色等，取值为0~360。
饱和度（S）是指色彩的纯度，饱和度越高颜色越纯，取值为0~100%。
亮度（L）越高，颜色越趋向于白，亮度越低，颜色越趋向于黑，取值为0~100%。

hsla比hsl多出一个a（alpha）控制透明度，取值为0~1。

Font字体

字体粗细

属性名：font-weight

取值：

关键字

正常	normal
加粗	bold

数字（100~900,400为正常，700为加粗）

字体倾斜

属性名：font-style

取值：

正常（默认值）：normal
倾斜：italic

字体系列

属性名：font-family

取值通常为：字体1，字体2，字体3,...,字体系列

通用字体系列：

sans-serif（无衬线字体：Arial、Helvetica、黑体、微软雅黑...）
serif（衬线字体：Georgia、宋体...）
monospace（等宽字体：Consolas、Courier、中文字体...）
Cursive（手写字体：Caflisch Script、楷体...）
Fantasy（Comic Sans MS、Papyrus...）

浏览器渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则寻找下一个字体，如果都不支持，会根据操作系统，显示最后字体系列的默认字体。

通常情况下，英文字体放在中文字体前面。在有些时候，我们希望用户的网页中显示我们希望的指定字体，可以使用Web Fonts，将字体存放到服务器中。

「理解 CSS|青训营笔记」