【前端】CSS

一、CSS基本语法
- 1.1 语法
- 1.2 CSS引入方式
- - 1.2.1 内部样式表：
  - 1.2.2 行内样式表
  - 1.2.3 外部样式
  - 1.3 代码书写格式
  - 二、选择器
  - - 2.1 基础选择器
    - - 2.1.1 标签选择器
      - 2.1.2 类选择器
      - 2.1.3 id 选择器
      - 2.1.4 通配符选择器
      - 2.2 复合选择器
      - 2.2.1 后代选择器
        2.2.2 子选择器
        2.2.3 并集选择器
        2.3.4 伪类选择器
        三、常用元素属性
        3.1 字体属性
        3.1.1 设置字体 font-family
        3.1.2 字体大小 font-size
        3.1.3 字体粗细 font-weight
        3.1.4 文字样式 font-style
        3.2 文本属性
        3.2.1 文本颜色 color
        3.2.2 文本对齐 text-align
        3.2.3 文本装饰 text-decoration
        3.2.4 文本缩进 text-indent
        3.2.5 行高 line-height
        四、元素的显示模式
        4.1 块级元素
        4.2 行内元素/内联元素
        
        一、CSS基本语法
        
        css：层叠样式表 (Cascading Style Sheets)。CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。
        
        1.1 语法
        
        选择器 + {一条/N条声明}
        
        选择器决定针对谁修改。 (找谁)
        声明决定修改啥。(干啥)
        声明的属性是键值对。
        
        格式：
        
        标签名{ CSS语句 }
        
        注意事项：
        
        CSS 要写到 style 标签中(也有其他写法)
        style 标签可以放到页面任意位置. 一般放到 head 标签内.
        CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换)。
        
        1.2 CSS引入方式
        
        1.2.1 内部样式表：
        
        写在 style 标签中。嵌入到 html 内部。一般是放到 head 标签中。
        
        Document
        hello
        
        优缺点：
        
        优点: 这样做能够让样式和页面结构分离。
        缺点: 分离的还不够彻底。尤其是 css 内容多的时候。
        
        1.2.2 行内样式表
        
        通过 style 属性, 来指定某个标签的样式。
        只适合于写简单样式。只针对某个标签生效。
        
        hello
        
        优缺点：
        
        缺点: 不能写太复杂的样式.
        优点：这种写法优先级较高, 会覆盖其他的样式.
        
        1.2.3 外部样式
        
        这种最常用。
        创建一个 css 文件。
        使用 link 标签引入 css。
        
        例子:
        
        HTML文件： Document
        hello
        CSS文件： div { color: red; }
        
        优缺点：
        
        优点: 样式和结构彻底分离了。
        缺点: 受到浏览器缓存影响, 修改之后不一定立刻生效。
        
        1.3 代码书写格式
        
        样式格式：
        
        p { color: red; font-size: 30px; }
        
        样式大小写：采用小写字母。
        空格规范：
        冒号后面带空格；
        选择器和 { 之间也有一个空格。
        
        二、选择器
        
        选择器的种类：
        
        基础选择器: 单个选择器构成的
        
        标签选择器
        
        类选择器
        
        id 选择器
        
        通配符选择器
        复合选择器: 把多种基础选择器综合运用起来.
        
        后代选择器
        
        子选择器
        
        并集选择器
        
        伪类选择器
        2.1 基础选择器
        
        2.1.1 标签选择器
        
        标签选择器：
        
        能快速为同一类型的标签都选择出来.
        但是不能差异化选择
        Document
        p1
        
        p2
        
        p3
        
        p4
        
        p5
        
        hello1
        
        hello2
        
        hello3
        
        hello4
        
        2.1.2 类选择器
        
        类选择器
        
        差异化表示不同的标签
        可以让多个标签的都使用同一个标签.
        语法细节：
        
        类名用 . 开头的
        下方的标签使用 class 属性来调用.
        一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
        如果是长的类名, 可以使用 - 分割.
        不要使用纯数字, 或者中文, 以及标签名来命名类名。
        Document
        p1
        
        p2
        
        p3
        
        p4
        
        p5
        
        hello1
        
        hello2
        
        hello3
        
        hello4
        
        2.1.3 id 选择器
        
        id 选择器：
        和类选择器类似.
        
        CSS 中使用 # 开头表示 id 选择器
        id 选择器的值和 html 中某个元素的 id 值相同
        html 的元素 id 不必带 #
        id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)
        Document
        p1
        
        p2
        
        p3
        
        p4
        
        p5
        
        hello1
        
        hello2
        
        hello3
        
        hello4
        
        2.1.4 通配符选择器
        
        通配符选择器：
        使用 * 的定义, 选取所有的标签.
        
        Document
        p1
        
        p2
        
        p3
        
        p4
        
        p5
        
        hello1
        
        hello2
        
        hello3
        
        hello4
        
        2.2 复合选择器
        
        2.2.1 后代选择器
        
        后代选择器 :
        又叫包含选择器. 选择某个父元素中的某个子元素.
        
        格式：
        
        元素1 元素2 {样式声明}
        
        元素 1 和元素 2 要使用空格分割
        元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
        Document
        
        aaa
        
        bbb
        
        ccc
        
        ddd
        
        eee
        
        fff
        
        2.2.2 子选择器
        
        子选择器：
        与后代选择器类似，但是只能选择子标签。
        
        格式：
        
        元素1>元素2 {样式声明}
        
        使用大于号分割
        只选亲儿子，不选孙子元素
        Document
        小猫
        
        小狗
        
        小狗
        
        2.2.3 并集选择器
        
        用于选择多组标签. (集体声明)
        
        格式：
        
        元素1, 元素2 { 样式声明 }
        
        通过逗号分割等多个元素.
        表示同时选中元素 1 和元素 2
        任何基础选择器都可以使用并集选择器.
        并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
        2.3.4 伪类选择器
        
        链接伪类选择器
        
        a:link 选择未被访问过的链接
        a:visited 选择已经被访问过的链接
        a:hover 选择鼠标指针悬停上的链接
        a:active 选择活动链接(鼠标按下了但是未弹起)
        
        :force 伪类选择器
        
        选取获取焦点的 input 表单元素.
        
        三、常用元素属性
        
        参考文档：文档
        
        3.1 字体属性
        
        3.1.1 设置字体 font-family
        
        字体名称可以用中文, 但是不建议.
        多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
        如果字体名有空格, 使用引号包裹.
        建议使用常见字体, 否则兼容性不好.
        
        body { font-family: '微软雅黑'; font-family: 'Microsoft YaHei'; }
        
        3.1.2 字体大小 font-size
        
        不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
        可以给 body 标签使用 font-size
        要注意单位 px 不要忘记.
        标题标签需要单独指定大小
        
        p { font-size: 20px; }
        
        3.1.3 字体粗细 font-weight
        
        可以使用数字表示粗细.
        700 == bold, 400 是不变粗, == normal
        取值范围是 100 -> 900
        
        p { font-weight: bold; font-weight: 700; }
        
        3.1.4 文字样式 font-style
        
        /* 设置倾斜 */ font-style: italic; /* 取消倾斜 */ font-style: normal;
        
        3.2 文本属性
        
        3.2.1 文本颜色 color
        
        RGB：我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.
        
        计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.
        
        color 属性值的写法:
        
        预定义的颜色值(直接是单词)[最常用]
        十六进制形式
        RGB 方式
        
        3.2.2 文本对齐 text-align
        
        center: 居中对齐
        left: 左对齐
        right: 右对齐
        
        3.2.3 文本装饰 text-decoration
        
        underline 下划线. [常用]
        none 啥都没有. 可以给 a 标签去掉下划线.
        overline 上划线. [不常用]
        line-through 删除线 [不常用]
        
        3.2.4 文本缩进 text-indent
        
        单位可以使用 px 或者 em.
        使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
        缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
        
        3.2.5 行高 line-height
        
        行高: 指的是上下文本行之间的基线距离. 行高 = 上边距 + 下边距 + 字体大小
        
        四、元素的显示模式
        
        4.1 块级元素
        
        h1 - h6 p d iv ul ol li
        
        特点：
        
        独占一行
        高度, 宽度, 内外边距, 行高都可以控制.
        宽度默认是父级元素宽度的 100% (和父元素一样宽)
        是一个容器(盒子), 里面可以放行内和块级元素.
        
        4.2 行内元素/内联元素
        
        a strong b em i del s ins u span
        
        特点：
        
        不独占一行, 一行可以显示多个
        设置高度, 宽度, 行高无效
        左右外边距有效(上下无效). 内边距有效.
        默认宽度就是本身的内容
        行内元素只能容纳文本和其他行内元素, 不能放块级元素