什么是CSS?
- CSS是指层叠样式表
- CSS通常称为CSS样式表或者层叠样式表,主要用于设置HTML页面中的文本内容(字体,大小,对其方式等)、图片的外形(宽高,边框样式,边距等)以及版面的布局等外观显示样式
- HTML结构层:负责从语义的角度搭建页面结构
- CSS样式层 :负责从审美的角度美化页面
- JavaScript层 :负责从交互的角度提升用户体验
- 内联样式:标签中添加style属性
<p style=”color:red;”>235465876</p>
- 内嵌(内部)样式:在head标签中添加style标签
- 外部样式,外联样式,通过link标签引入css样式文件
<link rel="stylesheet" href="abc.css" type="text/css">
使用外部样式表,相对于内嵌和内部式,有以下优点:
- 样式代码可以复用。一个外部CSS文件,可以被很多网页共用。
- 便于修改。如果要修改样式,只需要修改CSS文件,而不需要修改每个页。
- 提高网页显示的速度。如果样式写在网页里,会降低网页显示的速度,如果网页引用一个CSS文件,这个CSS文件多半已经在缓存区(其它网页早已经引用过它),网页显示的速度就比较快。
css选择器:
-每一条css样式定义由两部分组成,形式如下:
-在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素
-选择器通常是您需要改变样式的 HTML 元素,如:<p>,<body>,<h1>等等
-每一条格式声明语句由“属性名:属性值”对组成,属性名和属性值间以冒号隔开,每条声明语句以英文状态下的分号“;”结束。
1.样式优先级:内联 > 内部 > 外部
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>
css
</
title
>
<!--外部样式-->
<
link
rel=
"stylesheet"
href=
"css/css1.css"
>
<!--内部样式-->
<
style
>
h1
{
color
:
firebrick
}
</
style
>
</
head
>
<
body
>
<!--//优先级 内联>内部>外部-->
<!--内联样式-->
<
p
style=
"
font-size
:
medium
;
"
>
内联样式
</
p
>
<
h1
>
内部样式
</
h1
>
</
body
>
2.选择器
1)通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素
*{}
2)标签选择器
标签选择器其实就是HTML代码中的标签,会匹配所有使用该标签的元素。如:
p{ background-color:yellow; }
3)类选择器
类选择器在css样式编码中是最常用到的,用于一组元素的样式,
.类名{}
1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文)
TIPs:1) class可以重复,也就是说,同一个页面上可能有多个标签同时属于某一个类;
2) 同一个标签可以同时携带多个类。
4)ID选择器
id 选择器,可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
TIPs: 优先级id > class
css中尽可能的用class,除非极特殊的情况可以用id。
原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。
5)css高级选择器
@后代选择器
空格就表示后代。选择的是后代,不一定是儿子。
@儿子选择器
div的儿子p。和div的后代p的截然不同。
能够选择:
<div> <p>我是div的儿子</p> </div> |
不能选择:
<div>
<ul>
<li>
<p>我是div的重孙子</p>
</li>
</ul>
</div>
@交集选择器
选择的元素是同时满足两个条件:必须是h3标签,然后必须是special标签。
<h3>我是标题</h3>
<h3 class="special">我是标题</h3>
<p class="special">我是段落</p>
<p>我是段落</p>
TIPs:不等价于 div .red 后代选择器
@并集选择器(组合选择器)
组合选择器:(多元素选择器)当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。如:
h1,h2,h3,h4,h5,h6
{
color: red
}
上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。
自己的代码联系:
1.基础选择器
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>
选择器
</
title
>
<
style
>
/*<!--通用选择器-->*/
*
{
background-color
:
blanchedalmond
}
/*标签选择器*/
p
{
color
:
red
}
.
p4
{
color
:
rebeccapurple
}
/*Id选择器*/
#p5
{
background-color
:
#b3d4fc
}
#p4
{
color
:
yellow
}
/*共同类 */
.
p7
{
font-size
:
larger
;
font-style
:
italic
}
.
p6
{
color
:
burlywood
}
</
style
>
</
head
>
<
body
>
<!--class属性不是唯一的,id是唯一的-->
<
p
id=
"p5"
>
我是第5个段落
</
p
>
<
p
>
我是第2个段落
</
p
>
<
p
class =
"p4"
>
为是第3个段落
</
p
>
<!--Id属性优先级大于class-->
<
p
class =
"p4"
id=
"p4"
>
我是第四个段落
</
p
>
<!--可以同时应用两个class-->
<
p
class =
"p6 p7"
>
我是第6个段落
</
p
>
</
body
>
head
>
<
meta
charset=
"UTF-8"
>
<
title
>
Title
</
title
>
<
style
>
/*<!--公共类--!>*/
.
p1
{
font-size
:
36
px
;}
.
p2
{
text-decoration
:
underline
;}
.
p3
{
color
:
chartreuse
}
</
style
>
</
head
>
<
body
>
<
p
class=
"p1 p3"
>
字体36号,颜色绿色
</
p
>
<
p
class=
"p2 p3"
>
下划线,颜色绿色
</
p
>
<
p
class=
"p1 p2"
>
字体36号,下划线
</
p
>
</
body
>
2.高级选择器
head
>
<
meta
charset=
"UTF-8"
>
<
title
>
高级选择器
</
title
>
<
style
>
/*选择div下面的所有p标签
后代选择器
*/
div p
{
color
:
chartreuse
}
/*
后代选择器
*/
div
.
p2
{
background-color
:
#b3d4fc
}
/
*多级后代选择器
*/
div ul li p
{
background-color
:
yellow
}
/*
儿子选择器
*/
div
>
p
{
color
:
firebrick
}
li
>
p
{
color
:
salmon
}
/*并集选择器 只要包含了标签h3和id:c3的都可以被选择到(群组选择器)*/
h3
,.
c3
{
background-color
:
chartreuse
}
</
style
>
</
head
>
<
div
>
<
p
>
121212
</
p
>
<
p
class=
"p2"
>
212121
</
p
>
</
div
>
<
div
>
<
p
class=
"p2"
>
222222
</
p
>
</
div
>
<
div
class=
"div2"
>
<
p
class=
"p2"
>
333333
</
p
>
</
div
>
<
div
>
<
p
>
4444444
</
p
>
<
ul
>
<
li
>
2222
</
li
>
<
li
>
<
p
>
55555
</
p
>
</
li
>
</
ul
>
</
div
>
<
h3
>
xxixiixix
</
h3
>
<
h3
class=
"c3"
>
xxixiixix
</
h3
>
<
p
class=
"c3"
>
xxxxxxxxxx
</
p
>
<
body
>
</
body
>