1.操作样式表
(1)html
中引入css
的三种方式:外部样式表
、嵌入式样式表
和内联样式表
。首选外部样式表,引入的方式为<link rel="stylesheet" href="base.css" />
,可以使用多个link
标签,引入多个样式表。浏览器将其保存到了缓存中,只需一次加载。
(2)当且仅当style
元素出现在link
元素后面时,嵌入式样式表的样式才会覆盖外部样式表。
(3)内联样式的优先级高于其他所有样式。除非其他样式有!important
。
(4)使用了@import
时,若引入的样式之后有与之冲突的样式时,则后出现的样式会覆盖这些引入的样式。
(5)可设置一个只用于特定输出的样式表,如只用于打印media="print"
,只用于在浏览器查看屏幕的media="screen"
。在html
文件中定义与媒体相关的样式表时,写为@media print {}
2.选择器的定义
(1)定义选择器的5个标准
- 元素的类型和名称
- 元素所在的上下文
- 元素的类或ID
- 元素的伪类或伪类
- 元素是否有某些元素
为指出目标元素,可将上述标准任意组合。
(2)选择器的选择元素的常用方法
-
a[title]{...}
指的是所有具有title
属性的a
元素。尽量避免使用ID
选择器. -
.architect p{}
表示这个选择器会寻找任何作为architect
类元素后代(无论是第几代)的所有p
元素,空格必不可少。 -
.architect > p
,按父元素选择要格式化的子元素,这个选择器仅选择architect
类元素的子元素的p
元素。 -
architect p+p
,+
是相邻同胞结合符只选择直接跟在同胞p
元素之后的元素。h1~h2
,~
是普通同胞结合符,会让任何属于同一父元素的同胞h1
后面的h2
元素显示指定的样式。 -
li:first-child{}
选择父元素的地第一个子元素的li
元素,借用:first-child
和last-child
伪类,选择第一个或最后一个子元素。伪类选择的是作为第一个或最后一个子元素的元素。 -
p:first-letter
只选择每个p
元素的每一个字母。:first-line
只选择第一行,这里的“第一行”指的是浏览器中的第一行,html
文件中是看不出来的。只有某些特定的CSS属性能使用:first-letter
伪元素,如font
、color
、background
、text-decoration
、vertical-align
、text-transform
、line-height
、margin
、padding
、border
、float
和clear
。伪元素:::first-line
、::first-letter
、::before
和::after
。伪类::first-child
、:link
等。 -
a:link
、a:visited
、a:focus
、a:hover
和a:active
使用伪类的方法按链接的状态来选择链接元素,a:link
设置从未被激活或指向,a:visited
设置以激活过的链接,a:focus
通过键盘如Tab
键获得焦点的链接外观,a:hover
设置光标指向链接时的外观,a:active
设置激活过的外观。也可对其他类型的元素使用active
和hover
伪类。链接设置时按LVFHA顺序。 -
按属性选择属性值:
选择器 属性值 [attribute] 匹配指定属性,不论值是什么 [attribute=“value”] 完全匹配指定属性值 [attribute~=“value”] 属性值是以空格分隔的多个单词,需有一个完全匹配 [attribute|=“value”] 属性值以value-开头 [attribute^=“value”] 属性值以value开头,value为完整的单词或单词的一部分 [attribute$=“value”] 属性值以value结尾,value为完整的单词或单词的一部分 [attribute*=“value”] 属性值包含指定值的子字符串 (3)指定元素组,
h1,h2{}
中间以逗号隔开,有时候可能需要组合使用选择器。