这是我参与「第四届青训营」笔记创作活动的第1天

一、CSS概述

1. 什么是CSS

CSS：Cascading Style Sheet 层叠样式表：定义页面元素的样式

设置字体和颜色
设置位置和大小
添加动画样式

2.CSS工作方式

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。
它分两个阶段处理文档：
（1）浏览器将HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
（2）浏览器显示 DOM 的内容。

如图所示，计算器加载并解析HTML文件后产生DOM树，并在解析HTML后加载解析CSS文档，将解析后的CSS样式赋给DOM树中的对应元素，最后在浏览器中展示。

2. CSS基本语法

选择器{
属性名1：属性值1;
属性名2：属性值2;
}
每个样式属性之间用分号连接,例：

#img1{
       width:600px;
       height:400px;
     }

3. CSS使用方法

行内样式，内联样式只对当前元素生效，代码没有可复用性

<p style="color: red;">我是一个p标签</p>

内嵌式位置：head标签内部，title标签下面，在style标签内部

p{
  color: red;
  background-color: pink;
}

外链式创建一个.css文件，在html的head标签里使用link引入

<link rel="stylesheet” href="./style.css">

权重：内联样式 > 内嵌式 = 外链式

二、CSS选择器

1. 基本选择器

通用选择器
匹配所有元素，通常用来清除页面的默认样式

*{margin：0； padding：0;}

标签选择器
通过标签名选择，无视嵌套规则
id选择器
通过标签上id属性进行选择

语法格式： #id名{属性值：属性名；}

类选择器
通过标签上的class属性进行选择

语法格式：.class属性{属性值：属性名；}

2. 组合选择器

后代选择器
通过元素的后代关系，来匹配元素

后代关系：一层嵌套或大于一层嵌套称为后代

后代关系不一定是父子关系

语法格式：选择器间空格隔开
选择器1 选择器2 选择器3{属性值：属性名；}

交集选择器
由两个或多个选择器构成，使用较少

语法格式：标签选择器+类选择器，中间没有空格
例：p.nav{color: #000;}

并集选择器
可以选择多组标签，同时为它们定义相同的样式

语法格式：选择器之间用","连接
例：p, a, .nav{color：pink;}

子选择器
匹配指定元素的所有子元素
例：

  <div>
        <h1>
            <p>标签1</p>
        </h1>
        <p>标签2</p>
        <p>标签3</p>
        
  </div>
  /*匹配div子元素中所有的父元素*/
  div > p {
         color: pink;
  }

兄弟选择器
语法：A ~ B{属性名：属性值；}
相邻选择器
语法：A - B{属性名：属性值；}

3. 伪类选择器

CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态

动态伪类(多用于超链接的样式)：
：link: 访问前状态 (仅超链接适用)
：visited：访问后状态 (仅超链接适用)
：hover：鼠标悬停时的状态
：active：鼠标点击时的状态
：focus：元素获得焦点时的状态 (输入类元素)
常用结构伪类选择器：
：first-child：匹配兄弟元素中的第一个元素
：last-child：匹配兄弟元素中的最后一个元素
：nth-child(n)：匹配兄弟元素中的第n个元素
：nth-last-child(n)：匹配兄弟元素中的倒数第n个元素
：root：用来定位HTML页面中的根元素
：empty:没有子元素的元素
目标伪类
：target：匹配文档的某个标签的目标元素
否定伪类
：not：匹配除...之外的
语言伪类
：lang：匹配指定语言
UI元素状态伪类(多用于表单) ：enabled：可用状态：disabled：禁用状态：checked：被勾选状态：default：默认选中表单元素

4. 属性选择器

根据属性或属性值选择元素

语法格式：[属性选择器]{属性名：属性值；}

例1：为带有某种属性的元素设置样式：

[password]{
    color: red;
}

例2：为某属性等于xxx的元素设置样式：

input[type=text]{
   color: red;
     }

使用属性选择器可以只指定元素的某个属性，还可以同时指定元素的某个属性和其对应的属性值

5. 选择器的权重

! important - - - infinity
内联样式 - - - 1000
id 选择器 - - - 100
属性、伪类、类名选择器 - - - 10
标签选择器、伪元素选择器 - - - 1
通配符选择器 - - - 0
同一行的选择器权重值相加，权重值较高的样式会覆盖权重值较低的样式

注：1.选择器权重相同时，写在后面的样式生效(后面的样式会覆盖前面的)
2.选择器的权重值最高不一定生效

三、CSS属性

1. 颜色属性

color：值
颜色值定义方式：

十六进制如："#ff0000"
rgb 如："rgb(255,0,0)"
rgba 透明度如："rgba(255,0,0,0.5)"
颜色名称如："pink"

2. 文字属性

font-style：规定文字样式

normal：正常的
italic：倾斜的

font-family：设置文字字体

Arial：黑体
Helvetica：微软雅黑
Georgia：宋体

font-size:设置字体大小
单位：px、em
百分数：相对于父元素字体大小
font-weight：设置文字粗细

bold：加粗
lighter:细线

文字属性的缩写语法：font：style weight size family；例：

p{
   font：italic bold 16px Arial；
}

3. 文本属性

text-align：设置文本水平对齐方式
值：left right center
text-decoration:修饰文本

none：无修饰可用于去掉超链接的下划线
underline：下划线
overline：上划线
line-through：删除线

text-indent：设置文本缩进

单位：
px
%：参考父级width属性百分比
em：数字对应中文字符数

例：

p{
 text-align: center;
 font-size: 15px;
 text-indent: 0;
 }

line-height: 行间距，可以控制文字行与行之间的距离

p{
   line-height：20px；
}

CSS基础 | 青训营笔记