理解CSS（上）- 了解CSS

理解CSS（上）- 了解CSS

1、什么是 CSS

• Cascading Style Sheets（层叠样式表）
• 用来定义页面元素的样式
  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

h1 {
    color: blue;
    font-size: 12px;
}

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明：

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性都有一个值。属性和值被冒号分开。

2、在页面中使用 CSS

1. 内联：直接在标签内部引入

   <div style="width: 65px;height: 20px;>内联CSS</div>
   

   • 优点：便捷、高效
   • 缺点：样式不可复用、不符合结构与样式分离

2. 嵌入：

   <style>
   	div {
   		width: 65px;
   		height: 20px;
   	}
   </style>
   

   • 优点：适合单页面网页应用
   • 缺点：代码复用不方便

3. 外链：

   <link rel="stylesheet" href="/assets/style.css">
   

   • 优点：可维护性好、可重复使用

3、CSS 是如何工作的

1. 首先，浏览器先加载 HTML 文件。
2. 然后再将 HTML 文件解析成一个 DOM 树。
3. 接下来，浏览器拉取 CSS 样式。
4. 浏览器拉取到 CSS 样式，开始解析，给对应的 DOM 节点添加样式（渲染 DOM 树）。
5. 最后，网页展示出来（着色）。

4、选择器 Selector

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

4.1 通配选择器

* {
    color: blue;
    font-size: 20px;
}

4.2 标签选择器

h1 {
    color: orange;
    font-size: 20px;
}

4.3 ID 选择器

#app {
    font-size: 60px;
    font-weight: 700;
}

4.4 类选择器

.box {
    color: gray;
    font-weight: 700;
}

4.5 属性选择器

input[type="password"] {
    border-color: red;
    color: red;
}
/*以 # 开头*/
a[href^="#"] {
    color: #f54767;
    padding-left: 1.1em;
}
/*以 .jpg 结尾*/
a[herf$=".jpg"] {
    color: deepskyblue;
    padding-left: 1.2em;
}

5、伪类（pseudo-classes）

不基于标签和属性定位元素

5.1 状态伪类

/*正常，未访问过的链接*/
a:link {
    color: black;
}
/*用户已访问过的链接*/
a:visited {
    color: gray;
}
/*当用户鼠标放在链接上时*/
a:hover {
    color: orange;
}
/*链接被点击那一刻*/
a:active {
    color: red;
}
/*选择元素输入后具有焦点*/
input:focus {
    outline: 2px solid orange;
}

5.2 结构性伪类

li:first-child {
    color: coral;
}
li:last-child {
    border-bottom: none;
}

6、组合（Combinators）

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A > B	选中B，如果它是A的子元素	section > p
兄弟选择器	A ~ B	选中B，如果它在A后面且和A同级	h2 ~ p
相邻选择器	A + B	选中B，如果它紧跟在A后面	h2 + p

7、选择器组

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
    margin: 0;
    padding: 0;
}
[type="checkbox"],[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

8、合法颜色值

8.1 十六进制颜色

• #RRGGBB
• RR（红色）、GG（绿色）、BB（蓝色）
• 所有值必须介于 0 到 FF 之间

p {
    background-color:#ff0000;
}

8.2 RGB 颜色

• RGB（红，绿，蓝）
• 每个参数定义颜色的亮度
• 值为 0-255 或 0%-100% 之间

p {
    background-color:rgb(255,0,0);
}

8.3 HSL 颜色

• IE9，Firefox，Chrome，Safari和Opear 10+ 支持HSL颜色值
• HSL（色调，饱和度，明度）
  • 色相 0-360（0红色，120绿色，240蓝色）
  • 饱和度 0%-100%（0%灰色，100%全彩）
  • 亮度 0%-100%（0%黑色，100%白色）

p {
    background-color:hsl(120,65%,75%);
}

8.4 alpha 透明度

#ff000078  rgba(255,0,0,0.47)  hsla(0,100%,50%,0.47)

9、字体

9.1 字体系列（font-family）

1. Serif：Serif字体中字符在行的末端拥有额外的装饰（Times New Roman、Georgia）
2. Sans-serif：”Sans“是指无，这些字体在末端没有额外的装饰（Arial、Verdana）
3. Monospace：所有等宽字符具有相同的宽度（Courier New、Lucida Console）

• font-family属性设置文本的字体系列
• 设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，它将尝试下一种字体
• 名称超过一个字，必须加引号

p {
    font-family: "Times New Roman", Times, serif;
}

9.2 字体大小（font-size）

• 关键字

  • small、medium、large

• 长度

  • px、em

• 百分比

  • 相对父元素字体大小

body {
    font-size: 100%;
}
h1 {
    font-size: 40px;
}
p {
    font-size: 0.875em;
}
div {
    font-size: 80%;
}

9.3 字体粗细（font-weight）

• 值 100-900 或normal、bold、bolder、lighter

• normal：400

• bold：700

• 注意：数字后面没有px

p {
    font-weight: normal;
}
p {
    font-weight: 900;
}

10、line-height 属性

值	描述
normal	默认
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距
length	设置固定的行间距
%	基于当前字体尺寸的百分比行间距
inherit	从父元素继承 line-height 属性的值

p {
    line-height: 90%;
}
div {
    line-height: 1.5;
}

11、white-space 属性

值	描述
normal	默认，空白会被浏览器忽略
pre	空白会被浏览器保留。类似 HTML 中的 <pre>标签
nowrap	文本不会换行，文本会在同一行上继续，直到遇到<br>标签
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承 white-space 属性的值

12、调试 CSS

• 右键点击页面，选择检查
• 使用快捷键
  • Ctrl+Shift+I（Windows）
  • Cmd+Opt+I（Mac）