CSS注释语法:
<style>
/*注释*/
style>
规则实际就是一条完整的CSS指令,声明了要修改的元素和要应用给该元素的样式
比如以下规则把文本设成红色
p {color:red;}
为文档添加样式的三种方法
1、行内样式
blabla
行内样式只影响它所在的标签,会覆盖嵌入样式与链接样式
2、嵌入样式
<head> <style> h1 {font-size:12px;} p {color:red;} style> head>
作用范围为当前页面,覆盖外部样式表
3、链接样式
<link href="style.css" rel="stylesheet" type="text/css" />
4、在样式表中引入其他样式表采用以下方法
@import url(css/style.css)
需要在所有样式之前才会被加载
CSS命名规则
基本结构如上图。扩展规则如下:
p {color:red; font-size:12px; font-weight:bold;}
h1 h2 h3 {color:blue; font-size:12px;}
h3 {color:red;}
h3 {font-size:12px;}
选择符包含三种:上下文选择符、ID和类选择符、属性选择符
解决基于位置变换某个标签的样式的问题
格式:
标签1 标签2 {声明}
标签2是选择的目标,标签1是标签2的祖先元素
严格来说,上下文选择符为后代组合式选择符
本节所用代码:
<hmtl>
<head>
<meta charset="utf-8">
<title>上下文选择符title>
head>
<body>
<article>
<h1>一级标题 <em>我歪了em> opsh1>
<p>段落1blabla <em>我也歪了em> oopsp>
article>
<aside>
<p>段落2blabla <em>又双叒叕歪了em> 打破复读p>
aside>
body>
hmtl>
摘自MDN:
font-weight
CSS 属性指定了字体的粗细程度。 一些字体只提供 normal
和 bold
两种值。
不同写法的上下文选择符的作用:
article p {font-size:bold;}/*值用article的子元素中的p才会应用该规则*/
em {color:green;}/*本页面所有的em元素内容都会被渲染为绿色*/
/*支持多级选择*/
article p em {color:green;}/*选中的em必须有一个祖先是p,并且还要有一个祖先article*/
上文所述的上下文选择符是以某个祖先标签作为上下文,有时候可能需要更为具体的上下文,这就需要使用特殊的上下文选择符。
标签1 > 标签2 标签1必须是标签2的父元素。
本节所用代码
<section>
<h2>An H2 Headingh2>
<p>This is paragraph 1p>
<p>Paragraph2 has <a href="#">a link a> in it.p>
<a href="#">Linka>
section>
section > h2 {font-style:italic;}
font-style
CSS 属性允许你选择 font-family
字体下的 italic
或 oblique
样式。
italic:斜体
标签1+标签2
标签2必须紧跟在其同胞标签1的后面
h2+p {font-variant:small-caps;}
font-variant 属性是font-variant-caps
, font-variant-numeric
, font-variant-alternates
, font-variant-ligatures
, font-variant-east-asian
(en-US)等属性的简写。你也可以使用简写 font
设定font-variant
在CSS Level 2 (Revision 1)中的值(即normal
或 small-caps
)
标签1~标签2
h2~a {color:red;}
*
它匹配任何元素
* {color:green;}
color属性设置的是前景色,即影响文本也影响边框(变宽后面会讲解),由于大多数时间边框都是隐藏的,因此color常用来设置文本颜色。
p * {color:green}
把p中的所有内容渲染为绿色
section * a {color:green}
section的孙子元素(非子元素)中的a标签内容会被渲染为绿色。
选择元素的另一个手段,通过它们,可以不考虑文档的层次结构而选择元素。
可以给id和class属性设定任何值,只要不以数字或特殊符号开头就好
类属性就是HTML元素的class属性
示例用法:
<h1 class="specialtext">
This is a heading with the <span> same classspan>
as the second paragraph.
h1>
<p>
This tag has no class.
p>
<p class="specialtext">
blabla <span>wula!span>.
p>
标签被用来组合文档中的行内元素。如果不应用样式,则在浏览器中不会有视觉上的差异
1.类选择符
.类名
.specialtext {fontstyle:italic;}
注意,span标签会继承h1的样式。
2.标签带类选择符
p.specialtext {color:red};
p.specialtext span {color:blue;}
3.多类选择符
可以给元素添加多个类
<p class="specialtext featured">
Here the span tag <span>may or may nit styled.span>
p>
即HTML的class属性可以有多个空格分隔的值
选择同时存在这两个类名的元素:
.specaltext.featured {font-size:%120;}
没有空格,有空格就变成上下文选择符了
ID与类的写法类似,其选择符为**#**
示例:
<p id="specialtext">
This is the special text.
p>
#specialtext {CSS样式声明}
p#specialtext {CSS样式声明}
此外,ID还可以用于页内导航
<a href="#id">Biographya>
<a href="#">返回顶部a>
注意同一页面内的ID值不能相同
ID与class应当分别用于不同的场景
1.什么时候使用ID
ID的用途是在页面中唯一的标识一个元素,因此,同一页面中的每一个ID的属性都必须是一个独一无二的值,此外,也可以使用ID把JS和某个标签关联起来。
ID表示的是页面中唯一的一个HTML元素,可以结合上下文选择符来进行使用。
2.什么时候使用类
类的目的是为了标识一组具有相同特征的元素。
基于HTML标签的属性来选择元素
标签名[属性名]
img[title] {border:2px solid blue;}
选中带title属性的img标签
img的title属性用于说明,鼠标悬停在图片上会显示title的值
标签名[属性名="属性值"]
img[title="red flower"] {border:4px solid green;}
分为两种:
UI伪类 在HTML元素处于某个状态时为该元素应用CSS样式
结构化伪类 在标记中存在某种结构上的关系时为相应元素应用CSS样式
最常使用UI伪类的元素时链接标签a,可以在用户鼠标悬停时改变文本颜色等
1.链接伪类
针对链接的伪类共四个,对应链接的四种状态。
链接的四种状态:
对应的伪类选择符:
a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
//不显示下划线
a:active {color:red;}
<hmtl>
<head>
<meta charset="utf-8">
<title>示例模板title>
<style>
a:link {color:blue;}
a:visited {color:green;}
a:hover {text-decoration:none;}
a:active {color:red;}
style>
head>
<body>
<a href="#">链接a>
body>
hmtl>
由于此四个伪类的特指度不同,因此顺序不可更改
一个*表示伪类,两个代表CSS3新增伪元素
2. :focus伪类
e:focus
e表示元素,如p、h1等
input:focus {border:1px solid blue;}
在光标位于input字段的时候,为该字段添加一个蓝色边框。
3. :target伪类
e:target
如果用户点击一个指向页面中其他元素的链接,那么这个元素就是target
#more_info:target {black:green;}
more_info作为目标时,渲染为绿色
根据标记的结构应用样式
1. :first-child :last-child
e:first-child
e:last-child
字面意思,第一个孩子,最后一个孩子
2. :nth-child
e:nth-child(n)
第n个孩子
文档中若有实无的元素
1. ::first-letter
e::first-letter
p::first-letter {font-size:%300;}
内容的首字母
2. ::first-line
e::first-line
首行
3. ::before ::after
e::before
e::after
在特定元素前面或后面添加特殊内容
<p class="age">25p>
p.age::before {content:"Age: "}
p.age::after {content:" years old."}
Age: 25 years old.
搜索引擎不会检测伪元素
CSS属性是会集成的,以后细说
层叠样式表中的层叠,是一种样式在文档层次中逐层叠加的过程,目的是让浏览器面对某个标签特定属性值得多个来源时,确定应该使用哪一个。
层叠是CSS得核心机制。
样式表、嵌入、行内。
层叠得顺序:
行内样式最后重叠,在最上层进行显示。
浏览器依次检查5个来源,设定匹配属性。使用!important
来加重权重
p {color:green !important;}
每个选择符按如下公式计算:
I–C--E
最后得到一个三位数,比较即可
总结: