一、CSS基础语法

1.格式：选择器{属性1: 值1; 属性2: 值2; …}
2.属性：
• width、height：长度单位有两种表示：px、%
• background-coclor：背景色

二、CSS样式的引入方式

1.内联（行内、行间）样式

在html标签上添加style属性来实现
<div style="width: 100px; height: 100px; background-color: aquamarine;">块1</div>

2.内部样式

在< style>标签内添加的样式，< style>< /style> 一般写在head部分
优点：内部样式的代码可以复用，符合W3C的规范标准：尽量让结构和样式分开处理

3.外部样式

引入一个单独的CSS文件，name.css
引入方法：通过< link>标签引入外部资源，rel属性指定资源和页面的关系，href属性指定资源的地址，< link> 标签只能存在于head部分，可以出现多次

三、CSS段落样式

1.text-decoration：文本装饰

取值
• 下划线：underline
• 删除线：line-through
• 上划线：overline
• 不添加任何装饰：none
可添加多个文本修饰，多个修饰之间用空格隔开。

2.text-transform：文本大小写（针对英文）

• 小写：lowercase
• 大写：uppercase
• 只针对每个单词的首字母大写：capitalize

3.text-indent：文本缩进

(1)主要针对首行缩进
(2)em单位：是一个相对单位，1em永远都和字体大小（font-size）相同。但如果一段文字中出现了英文，字体仍然比较难对齐。

4.text-align：文本水平对齐方式

left、right、center、justify（两端点对齐）

5.line-height：定义行高

• 默认行高：不是固定值，而是根据当前字体的大小不断变化的
• 取值：px（像素）；（比例值，和文字大小成比例）
letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）
强制折行（针对英文、阿拉伯数字）
• word-break: break-all; 非常强烈的折行
• word-wrap: break-word; 不是那么强烈的折行，可能会产生一些空白的区域

四、CSS复合样式

1.一个CSS属性只控制一种样式，叫做单一样式。
2.一个CSS属性控制多种样式，叫做复合样式。
复合样式的写法是通过空格对多个属性进行分割，有些复合写法不需要关心顺序，例如background和border，有的需要关心顺序，例如font。
单一样式与复合样式尽量不要混写，如果非要混写，那么一定要先写复合样式，再写单一样式。因为在复合样式里没有写的样式会按照默认样式进行设置，所以要后写单一模式把之前复合里默认的样式覆盖掉。

五、CSS选择器

1.id选择器

css：#elem{}
html：id=“elem”
• 在一个页面中，id值是唯一的
• 命名规范：字母 _ - 数字组合而成，并且第一位不能是数字
• 命名方式：驼峰式（searchSmallButton）、下划线式（search_small_button）、短线式（search-small-button）

2.class选择器

css：.elem{}
html：class=“elem”
• class选择器是可以复用的
• 可以添加多个class样式
• 多个标签的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
• 标签+类名的写法

3.标签选择器（TAG选择器）

css：div{ }
html：< div>
使用的场景：
• 去掉某些标签的默认样式时
• 复杂的选择器中，如层次选择器

4.群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用

5.通配选择器

*{ }
因为会给所有标签添加样式，所以要慎用。

6.层次选择器

• 后代选择器：M N { }
• 子代选择器：M > N { }
• 兄弟：M ~ N { }
• 相邻：M + N { }

7.伪类选择器

同一个标签，根据其不同的种状态，有不同的样式，这就叫做“伪类”。伪类用冒号来表示。
写法：M：伪类{ }
• :link 访问前M的样式（只能添加给a标签）
• :visited 访问后M的样式（只能添加给a标签）
• :hover 鼠标移入时M的样式（可以添加给所有标签）
• :active 鼠标按下时M的样式（可以添加给所有标签）
如果4个伪类都生效，一定要注意顺序：L V H A
一般的网站不会对a链接做4个操作，只会设置a{ }和a:hover{ }
• :after、:before 通过伪类的方式给元素添加一个文本内容
• :checked、:disable、:focus 都是针对表单元素的

8.结构伪类选择器

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[class*=bbb][id] {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>苏子豪</div>
    <div class="aaa">苏子豪</div>
    <div class="aaa-bbb">苏子豪</div>
    <div id="aaa">苏子豪</div>
    <div class="aaa-bbb" id="aaa">苏子豪</div>
    <div class="bbb-aaa">苏子豪</div>
</body>

</html>

六、CSS样式继承

1.CSS 继承是指我们设置上级(父级)的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。一般情况下，只有文字相关的样式可以被继承。
2.常见应用场景：
可以直接给ul设置list-style:none属性，从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认的文字大小
布局相关的样式默认不能被继承，但可以通过设置继承属性 inherit 来继承布局相关属性。
a标签的color会继承失效
h系列标签的font-size会继承失效
div的高度不能继承，但是宽的有类似于继承的效果

2022-08-05 css