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

CSS

CSS指的是Cascading Style Sheets的首字母缩写，用来定义页面元素的样式，设置字体和颜色，设置位置和大小，添加动画效果。

CSS的基础代码如下：

//一条样式规则
h1{   //选择器，选中页面中所有的h1
color: white;   
font-size:14px;
}
//如果在HTML中引入可以用style标签

在页面中使用CSS有基本的三种方法，第一种是外链；第二种是嵌入，样式的代码嵌入到HTML标签中；第三种标签是内联，对标签的一些样式直接写在标签的的style中。更推荐的是第一种外链的方法，使得内容和样式分离，使得HTML负责内容，CSS复杂样式，有功能的分工。

CSS的工作原理

浏览器加载和解析HTML，解析HTML时，可能通过外链、嵌入或者内联的方式加载和解析CSS，通过样式添加到DOM节点，得到每一个属性的样式，得到一个渲染树，之后浏览器进行页面展示。

CSS的语法

选择器Selector

选择器找出页面中的元素，方便给他们设置样式，可以使用多种方式选择元素。

通配选择器： *
id选择器：如果在标签中设置了id属性，可以用# 来选中id,id需要在页面中是唯一的
类选择器：

        <li class="">  </li>

class可以出现多次
属性选择器：通过这个元素的属性或者属性值来选中这个元素，用[]来选中

        <p><a= href="#top">回到顶部</a> </p>
        <p><a= href="a.jpg">查看图片 </a> </p>
    <style>
      a[href^="#"]{           //以#开头的属性会被选中
        }
      a[href$=".jpg"]{        //以.jpg结尾的属性会被选中
        }
    </style>

伪类还可以通过伪类来选中元素：一种是状态性伪类，通过a来定义不同的状态，例如链接的访问与非访问，鼠标放到链接，以及鼠标按下的状态；一种是结构伪类，会根据DOM节点在DOM树出现的位置来决定是否选择。

    li:first-child{}
    li:last-child{}

组合选择

一组选择器 可以用逗号分开，一起写上

颜色设置

颜色的设置设定RGB，rgb(0,0,0) 三个数值分别表示红色、绿色、蓝色的数量，数量是从0-255，简写可以用#后面写六位字符，每两位表示十六进制的颜色的数量。
RGB表示存在的问题是从数值无法直接判断出具体是什么颜色，因此为了解决此类问题，另一种的表示方法是HSL。HSL把颜色的属性定位三个方面，Hue（色相），Saturation(饱和度)，Lightness（亮度）。hsl(0,0%,0%)。
对颜色的描述还可以加入一个alpha表示透明度，rgba,hsla, a的数值是从0-1，0就是完全透明，1表示不透明。

字体设置

字体放在font-family里面设置，可以制定多个字体，从前到后使用，如果前面的设备上没有就使用后一个，用逗号隔开。

字体设置

CSS的调试

在实际的调试CSS的过程中可以右键点击页面选择“检查”，或者使用快捷键Ctrl+Shift+I(Windows)

前端技术CSS-1|青训营笔记

CSS

CSS的工作原理

CSS的语法

CSS的调试