CSS基本学习(一)

比赛打完了,开始学习学校的课程了,以此记录学习.

一.CSS基本语法

选择器{属性1:属性值1;属性2:属性值2;….}
每条CSS包括两部分组成:选择器和一条或多条属性声明。每条属性声明由一个属性和一个值组成。
属性和值之间用冒号,多条属性之间用分号。将多条属性放到一个花括号中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css"> /*使用内联css*/
p{
text-align: center;
color: blue;
font-family: "Comic Sans MS",arial,黑体;
}
</style>
</head>
<body>
<p>使用css定义网页段落水平对齐方式,文体颜色和字体</p>
</body>
</html>


注意:在定义css属性值时,如果时多个单词组成要加引号,单个单词不需要加引号.

二.CSS基本选择器

CSS选择器包括俩种基本选择器和复合选择器,基本选择器主要包括元素选择器,类选择器,id选择器,伪类选择器,伪元素选择器;复合选择器是通过基本选择器进行组合构成的。

1.元素选择器

基本语法:html元素名{属性1:属性值1;属性2:属性值2;…..}
元素选择器对指定的html元素全部显示效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css"> /*使用内联css*/
p{
text-align: center;
color: blue;
font-family: "Comic Sans MS",arial,黑体;
}
h1{
text-align: center;
color: red;
}
h2{
text-align: center;
color: green;
}
</style>
</head>
<body>
<p>使用css定义网页段落水平对齐方式,文体颜色和字体</p>
<h1>css对h1定义颜色</h1>
<h2>css对h2定义颜色</h2>
</body>
</html>

2.类选择器

元素选择器是对页面中的所有相同元素的统一格式,但如果需要对相同元素的某一个元素做特殊效果,我们就需要类选择器或者id选择器。
基本语法:.类选择器{属性1:属性值1;属性2:属性值2;}
语法说明:类选择器第一个字符不能使用数字,类选择器名前的”.”是类选择器的标识,不能省略,类选择器区分大小写。
应用类选择器样式的元素中添加”class”属性,且将其值设置为类选择器名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
.txt1{
color: blue;
font-size: 26px;
font-style: 黑体;
}
.txt2{
color: red;
font-style: italic;
font-size:30px;
}
</style>
</head>
<body>
<p class="txt1">使用txt1类选择器显示效果</p>
<p class="txt2">使用txt2类选择器显示效果</p>
</body>
</html>


需要注意的是类选择器的优先级高于元素选择器,所有对一个元素即使用元素选择器,又使用类选择器,最后显示的效果是类选择器定义的效果。

3.ID选择器

ID选择器和类选择器一样,都是对页面相同元素特定的一个元素进行特殊效果处理。
基本语法:#ID选择器名{属性1:属性值1;属性2:属性值2;…..}
在应用ID选择器时,在元素添加id属性,属性值为id选择器名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
#txt1{
color: blue;
font-size: 26px;
font-style: 黑体;
}
#txt2{
color: red;
font-style: italic;
font-size:30px;
}
</style>
</head>
<body>
<p id="txt1">使用txt1类选择器显示效果</p>
<p id="txt2">使用txt2类选择器显示效果</p>
</body>
</html>


id选择器优先级同样优先元素选择器

4.通用选择器

通用选择器用通配符”“ 表示,它可以选择文档中所有元素。主要用于重置文档元素默认样式,一般用来重置文档元素的内外边距。
基本语法:
{属性1:属性值1;属性2:属性值2;}

1
2
3
*{margin:0px;
padding:0px;
}

5.伪类选择器

CSS伪类用于向某些选择器添加特殊效果,伪类一开始用来表示一些元素的动态效果,典型的就是链接的各个状态。
基本语法:选择器名:伪类{属性1:属性值1;属性2:属性值2;…..}
语法说明:选择器可以是任意类型的选择器,当选择器是类选择器时,可以在类选择器名前加上元素名,即将选择器名写成:元素名.类选择器名,比如:a.second:link
伪类类型:
:active //将样式添加到被激活的元素
:hover //当鼠标悬浮在元素上方时,向元素添加样式
:link //将样式添加到未被访问过的链接
:visited //将样式添加到已被访问过的链接
:first-child //将样式添加到元素的第一个子元素
:lang //向带有指定lang属性的元素添加样式

