CSS资料整理
一、CSS概述
- CSS 指层叠样式表 (Cascading Style Sheets)。
- 样式主要定义 HTML 元素的外观和布局方式。
- 样式通常存储在样式表中,定义为CSS文件。
- CSS文件的后缀名为:
.css
二、CSS语法
CSS 语法规则由两部分构成:选择器,一条或多条声明语句。
- 选择器是需要改变的 HTML 元素样式。
- 声明语句由一个属性和属性值组成,属性和属性值用
:
分开。 - 声明语句是以分号
;
结束,声明总以大括号{}
括起来: - 属性是您希望设置的样式属性。
- 属性值是为属性所设置的样式效果。
- 通常情况,为增加CSS可读性,一般每行只描述一个属性。
p {color:green;text-align:center;}
p{
color:green;
text-align:center;
}
注释是用来解释你的代码,并且可以随意编辑它,浏览器忽略。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:
/*这是个注释*/
p
{
/*这也是一个注释*/
color:black;
text-align:center;
}
三、CSS选择器分类
CSS中的选择器很多,比如:标签选择器,ID选择器,类选择器,组选择器,伪类选择器等等,接下来主要介绍常用的几个:
1.标签选择器
标签选择器
可以为同一种 HTML 元素指定特定的样式。- 语法:
标签名{ 属性:属性值; }
p {
font-size: 15px;
}
//针对所有P段落标签设置样式
2.ID选择器
id 选择器
可以为标有特定 id 的 HTML 元素指定特定的样式。- HTML元素以id属性来设置
id="xxx"
,CSS 中 id 选择器以"#"
来定义。 - 注意:id 属性的值只能在每个 HTML 文档中出现一次,
保持唯一性
。
//以下的CSS样式设置:
#a {color:red;}
#b {color:green;}
//下面的 HTML 代码中:
<p id="a">这个段落是红色。</p>
<p id="b">这个段落是绿色。</p>
3.class类选择器
class 选择器
可以为标有特定一类元素设置属性样式。- HTML元素以class属性来设置
class="xxx"
, CSS 中类选择器以"."
来定义。 - 注意:class 选择器有别于id选择器,class可以在
多个元素中使用
。
//以下的CSS样式设置:
.center {text-align: center}
//下面的 HTML 代码中:让class属性值为center的元素内容居中显示
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>
//以下的CSS样式设置:
p.center {text-align:center;}
//下面的 HTML 代码中:让class属性值为center的<p>元素内容居中显示
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>
4.分组选择器
- 为了尽量减少代码,使用分组选择器。
- 每个选择器用
","
分隔。
h1,h2,h3,h4,h5,h6,#abc
{
color:red;
}
//为所有h1-h6标题标签和id="abc"的标签颜色设置为红色。
5.通配符选择器
- 语法格式,
语法:*{}
。
*{
font-size:16px
}
//将整个页面字体大小设为16px。
6.属性选择器
- 为具有特定属性的HTML元素设置样式。
- 选择器使用
"[属性]"
。 - 注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。
[title]//包含标题(title)的所有元素变为蓝色
{
color:blue;
}
[title=abc]//包含标题title='runoob'的所有元素变为蓝色
{
color:blue;
}
7.组合选择器1:嵌套(后代)选择器
- 嵌套选择器,用于设置选择器内部的选择器样式。
- 嵌套选择器也称为后代选择器,用于选择某元素的直接或间接子元素。
- 嵌套选择器,选择器之间使用
" "
空格隔开。
p{//为所有 p 元素指定样式。
color:blue;
text-align:center;
}
.sss{//为所有 class="sss" 的元素指定样式。
background-color:red;
}
p.sss{//为所有 class="sss" 的 p 元素指定样式。
text-decoration:green;
}
.sss p{//为所有 class="sss " 元素内的 p 元素指定样式。(嵌套,后代:直接子元素和间接子元素)
color:white;
}
8.组合选择器2:子元素选择器
- 子元素选择器只能选择某元素的直接子元素。
- 子元素选择器,选择器之间使用
">"
符号。
div>h1//设置div中所有直接子元素h1标签背景为红色
{
background-color:red;
}
9.组合选择器4.后续兄弟选择器
- 后续兄弟选择器,选取所有指定元素之后的相邻兄弟元素,有相同父元素。
- 后续兄弟选择器,选择器之间使用
"~"
符号。
div~h1//设置div元素之后的所有相邻兄弟h1元素背景为红色,并且满足二者为同一父元素。
{
background-color:red;
}
10.组合选择器3.相邻兄弟选择器
- 相邻兄弟选择器,选择紧接在该元素后的元素,且二者有相同父元素。
- 相邻兄弟选择器,选择器之间使用
"+"
符号。
div+h1//设置div元素后的第一个h1元素背景为红色,并且满足二者为同一父元素。
{
background-color:red;
}
11.伪类和伪元素选择器
- css伪类用于向某些选择器添加特殊的效果。
- css伪元素用于向某些选择器设置特殊效果。
//伪类:
css伪类用于向某些选择器添加特殊的效果。
:link, :visited, :hover, :focus, :active, :first-child, :lang
css3新增的伪类:
:last-child, :only-child, :first-of-type, :last-of-type, :only-of-type, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :root, :empty, :target, :enabled, :disabled, :checked, :not(selector),
//伪元素:
css伪元素用于向某些选择器设置特殊效果。
::first-letter, ::first-line, ::before, ::after
css3新增的伪元素
::selection
备注:伪类和伪元素区别
- 伪元素添加了一个页面中没有的元素(只是从视觉效果上添加了,不是在文档树中添加);伪类是给页面中已经存在的元素添加一个类选择器。
- 为了避免大家混淆伪类和伪元素,css3中的标准规定伪类使用单冒号“:” ,伪元素使用双冒号“::”,但在此之前都使用的单冒号“:”,所以为了保证兼容伪元素两种使用方法都是可以的。
- 伪类可以叠加使用,而伪元素在一个选择器中只能出现一次,并且只能出现在末尾。
- 伪类与类优先级相同,伪元素与标签优先级相同。
//伪类:链接的不同状态都可以以不同的方式显示。
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
//任何元素的第一个子元素的 <p> 元素
p:first-child
{
color:blue;
}
//匹配的所有<p>元素的第一个 <i> 元素
p > i:first-child
{
color:blue;
}
总结.选择器优先级
- css选择器:简单选择器,伪元素选择器和组合选择器。
- 简单选择器:标签选择器,类选择器,ID选择器,通配符选择器,属性选择器和伪类选择器。
- 组合选择器:后代选择器,子元素选择器,后续兄弟选择器,相邻兄弟选择器。
- 选择器优先级:行内样式> ID选择器 > 类、伪类和属性选择器 > 标签,伪元素 > 通配符 > 继承 > 浏览器默认属性。
- css优先级的计算方式可以用一下公式来解决
value=a*1000+b*100+c*10+d
,依据value值得大小来确定css的优先顺序。其中a表示行内样式,b表示ID选择器的数量,c表示类、伪类和属性选择器的数量,d表示标签选择器和伪元素选择器的数量。
四、CSS样式表的三种引用方式
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
1.外部样式表
- 当样式需要应用于很多页面时,外部样式表将是理想的选择。
- 外部样式表定义为
.css
文件 - 每个HTML页面使用 标签链接到样式表。
<link>
标签在文档的头部<head>
内。
//css样式表文件
h1 {color:sienna;}
p {margin-left:20px;}
//引入
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
//使用
<h1>你好</h1>
<p>世界</p>
2.内部样式表
- 当单个文档需要特殊的样式时,就应该使用内部样式表。
- 使用
<style>
标签在文档头部定义内部样式表。
//内部样式设置
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
</style>
</head>
//使用
<h1>你好</h1>
<p>世界</p>
3.内联样式
- html元素和css样式混杂在一起,没有分离,谨慎使用
- 当样式仅需要在一个元素上应用一次时。
- 标签内使用样式
style
属性设置即可。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
4.多重样式优先级
一般情况下,优先级如下:就近原则
(内联样式) > (内部样式)>(外部样式)> 浏览器默认样式。