三剑客实战之Css入门基础知识一【语法基础之选择器】
12个月前 (05-31) / 104 次围观 / 0 次吐槽CSS 语法
CSS 规则集(rule-set)由选择器和声明块组成:
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
下例说明:
p 是 CSS 中的选择器(它指向要设置样式的 HTML 元素:<p>)。
color 是属性,red 是属性值
text-align 是属性,center 是属性值
如
p {
color: red;
text-align: center;
}
<!DOCTYPE html> <html> <head> <style> p { color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>这些段落是通过 CSS 设置样式的。</p> </body> </html>
在此例中,所有 <p> 元素都将居中对齐,并带有红色文本颜色:
CSS 选择器
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
我们将 CSS 选择器分为五大类:
1>简单选择器(根据名称、id、类来选取元素)
2>组合器选择器(根据它们之间的特定关系来选取元素)
3>伪类选择器(根据特定状态选取元素)
4>伪元素选择器(选取元素的一部分并设置其样式)
5>属性选择器(根据属性或属性值来选取元素)
CSS 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
如:
p {
text-align: center;
color: red;
}
<!DOCTYPE html> <html> <head> <style> p { text-align: center; color: red; } </style> </head> <body> <p>每个段落都会受到样式的影响。</p> <p id="para1">我也是!</p> <p>还有我!</p> </body> </html>
此上代码页所有的 <p> 元素都将居中对齐,并带有红色文本颜色
CSS id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。
元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!
如:
#para1 {
text-align: center;
color: red;
}
<!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>本段不受样式的影响。</p> </body> </html>
此上代码中 CSS 规则将应用于 id="para1" 的 HTML 元素
id 名称不能以数字开头。
CSS 类选择器
如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。
类选择器选择有特定 class 属性的 HTML 元素。
如:
.center {
text-align: center;
color: red;
}
<!DOCTYPE html> <html> <head> <style> .center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">居中的红色标题</h1> <p class="center">居中的红色段落。</p> </body> </html>
上面代码中,所有带有 class="center" 的 HTML 元素将为红色且居中对齐
可以指定只有特定的 HTML 元素会受类的影响
下面例子中,只有具有 class="center" 的 <p> 元素会居中对齐“
如:
p.center {
text-align: center;
color: red;
}
<!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">这个标题不受影响</h1> <p class="center">这个段落将是红色并居中对齐的。</p> </body> </html>
HTML 元素也可以引用多个类,下面例子中,<p> 元素将根据 class="center" 和 class="large" 进行样式设置:
如:
<p class="center large">这个段落引用两个类。</p>
<!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: red; } p.large { font-size: 300%; } </style> </head> <body> <h1 class="center">这个标题不受影响</h1> <p class="center">本段将是红色并居中对齐。</p> <p class="center large">本段将是红色、居中对齐,并使用大字体。</p> </body> </html>
注意:类名也不能够数字开头!
CSS 通用选择器
通用选择器(*)选择页面上的所有的 HTML 元素。
下面的 CSS 规则会影响页面上的每个 HTML 元素,
如:
* {
text-align: center;
color: blue;
}
<!DOCTYPE html> <html> <head> <style> * { text-align: center; color: blue; } </style> </head> <body> <h1>Hello world!</h1> <p>页面上的每个元素都会受到样式的影响。</p> <p id="para1">我也是!</p> <p>还有我!</p> </body> </html>
CSS 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
最好对选择器进行分组,以最大程度地缩减代码。
如需对选择器进行分组,请用逗号来分隔每个选择器
请看下面的 CSS 代码(h1、h2 和 p 元素具有相同的样式定义):
如:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
下面例子中,我们对上述代码中的选择器进行分组:
<!DOCTYPE html> <html> <head> <style> h1, h2, p { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>更小的标题</h2> <p>这是一个段落。</p> </body> </html>
所有简单的 CSS 选择器
选择器 | 例子 | 例子描述 |
---|---|---|
.class | .intro | 选取所有 class="intro" 的元素。 |
#id | #firstname | 选取 id="firstname" 的那个元素。 |
* | * | 选取所有元素。 |
element | p | 选取所有 <p> 元素。 |
element,element,.. | div, p | 选取所有 <div> 元素和所有 <p> 元素。 |
演示说明:
<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; /*背景为浅蓝色*/ } h1 { color: white; /*标题字为白色*/ text-align: center; /*标题居中显示*/ font-size: 30px; /*标题字体大小*/ } p { color: red; /*段落字体为红色*/ text-align: life; /*对齐方式为左*/ font-size: 20px; /*段落字体大小*/ } </style> </head> <body> <h1>Hello World!<br/>我的一个 CSS 实例,这是一个标题</h1> <p>这些段落是通过 CSS 设置样式的。</p> </body> </html>
相關 软件应用
Url : 【 http://uuucd.cn/software/1823.html 】
额~ 本文暂时没人评论 来添加一个吧 …
发表评论