带你了解CSS上篇

CSS 是什么

CSS：层叠样式表 (Cascading Style Sheets).
CSS 能够对网页中元素位置的排版进行像素级精确控制， 实现美化页面的效果， 并能够做到页面的样式和结 构分离，它类似于 “东方四大邪术” 之化妆术。
html 决定页面结构，css控制页面的展示效果。

CSS 的基本语法规范

选择器 + {一条/N条声明}

• 选择器决定针对谁修改 (找谁)
• 声明决定修改什么 (干什么)
• 声明的属性是键值对。使用 ; 区分键值对，使用 . 区分键和值.

示例代码：

运行效果：

注: CSS 要写到 style 标签中，而style 标签可以放到页面任意位置，不过一般放到 head 标签内。
CSS 使用 /* */ 作为注释(快捷键： ctrl + / )。

CSS 的引入方式

1.内部样式表

通过style标签嵌套，将CSS嵌套到html页面中，比如上面的代码就是这种方式。

优点： 这样做能够让样式和页面结构分离
缺点： 分离的还不够彻底，尤其是 css 内容多的时候

2.行内样式表

通过 style 属性, 来指定某个标签的样式，不过这种写法只适合于写简单样式，只针对某个标签生效。

缺点： 不能写太复杂的样式。

这种写法优先级较高, 即行内样式表优先级比内部样式表优先级高，会覆盖其他的样式。

示例代码:

运行结果：

3.外部样式

外部样式引入是实际开发中最常用的方式。

步骤: 1. 创建一个 css 文件； 2. 使用 link 标签引入 css。
优点: 样式和结构彻底分离了。
缺点: 受到浏览器缓存影响， 修改之后不一定立刻生效。

示例代码：
css代码

html代码

运行效果：

选择器

选择器的功能

选中页面中指定的标签元素。
要先选中元素，才能设置元素的属性，就好比策略类指挥游戏，比如海岛奇兵这类的, 需要先选中单位, 再指挥该单位行动。

CSS 选择器的种类

注：以下介绍的选择器只是CSS2标准下的常用选择器。
详细介绍CSS 选择器种类的网站链接: https://www.w3school.com.cn/cssref/css_selectors.asp

1. 基础选择器: 单个选择器构成的
   • 标签选择器
   • 类选择器
   • id 选择器
   • 通配符选择器
2. 复合选择器: 把多种基础选择器综合运用起来.
   • 后代选择器
   • 子选择器
   • 并集选择器
   • 伪类选择器