(1).对链接定义显示效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
a:link{
color: blue;
}
a:visited{
color: red;
}
a:hover{
color: green;
}
a.second:link{
color: #00f;
font-size: 26px;
}
a.second:visited{
color: #f00;
font-size: 26px;
}
a.second:hover{
color:#0f0;
font-size: 26px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">超链接1</a>
<a href="https://da4er.top" class="second">超链接2</a>
</body>
</html>

(2).元素选择器使用伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
input:focus{
background-color: yellow;
}
</style>
</head>
<body>
<form action="#" method="post">
用户名:<input type="text" name="username" /><br />
密码:<input type="password" name="psw" /><br />
<input type="submit" value="1" />
</form>
</body>
</html>

(3).使用伪类设置元素的第一个子元素的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
p:first-child{
font-size: 33px;
}
li:first-child{
color: red;
}
</style>
</head>
<body>
<p>段落1,其顶层元素是boby</p>
<p>段落2,其顶层元素是boby</p>
<div>
<p>段落1,其顶层元素是div</p>
<p>段落2,其顶层元素是div</p>
</div>
<ol>
<li>有序列表项1,其顶层元素是ol</li>
<li>有序列表项2,其顶层元素是ol</li>
</ol>
</body>
</html>

(4).伪类设置带有lang属性的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
q:lang(no){
font-size: 33px;
}
</style>
</head>
<body>
<p><q lang='no'>11111</q></p>
<p><q>11111</q></p>
</body>
</html>

6.伪元素选择器

CSS伪元素用于将特殊的效果添加到某些选择器。
基本语法:选择器名:伪元素{属性1:属性值1;属性2:属性值2;….}
语法说明:和伪类选择器一样,为了限定某类元素,也可以在类选择器名前加上元素名。所以选择器名写成:元素名.类选择器名。在CSS3中,为了区分两者,规定伪类用一个冒号来表示,伪元素用两个冒号表示。
伪元素类型:
:first-letter //向文本的第一个字符添加特殊样式
:firs-line //向文件的首行添加特殊样式
:before //在元素之前添加内容
:after //在元素之后添加内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
p:first-line{
font-size: 26px;
font-style: italic;
text-decoration: underline;
}
p:first-letter{
font-size: 50px;
}
p:before{
content: url(1.jpg);
}
p:after{
content: url(1.jpg);
}
</style>
</head>
<body>
<p>https://da4er.top<br>
https://da4er.top<br>
</p>
</body>
</html>

三.CSS复合选择器

复合选择器是通过基本选择器进行组合构成的,常用的复合选择器有:交集选择器,并集选择器,属性选择器,后代选择器,子元素选择器和相邻元素选择器等。

1.交集选择器

交集选择器由俩个选择器构成,第一个选择器必须是元素选择器,第二个选择器是类选择器或者id选择器。
交集选择器的作用范围将选中同时满足前后俩个选择器定义的元素,也就是要求前者定义的元素,同时必须是指定了后者的类别或者id。该元素的样式是:第一个选择器,第二个选择器,交集选择器层叠的效果。
基本语法:元素选择器.类选择器|#ID选择器{属性1:属性值1;属性2:属性值2;….}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
div{
border-style: solid;
border-width: 10px;
border-color: blue;
margin: 20px;
}
.al{
font-style: italic;
background: #33ffcc;
}
div.al{
border-color: red;
background: #999999;
}
</style>
</head>
<body>
<div>元素选择器的效果</div>
<div class=".al">交集选择器的效果</div>
<p class=".al">类选择器的效果</p>
</body>
</html>

2.并集选择器

并集选择器又叫分组选择器,对不同选择器进行同种效果的展示,极大地减少了css代码量
基本语法:选择器1,选择器2,选择器3,…..{属性1:属性值1;属性2,属性值2;…..}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
div{
border-style: solid;
border-width: 10px;
border-color: blue;
}
h1,h2,div{
background: #999999;
}
</style>
</head>
<body>
<h1>Da4er</h1><br>
<h2>Da4er</h2><br>
<div>Da4er</div>
</body>
</html>

3.属性选择器

根据元素的属性及属性值来选择元素,此时用到的选择器称为属性选择器。
基本语法:[属性选择器1][属性选择器2]{属性1:属性值1;属性2:属性值2;…..}
元素选择器[属性选择器1][属性选择器2]{属性1:属性值1;属性2:属性值2;…..}
属性选择器格式:
1.[属性] 用于选取带有指定属性的元素
2.[属性=值] 用于选取带有指定属性和值的元素
3.[属性|=值] 用于选取属性值以指定开头的元素,注意该值必须是一个完整的单词或带有”-“作为连接符连接后续内容的字符串。
4.[属性^=值] 用于选取属性值以指定值开头的元素
5.[属性$=值] 用于选取属性值以指定值结尾的元素
6.[属性*=值] 用于选取属性值中包含指定值的元素
7.[属性~=值] 用于选取属性值中包含指定值的元素,注意该值必须是一个完整的单词

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
[title]{
color: red;
}
img[alt]{
border:30px #ff0000 solid;
}
p[align="center"]{
color: blue;
font-weight: bolder;
}
a[title][href]{
color: green;

}
</style>
</head>
<body>
<p title="1">Da4er</p><br>
<p align="center">Da4er</p><br>
<img src="1.jpg" alt="dog"><br>
<a href="https://da4er.top" title="blogs">blogs</a>
</body>
</html>

4.后代选择器

又称包含选择器,用于选择指定元素的所有后代元素。
基本语法:选择器1 选择器2 选择器3….{属性1:属性值1;属性2:属性值2;….}
后代选择器按从右到左的顺序读选择器的方式,例如 div h1 表示h1作为div的后代,也可以表示为
div后代元素的任意h2元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
div{
margin: 20px;
line-height: 36px;
}
div.s{
float: left;
padding-right: 10px;
border-right: #ccc 1px solid;
}
div.m{
float: left;
}
div.s a:link{
color: #000;
text-decoration: none;
}
div.m a:link{
color: #00f;
}
</style>
</head>
<body>
<div class='s'>
<a href="#">Da4er</a><br>
<a href="#">Da4er</a><br>
</div>
<div class='m'>
<a href="#">Da4er</a><br>
<a href="#">Da4er</a><br>
</div>
</body>
</html>

5.子元素选择器

基本语法:选择器1>选择器2{属性1:属性值1;属性2:属性值2;…..}
选择器1>选择器2 表示选择器1子元素的所有选择器2元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
h3>span{
color: red;
}
</style>
</head>
<div>
<h3><span>Da4er</span></h3>
<h3>Da4er</h3>
</div>
</body>
</html>

6.相邻兄弟选择器

选择紧接在另一个元素的元素,而且二者有相同的父类
基本语法:选择器1+选择器2{属性1:属性值1;属性2:属性值2;….}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
h1+p{
color: red;
font-weight: bold;

}
p+p{
color: blue;
font-weight: bold;
}
</style>
</head>
<h1>Da4er</h1>
<p>Da4er</p>
<p>Da4er</p>
<p>Da4er</p>
</body>
</html>

四.CSS常用属性

1.文本属性

定义文本外观,修改文本的颜色,行高,对齐方式,字符间距,段首缩进位置等属性以及修饰文本等功能。
常用文本属性:

| 文本属性 |属性值 |描述 |

| color |命名颜色,十六进制,RGB |文本颜色 |
| text-indent |length(常用单位px) |文字的首行缩进距离 |
| line-height |length(常用单位px) | 定义行高 |
| text-decoration |underline,overline,line-through,none|下划线,上划线,删除线,无任何修饰 |
| text-align |left,center,right,justify |左对齐,居中对齐,右对齐,两端对齐 |
| text-transform |none,uppercase,lowercase,capitalize |默认值,将文本中的字母转换大写,转换为小写,每个单词首字母大写,空白会被浏览器忽略 |
| white-space|normal,pre,nowrap,pre-wrap,pre-line,inherit |默认值(空白被浏览器忽略),空白被浏览器保留,文本不换行(直到遇到
),保留空白符序列,合并空白符序列,继承white-space |
| word-spacing |length |设置汉字或单词之间的空格的宽度 |

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
#text1{
color: #03f;
letter-spacing: 6px;
line-height: 37px;
text-decoration: underline;
text-indent: 2em;
}
#text2{
text-align: center;
white-space: pre-wrap;
text-transform: lowercase;
}
</style>
</head>
<body>
<p id="text1">Da4er</p>
<p id="text2">Da4er</p>
</body>
</html>

