-
什么是
CSS?
CSS
指
层叠样式表
(Cascading
Style Sheets)
样式定义如何显示
HTML
元素
样式通常存储在样式表中
把样式添加到
HTML 4.0
中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在
CSS
文件中
多个样式定义可层叠为一个
为什么使用
CSS
?
CSS
允许您针对
HTML
元素应用特定的样式。
CSS
< br>的主要好处在于,它允许你将样式与页面内容进行分离。
仅使用
HTML
,
样式将和页面内容
格式混杂在一起,
这样的页面将会变得难以维护。
所有的
web
页面样式都可以
(也应该)
从
HTM
L
文档中分离出来,
建立成一个单独的
CSS
文件再进行引用。
内联
CSS
在
web
文档中直接插入一个
CSS
是内联样式的使用方法之一。使用
内联样式
,将
CSS
应用于单个元素。
<
/p>
为了使用内联样式,将
CSS
属性直接添
加到相关标签中。
下面的例子展示了如何创建一个灰色背景和白色文本的段落:
<
p
sty
le
=
>
This is an example of inline styling.
p
>
内部样式表
在
HTML
页面的标题部分将
内部样式
定义在
元素中
例如:下列代码中的样式将作用在所有
段落中
<
html
>
<
head
>
<
style
>
p
{
color
:white;
background-color
:gray;
}
style
>
head
>
<
body
>
<
p
>This is my first
paragraph.
p
>
<
p
>This is my second
paragraph.
p
>
body
>
html
>
外部引用
CSS
通过这种方法将所有
的
CSS
样式保存在同一个后缀名为
.
css
的拓展文件中。
然后通过
p>
html
标签
在
HTML
页面的
部分将
CSS
文件引入。
如下例子所示:
HTML
部分:
<
head
>
<
link
rel
=
href
=
>
head
>
<
body
>
<
p
>This is my
first paragraph.
p
>
<
p
>This is my
second paragraph.
p
>
<
p
>This is my
third paragraph.
p
>
body
>
CSS
部分:
p
{
color
:white;
background-color
:gray;
}
CSS
语法
CSS
是由浏览器解释的样式规则
,
然
后应用于文档中相应的元素。
样式规则有三个部分:
选择器
,
属性
和
值
。
例如,标题颜色可以定义为:
h1
{
color
: orange; }
详解:
选
择器要指向需要设置样式的
HTML
元素。
声明块包含一个或多个用
分号
分
隔的声明。
每个声明都包含一个由
冒
号
分隔的
属性名称
和
< br>值
。
例如:
h2
{
color
: red;
background
:
#fff
;
}
类型选择器
最常见和易于理解的选择器是类型选择器。
该选择器以页面上的元素类型为目标。
例如,要定位页面上的所有段落:
p
{
color
: red;
font-
size
:
130%
;
}
CSS
注释
注释用于解释您的代码,并可能在您稍后编辑源代码时为您提供帮助。
浏览器会
自
动忽略注释
。
p>
CSS
的注释如下所示:
/* This is a comment */
例子:(将原先设置红色背景色的
CSS
样式注
释掉)
p
{
color
: green;
/* background-color: red;
*/
font-
size
:
150%
;
}
CSS
级联
网页的最终外观是不同的样式结合的结果。
通过样式的三个主要来源形成一个级联:
由页面的作者创建的
CSS
样式
浏览器的默认
CSS
样式
浏览页面的用户自定义
CSS
样式
CSS
继承
继承是指属性在页面中流动的方式。
除非另有定义,子元素通常会采用父元素的特
征。
例子:
<
html
>
<
head
>
<
style
>
body
{
color
:
green;
font-
family
: Arial;
}
style
>
head
>
<
body
>
<
p
>
路人甲
p
>
body
>
html
>
元素选择器
元素选择器
:就是对已选中的
HTML
元素符号
设置
CSS
样式(例如:
di
v
、
p
、
a<
/p>
、
ul
、
li<
/p>
等元素符号)。
如下图所示,就是为
div
元素设置
CSS
样式的
width
和
height
属性。
参考代码片段:
div
{
< br>width
:
80px
;
height
:
90px
;
}
class
选择器
< br>class
选择器
(类型选择器):是最常见和易于理解
的。该选择器通过绑定
HTML
元素上已设置的
class
标签进行设置对应的
CSS
样式。
以
.
(
class
选择符前缀<
/p>
)加上对应的
class
名称
组合成选择器的元素符号。
例如,要选择页面上
classs
属性
为
< br>w3cschool
的元素:
参考代码片段:
.w3cschool
{
<
/p>
width
:
80px
< br>;
height
:<
/p>
90px
;
}
后代选择器
后代选择器
:
选中某个父级下对应的
所有子级
,并针对该子级设置
CSS
样式。
?
?
p>
后代选择器设置的
CSS
样式
不会影响
到父级。
父级和子级之间需要用
空格隔开。
?
后代选择器可以存在
多层级父级
,并不局限在单一父子级之间,层级越深所设置的
CSS
样式优先级越高。
参考代码片段:
.father
.baby
{
color
:red;
}
.family
.mother
.baby
{
color
:blue;
}
子元素选择器
子元素选择器
:
子元素选择器与后代选择器较为类似。相对于后代选择器,子元素
选择器所涉及的范
围会更小。
?
后代选择器
可以跨层级影响,而
子元素选择器
要求父元素和子元素一定为
上下级关
系
,
中间如果隔着其他元素则会失效。
?
父元素和子元素之间需要用
>
(
子结合符
)
隔开。
参考代码片段:
div >
span{
width:
80
px;
height:
90
px;
}
相邻选择器
相邻选择器
:
选中对应元素的下一个兄弟元素。
?
?
?
所涉及的相邻兄弟元素必须是该元
素的
同级元素
。
所涉及的相邻兄弟元素
必须是相邻兄弟元素
,
中间若有其他元素隔开也将导致失效。
元素
A
和对应的相邻兄弟元素之间需要用
+
隔开。
参考代码片段:
< br>#w3cschool
+
div
{
width
:
80px
;
h
eight
:
90px
;
}
属性选择器
属性选择器
:
检索
HTML
页面中符合所设置的
属
性
条件的
元素
。
属性选择器通过
[ ]
设置被选元
素的属性条件。
如下图所示,
将选择
H
TML
页面中
所
有包含
了
alt
属性
的
img
元素
并为其设置
CS
S
样式。
参考代码片段:
/***
设置页面上所有含有
id
属性的
< br>div
元素
***/
div
[id]
{
color
:red;
}
/***
设置页面上所有同时含有
class
和
id
属性的
div
元素
***/
a
[class][id]
{
color
:red;
}
属性选择器的进阶用法
除了基础的属性选择器外,接下来将给大家介绍一些特殊的属性选择器用法。
设置页面上所有含有
href
属性并且属性值为
的
< br>a
元素
a
[href=
{
color
:red;
}
-
-
-
-
-
-
-
-
-
上一篇:小学英语毕业考试总复习资料
下一篇:常用职业类别名称中英文对照