css基础笔记

css样式

1. 术语

css规则 = 选择器 + 声明块

选择器

选择器：选中元素

1. 元素选择器 p {}
2. id选择器 #wrapper {}
3. 类选择器 .box {}

声明块

声明块：包含很多声明（属性），每一个声明表达某方面的样式

2. css代码位置

1. 内部样式表: style元素内

<style>
    h1{
        font-size: 24px;
    }
</style>

2. 内联样式表: 元素的style属性中

<p style="color: red">段落</p>

3. 外部样式表: link引入独立的css文件
   （1）解决多页面样式重复
   （2）有利于浏览器缓存，从而提高页面响应速度
   （3）有利于html、css代码分离, 更容易阅读和维护

<link rel="stylesheet" href="./demo.css">

3. 常见样式声明

1. color: 文字颜色
   *** 预设值 *** ：定义好的单词
   *** 三原色 色值 *** ：光学三原色（红绿蓝），0~255

rgb表示法：
rgb(255, 0, 0);
hex(16进制)表示法
#21262a;

2. background-color: 元素背景颜色

3. font-size: 元素内部文字尺寸大小
   ** px ** : 像素，绝对单位，简单理解为文字高度占多少个像素
   ** em ** : 相对单位，相对于父元素的字体大小
   每个元素必须有字体大小，如未声明，则直接使用父元素字体大小，若无父元素则使用基准字号

user-agent: 用户代理

4. font-weight: 文字粗细程度，可为预设值（normal、bold）或数字（400）

5. font-family: 文字类型（必须计算机中具有的字体才能有效）
   可使用多个字体，匹配不同环境
   sans-serif：非衬线字体

font-family: consolas, 微软雅黑, Arial;

6. font-style: 字体样式，italic（倾斜）

7. text-decoration: 文本修饰，加线 line-through overline underline none

8. text-indent: 首行文本缩进

9. line-height： 行高
   （1）单行文本垂直居中
   （2）相对于当前元素的数字：设置为纯数字

10. width

11. height

12. letter-space： 文字间隙， em/px

13. text-align: 文字内部水平对齐方式 right/left/center

4. 选择器

作用：帮助精准选中想要的元素

简单选择器

1. 元素选择器 p {}
2. id选择器 #wrapper {}
3. 类选择器 .box {}
4. 通配符选择器 *{}
5. 属性选择器 [href] {}, [href="https://www.baidu.com"] {} [class~="box"]

~=  包含 a b c
^= 以...开头
$= 以...结尾
*= 值含有 abc

6. 伪类选择器：选中某些元素的某种状态

a:link{} 超链接未被访问过的状态
a:visited{} 超链接被访问过后的状态
a:hover{} 鼠标悬停
a:active{} 激活状态，鼠标按下

7. 伪元素选择器：生产并选中某个元素内部的第一个子元素或最后一个子元素

p::before{}
p::after{}

选择器组合

1. 并且 无空隙 p.red{}
2. 后代元素 空格 div p{}
3. 子元素 > div > p {}
4. 后边相邻兄弟元素 .box + li{}
5. 后边所有的兄弟元素 .box ~ li{}

选择器的并列

多个选择器，用逗号分隔

.wrapper .box, .wrapper p{}

5. 层叠

声明冲突：同一个样式，多次应用到同一个元素（一个元素同一个属性多次赋值的情况）
层叠（权重计算）： 解决冲突的过程，浏览器自动处理

（1）比较重要性

重要性从高到低
1）作者样式表中的!important样式（不建议使用）
2）作者样式表中的普通样式
3）浏览器默认样式表

（2） 比较特殊性

看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个四位数（xxxx）

• 千位：内联样式，记1，否则为0
• 百位：等于所有选择器中id选择器的数量
• 十位：等于选择器中所有类选择器，属性选择器，伪类选择器的数量
• 个位： 等于选择器中所有元素选择器，伪类选择器的数量

这里的四位数是逢256进1

（3） 比较源次性

代码书写靠后胜出

应用

• 重置样式表： 书写一些作者样式，覆盖浏览器的默认样式
  常见的重置样式表：meyer.css、reset.css

• link > visited > hover > active