2.字体属性

| 属性 |属性值 |描述 |

| font |除了font之外的其他字体属性值 |把所有针对字体的属性设置放在一个声明中 |
| font-size |xx-small,smaller,larger,length,% |绝对字体尺寸(默认值为medium),相对字体尺寸(设置比父元素更小的尺寸),相对字体尺寸(设置比父元素更大的尺寸),设置字体大小为基于父元素的一个百分数 |
|font-family |宋体,黑体 |设置字体族,优先级按字体族顺序从大到小 |
| font-weight |normal,lighter,bold,bolder |设置字体常规格式显示,设置字体加细,设置字体加粗,设置字体特粗 |
| font-style |normal,italic,oblique |字体常规格式显示,字体斜体显示,字体斜体显示 |

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
p{
font-family: "楷体","宋体";
font-size: 5em;
font-weight: 500;
font-style: italic;
}
</style>
</head>
<body>
<p>Da4er</p>
</body>
</html>

3.背景属性

| 属性 |属性值 |描述 |

| background | 除background之外的任何的背景属性值 |将背景属性设置在一个声明中 |
| background-color |颜色值 |设置元素的背景颜色 |
| background-image |url(image_file_path) |设置元素的背景图像 |
| background-position |left,right,center,top,bottom |背景图像左,右,中,上,下对齐 |
|background-attachment |scroll,fixed,inherit |设置背景图像是固定亦随着页面滚动,默认是滚动 |

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用CSS布局网页段落样式</title>
<style type="text/css">
/*使用内联css*/
body{
background-image: url(1.jpg);
background-attachment: fixed;
}
</style>
</head>
<body>
<p>Da4er</p>
</body>
</html>

