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

一、理解CSS

【什么是CSS】

CSS可以美化HTML，让页面更好看，让布局更简单

语法规范

在页面中使用CSS的方法

外链：把CSS的定义放在一个单独的文件里，用link标签引入到页面里
嵌入：把样式的代码嵌入到标签里面
内链：把样式直接写在这个标签的style属性中

CSS的工作流程

选择器 Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置

通配选择器

在CSS中，通配符选择器使用“*”定义，表示选取页面中的所有元素（标签）

语法：
* {
    属性1：属性值1；
    ...
 }   
 
通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况使用，即清除所有元素标签的内外边距
* {
    margin: 0;
    padding: 0;
 }

标签选择器

语法：
标签名{
    属性1：属性值1；
    属性2：属性值2；
    属性3：属性值3；
    ...
}

id选择器

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
注意：id属性只能在每个HTML文档中出现一次

语法：
#id名{
    属性1：属性值1；
    ...
 }   
 
例如，将id为nav元素中的内容设为红色
#nav {
    color:red;
 }

类选择器

语法：
.类名{
    属性1：属性值1；
    ...
}

例如，将所有拥有red类的HTML元素均设为红色
.red {
    color:red;
 }
 类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号表示。

属性选择器

a[href^="#"]——以href为属性的值以#开头则会被匹配上
a[href$=".jpg"]——以href为属性的值以$结尾则会被匹配上

基础选择器总结

伪类 pseudo-classes

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

状态伪类

a:link ——当前状态
a:visited ——访问过的状态
a:hover ——光标经过的状态
a:active ——鼠标按下后的状态
:focus ——聚焦到输入框或链接的状态

结构性伪类

注意：first-child 和 last-child 的用法

选择器的组合方式

选择器组

文本样式

颜色

H：红黄蓝哪种颜色
S：鲜艳程度（灰或鲜艳）
L：暗色或亮色

alpha 透明度
例：
#ff000078
rgba(255,0,0,0.47)
hsla(0,100%,50%,0.47)

字体 font-family

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)

字体系列

CSS使用 font-family 属性定义文本的字体系列

p ( font-family:"微软雅黑”；}
div (font-family:Arial,"Microsoft Yahei"，“微软雅黑”；}

尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body(font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';)

通用字体族

使用Web Fonts

字体大小 font-size

关键字
- small、medium、large
长度
- px、em
百分数
- 相对于父元素字体大小

P {
    font-size: 20px;
}

谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给body指定整个页面文字的大小

字体样式 font-style

p {
    font-style: normal;
}

注意：平时我们很少给文字加斜体，反而要给斜体标签（em,i）改为不倾斜字体

字体粗细 font-weight

p {
    font-weight: bold;
}

字体复合属性

作用：节约代码

body {
    font: font-style font-weight font-size/line-height font-family;
}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用

字体属性总结

line-height

white-space

normal —— 展示一个空格，合并多个空格
nowrap —— 强制不换行
pre —— 保留所有内容
pre-wrap —— 保留换行，且一行显示不下时自动再换行，保留所有空格
pre-line —— 保留换行，合并多个空格

调试 CSS

右键点击页面，选择「检查」
使用快捷键
- Ctrl+Shift+I (Windows)
- Cmd+Opt+I (Mac)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

了解CSS|青训营笔记