Day04-CSS-派生、选择器

派生

使用
HTML代码

1
2
3
4
5
6
7
8
<p><strong>苦酒</strong></p>
<ul>
<li>
<strong>
苦酒
</strong>
</li>
</ul>

CSS代码

1
2
3
4
5
6
7
8
p strong
{
color: crimson;
}
li strong
{
color: #4650ff;
}

派生与id/class公用

其中id选择器使用#在CSS中进行定义,id是唯一的,class选择器使用#在CSS中进行定义,不是唯一的
HTML代码

1
2
3
<div id="divid">
<p>苦酒<a href="#">苦酒</a> </p>
</div>

CSS代码

1
2
3
4
5
6
7
8
#divid a
{
color: crimson;
}
#divid p
{
color: #4650ff;
}

属性选择器

使用title来进行选择,直接在html文件中填写
HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>苦酒</title>
<style type="text/css">
[title=t]{
color: crimson;
}
[title=te]
{
color: #4650ff;
}
</style>
</head>
<body>
<p title="t">属性选择器</p>
<p title="te">属性选择器</p>
</body>
</html>

CSS——背景


CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body
{
background-repeat: no-repeat;
background-attachment: ;
/*
background-image: url("http://b-ssl.duitang.com/uploads/item/201704/14/20170414202452_4ALvS.jpeg");
}
p
{
width: 40px;/*这个指的是宽度*/
padding: 10px;/*这个指的是边框距离*/
/*background-color: bisque;这个指的是背景颜色*!*/
/*color: #49e24f;这个指的是本身的颜色*/
}

CSS样式——文本

CSS样式——文字

CSS样式——链接


CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a:link
{
color: crimson;
text-decoration: none;
}
a:visited
{
color: blue;
}
a:hover
{
color: blue;
}
a:active
{
color: blueviolet;
}

CSS样式——列表

CSS样式——表格的制作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#tb,tr,th,td
{;
border: 1px solid red;
/*方格线条,并设置颜色*/
text-align: center;
/*字体居中*/
background-color: aqua;
/*背景颜色*/
}
#tb
{
width: 400px;
/*宽度*/
height: 400px;
/*长度*/
border-collapse: collapse;
/*合并框,变成单框*/
}

CSS轮廓

CSS定位——定位

1
2
3
4
5
6
7
8
9
#position
{
width: 100px;
height: 100px;
background-color: #4650ff;
position: center;
left: 10px;
/*相对布局*/
}
0%
-->