4.列表属性

| 属性 |属性值 |描述 |

|list-style |其他任意的列表属性值 |用于把所有用于列表的属性设置于一个声明中 |
| list-style-image |image_url |将图片设置为列表项前导符 |
| list-style-type |disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha,none |列表项前添加实点圆点,空心圆点,实心方块,普通的阿拉伯数字,小写罗马数字,大写罗马数字,小写英文字母,大写英文字母,不添加任何项目符号或编号 |

五.html文档中应用CSS

1.行内式

基本语法:<标签名 style=”属性1:属性值1;属性2:属性值2;….”>

2.内嵌式

基本语法:

1
<style type="text/css"> CSS样式 </style>

3.链接式

基本语法:

1
<link rel="stylesheet" type="type/css" href="css文件" />

4.导入式

基本语法:

1
<style type="text/css"> @import url("CSS样式文件名");</style>

六.CSS的冲突与解决

当文件中有多个css对同一个元素进行不同格式设置,会出现css的冲突。
解决原则:(1)优先级原则 (2)最近原则 (3)同一个属性的样式定义
优先级的规定为:行内式样式>内嵌式样式|链接外部样式 行内式样式的优先级最高 内嵌式样式和链接外部样式的优先级由它们出现的位置决定,谁出现在后面,谁的优先级就高。
ID选择器的优先级最高。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×