【web前端HTML+CSS+JS】--- CSS学习笔记02

一、CSS（层叠样式表）介绍

1.优势

2.定义解释

如果有多个选择器共同作用的话，只有优先级最高那层样式决定最终的效果

3.语句格式

4.注释

位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束

二、布局元素

1.无语义

<div>块级标签  <span>行级标签

div和span：只起到描述的作用，不带任何样式，可以使用CSS进行样式设置

可以通过 <div> 和 <span> 将 HTML 元素组合起来

3.语义布局

三、标签选择器

1.标签/元素选择器

为标签添加样式

2.类选择器（.）

只想选择部分标签进行控制，需要对标签进行分类，并分别加上class属性，class值可以重复

class 的语法是：写一个点 (.)，后跟一个 class名称。然后，在花括号 {} 中定义 CSS 属性

还可以指定只有特定的 HTML 元素会受类的影响。

只有具有 class="center" 的 <p> 元素会居中对齐：

p.center {
  text-align: center;
  color: red;
}

3.ID选择器（#）

作用于单个标签上

一个 HTML文档中不能存在多个有相同 id 的元素

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

4.全局/通用选择器（*）

选择全部标签

5.属性选择器

6.子字符串匹配选择器

7.忽略大小写匹配选择器

8.伪类选择器

根据状态（普通/行为）分类，不是手动分类

（1）普通伪类选择器

比如永远动态的对第一个段落控制样式

（2）行为伪类选择器

比如被点击的链接，不同的行为可以设置不同的样式

9.关系选择器

（1）交集选择器

格式：标签.类值 （必须标签在前，否则会把标签名当作类名的一部分，产生歧义）

（2）并集/分组选择器

将不同选择器合并在一起，缩减代码

格式：标签和类用逗号隔开，前后顺序无所谓

（3）后代选择器

格式：父标签 空格 子标签

选择所有的子元素，包含直接和间接

（4）子代选择器

格式：父标签 >子标签

只控制一级子元素

（5）兄弟选择器

格式：某个标签+相邻的标签

只会对相邻的标签进行控制，样式对本身不起作用

格式：某个标签~相邻的标签

对同一级别的兄弟标签都会起作用，下面例子中段落123都会有样式，即使3不挨着2

四、样式添加类型

1.行内/内联样式

标签和样式耦合在一起

2.内部样式

将样式抽取出来，但只能针对当面页面控制

在head中添加style，在style中的注释是/* */

3.外部样式

新建一个css文件，将样式写在里面

外部 .css 文件不应包含任何 HTML 标签

在html文件中引入css文件

五、选择器的优先级

1.非关系选择器优先级

2.关系选择器优先级

赋分比大小，分数一致遵循就近原则

显示蓝色

六、常见属性

w3school 在线教程 点击参考书有属性汇总

1.背景颜色

2.字体属性

（1）字体族属性

当不支持第一种字体时，依次用后面的

（2）字体大小属性

默认大小是16px

（3）字体风格属性

设置斜体 

（4）字体粗细属性

有的字体不支持所有的选项

（5）字体复合属性

通过font可以同时设置多个属性，不过必须按照一定的顺序来

3.文本属性

（1）文本颜色属性

（2）文本间距属性

英文字母以及汉字之间的间距：

英文单词之间的间距：

（3）文本划线属性

分别为下划线和中划线

（4）文本缩进属性

缩进两个字符，设置的值和字符的大小相关

（5）文本对齐选项

默认靠左对齐

（6）文本行高属性

设置行之间的距离

4.列表属性

5.边框属性

顺序没有要求

七、盒子模型

1.概念

选择中间的容器，对内外上下左右有8个属性

2.两种计算方式

（1）content-box

宽度是100像素的盒子实际占用122像素

（2）border-box

宽度是100像素的盒子实际占用100像素

3.展示方式

通过display进行设置

4.注意

如果两个盒子上下相邻，他们的实际外边距是两个margin中较大的一个

如果给盒子设置了背景颜色，padding会被上色，border不会

如果父元素没有设置高度，子元素设置了浮动，父元素的高度会塌陷消失，需要给父元素设置overflow

八、元素分类

1.块级元素

2.行内元素

3.行内块级元素

4.元素类型转换

九、浮动

将二维的文档流变为三维，脱离文档流，让元素漂浮，将原来文档流的内容推开，从而实现图片可以和文字在一行

十、定位

1.静态定位

是文档流的默认位置

2.相对定位

3.绝对定位

4.固定定位