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
- 基础选择器: 单个选择器构成的
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
- 复合选择器: 把多种基础选择器综合运用起来.
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器