CSS样式层叠表
- 1.CSS 概述
- 2.属性选择器
- 2.1属性选择器
- 2.2属性和值选择器
- 2.3属性和值的选择器 - 多值
- 3.类和ID选择器
- 3.1ID选择器
- 3.2类选择器
- 3.3为特定元素使用class
1.CSS 概述
CSS是一种标记语言,Cascading Style Sheets,用于为HTML文档定义布局。
CSS改变样式需要明确:改变谁,改什么,怎么改。
告诉CSS改变谁就需要用到选择器,如ID选择器是通过ID来选择标签,然后告诉CSS改变这个标签的什么属性,最后指定这个属性的属性值。
2.属性选择器
通过属性来选择标签,这些属性既可以是标准属性(如input标签中的type属性),也可以是自定义属性。
2.1属性选择器
下面的例子是把包含标题(title)的所有元素变为蓝色:
[title] {
color:blue;
}
2.2属性和值选择器
下面的实例改变了标题title='runoob’元素的边框样式:
[title=runoob] {
border:5px solid green;
}
2.3属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子,使用(~)分隔属性和值:
只要属性的值里面包含hello这个值就生效。
[title~=hello] {
color:blue;
}
exp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
[title~=hello]
{
color:blue;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>
输出:
测试
将适用:
Hello world
Hello CSS students!
将不适用:
Hi CSS students!
3.类和ID选择器
3.1ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:
#para1 {
text-align:center;
color:red;
}
注:HTML页面中的ID都必须唯一,所以一个ID选择器只能生效一次。
ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
3.2类选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
.center {
text-align:center;
}
exp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
输出:
菜鸟教程(runoob.com)
标题居中
段落居中。
3.3为特定元素使用class
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
p.center {
text-align:center;
}
exp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>
输出:
菜鸟教程(runoob.com)
这个标题不受影响
这个段落居中对齐。
markdown对HTML支持不太友好哈。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)