CSS简介
CSS概述
- CSS指层叠样式表（Cascading Style Sheets）
- 样式定义如何显示HTML元素，通常存储在样式表中，解决内容与表现分离的问题
- 外部样式表通常存储在CSS文件中，可以极大提高工作效率
- 多个样式定义可层叠为一
层叠次序
浏览器缺省设置 < 外部样式表 < 内部样式表（位于< head>标签内部）< 内联样式（在HTML元素标签内部）
CSS语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明
selector{declaration1;declaration2;...declarationN}
- 选择器通常是需要改变样式的HTML元素
- 每条声明由一个属性和一个值组成。属性（property）是样式属性。属性和值被冒号分开。
selector{property:value}
值的不同写法和单位
p{color:red}
十六进制的颜色值：p{color:#ff0000;}
CSS的缩写形式：p{color:#f00;}
RGB值：p{color:rgb(255,0,0);}
RGB百分比：p{color:rgb(100%,0%,0%)}即使当值为０时，百分比也不能省略。其他情况可以省略，如０＝０ｐｘ
引号
如果值为若干单词，则要给值加引号
p{font-family:"sans serif";}
多重声明
如果要定义不止一个声明，则需要用分号将每个声明分开
//习惯在最后一个声明也加上分号
p{text-align: center; color: red;}
CSS对大小写不敏感，但是如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的
CSS高级语法
选择器的分组
关键符号: ,
h1,h2,h3,h4,h5,h6{
color: green;
}
通配符选择器
定义: 显示为一个星号(*),该选择器可以与任何元素匹配,就像是一个通配符
//使文档中的每个元素都为红色
* {color: red;}
继承极其问题
根据CSS，子元素从父元素继承属性，但它并不总是按此方式工作。
body{
font-family: Verdana, sans-serif;
}
Netscape 4用户不支持继承，可以利用组选择器解决这个问题
p,td,ul,ol,li,dl,dt,dd{
font-family: verdana, sans-serif;
}
不希望被继承的元素
p{
font-family: Times, "Times New Roman", serif;
}
CSS派生选择器/后代选择器
定义：通过依据元素在其位置的上下文关系来定义样式.规则左边的选择器一端包括两个或多个用空格分隔的选择器
注意:两个元素之间的层次间隔可以是无限的
li strong{
font-style: italic;
font-weight: normal;
}
<p><strong>我是粗体字，不是斜体字，因为我不再列表当中，这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为strong元素位于li元素内</strong></li>
<li>我是正常的字体</li>
</ol>
CSS id 选择器
定义：可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。
注：id属性只能在每个HTML文档中出现一次
#red {color: red;}
#green {color: green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
老版本的Windows/IE浏览器可能会忽略这条规则,除非特别的定义这个选择器所属的元素
div#red {color: red;}
ID选择器与类选择器的区别
区别1:ID只能在文档中使用一次
区别2:不能使用ID词列表
id选择器和派生选择器
定义:id选择器常常用于建立派生选择器.
下例中id是sidebar的元素内的p,h2得到了特殊的处理
即使被标注为sidebar的元素只能在文档中出现一次,这个id选择器作为派生选择器也可以被使用很多次
#sidebar p {
font-style: italic;
text-align:right; }
#sidebar h2{
font-size:1em;}
CSS类选择器
类选择器以一个点号"."显示
.center {text-align: center}
或 *.center {text-align: center}
注:类名的第一个字符不能使用数字
<h1 class="center">
This heading wil be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
class被用作派生选择器
类名为fancy的更大元素内部的表格单元显示橙色文字
.fancy td{
color: #f60;}
元素基于它们的类而被选择:
类名为fancy的表格单元显示橙色文字
td.fancy {
color: #f60;}
<td class="fancy">
CSS多类选择器
定义:一个class值可能包含一个词列表,各个词之间用空格分隔.
//例如希望将一个特定的元素同时标记为important和warning,就可以写作:
<p class="important warning">
This paragraph is a very important warning.
</p>
//class为important的所有元素为粗体,class为warning的所有元素为斜体,class中同时包含important和warning的所有元素还有一个银色的背景
.important {font-weight:bold;}
.warning {font-style:italic;}
.import.warning {background:silver;}
CSS属性选择器
定义:对带有指定属性的HTML元素设置样式
注释：只有在规定了!DOCTYPE时,IE7和IE8才支持属性选择器.在IE6及更低的版本中,不支持属性选择.
[attribute]: 用于选取带有指定属性的元素
[attribute=value]: 用于选取带有指定属性和值的元素
[attribute~=value]：用于选取属性值中包含指定词汇的元素，以空格分隔
[attribute|=value]：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词，以连字符分隔
[attribute^=value]：匹配属性值以指定值开头的每个元素
[attribute$=value]：匹配属性值以指定值结尾的每个元素
[attribute*=value]：匹配属性值中包含指定值的每个元素
为带有title属性的所有元素设置样式
[title]
{
color: red;
}
<h2 title="Hello world">Hello world</h2>
//只对有href属性的锚(a元素)应用样式
a[href] {color:red}
//为了将同时有href和title属性的HTML超链接的文本设置为红色,
a[href][title] {color:red;}
属性和值选择器
为title="W3School"的所有元素设置样式:
[title=W3School]
{
border:5px solid bule
}
属性和值选择器- 多个值
<html>
<head>
<style type="text/css">
适用于由空格分隔的属性值
[title~=hello]
{
color: red;
}
适用于由连字符分隔的属性值
[lang |=en]
{
color: red;
}
</style>
</head>
<body>
空格分隔
<h2 title="hello world">hello world</h2>
<p title="student hello ">Hello W3School students!</p>
<hr />
连字符分隔
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
</body>
</html>
属性选择器在为不带有class或id的表单设置样式
input[type="text"]
{
background-color:yellow;
}
……
<input type="text" name="Name" value="bill">
CSS子元素选择器
定义:只能选择作为某元素子元素的元素
符号:大于号>
//选择只作为h1元素子元素的strong元素
h1 > strong {color
最低0.47元/天 解锁文章
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
