CSS学习笔记——选择器的使用

CSS的使用

1、 作用:美化与布局界面

2、 引用语法
A) 内部:在HTML页面内通过style标记设置,仅供当前页面内使用
B) 外部:单独定义一个样式表文件(以CSS作为后缀名)在HTML页面中用标记(href属性指定CSS文件路径,rel指定文件与页面的关系,或固定为stylesheet;或style标记添加@import指令引入,可以供多个页面使用)
C) 行内:在HTML页面内,通过style属性进行设置,仅供当前标签使用

3、 定义语法
A) 内部、外部:
选择器{
样式名称1:样式值;
样式名称2:样式值;
}
B) 行内:样式名称1:样式值;
C) 注释:/注释内容/

4、 基础选择器
A) 标签元素:以标签名作为选择依据
B) 类:以标签的class属性值作为选择依据,前面加点(.)
C) id:以标签id属性值作为选择依据,前面加(#)
D) 类和id的命名要求:不允许数字和标点符号开头,不允许中文,一般用有意义的英文单词;id在一个页面中是唯一的,一个标签可以有多个class值(写在一个class属性中,用空格分隔)

5、 选择器的优先级
A) 加载的顺序:标签 < 类< id < 行内;后加载的样式如果和之前加载的样式冲突,后加载的覆盖之前加载的。
B) 内部和外部:没有优先级的区别,先写的就先加载
C) important:优先级最高,使用时!important直接写在样式值后面

6、 扩展选择器
A) 复合:将标签选择器与类或id合在一起,必须都满足条件才能使用
B) 组合:通过逗号将多个相同样式规则的选择器组合在一起,只要满足其中一个即可
C) 嵌套:祖孙后代的关系使用空格,父子关系使用>,形如:
a b (找b,但b必须在a里面,不管级别)
a>b (找b,b不仅必须在a里面,还必须紧靠着a)
D) 超链接的伪类选择器:
a:link 普通的未被访问过的链接
a:visited 当a所链接的地址已经被访问过
a:hover 当鼠标移动到a标记上
a:active 当a标记获得焦点时
E) 伪元素选择器
1):first-letter:第一个字符
2):first-line:第一行
3):before:after:选择器所指定的标记内容的前面,后面,配合content属性增加内容(用于设置的新增文字)

发布了62 篇原创文章 · 获赞 42 · 访问量 3315

猜你喜欢

转载自blog.csdn.net/weixin_45375866/article/details/100944922