css是英文Cascading Style Sheets的缩写，称为层叠样式表，用于对页面进行美化。存在方式有三种：
元素内联、页面嵌入和外部引入。比较三种方式的优缺点。
语法：style='key1:value;key2:value2;'
-
在标签中使用style='xx:xxx;'
-
在页面中嵌入：<style type='text/css'> </style>块
-
引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员必须知道是如何实现的。
分别看下上面三种方式怎么使用：
1、在标签中使用<style type='text/css'> </style>块
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
http-equiv
=
"content-type"
content
=
"text/css"
;
charset
=
"UTF-8"
>
<
title
>页面一</
title
>
<
link
rel
=
"stylesheet"
href
=
"commom.css"
/>
</
head
>
<
body
>
<
div
style
=
"background-color:red;"
>123</
div
>
</
body
>
</
html
>
|
2、在页面中嵌入 <style type='text/css'> </style>块
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
http-equiv
=
"content-type"
content
=
"text/css"
;
charset
=
"UTF-8"
>
<
title
>页面一</
title
>
<
link
rel
=
"stylesheet"
href
=
"commom.css"
/>
<
style
>
.logo{
background-color:red;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
'logo'
>123456</
div
>
<
div
class
=
'logo'
>aaa</
div
>
</
body
>
</
html
>
|
即在代码中添加一个<style></style>代码块，自定义一个样式，然后在后面的代码中可以反复调用
3、引入外部css文件
如果有多个html文件需要引用自定义的css样式，那么按照第二种方式的做法就需要在每一个html文件中定义一个样式，为了解决这个问题，可以定义一个文件，写入自定义的样式，然后从文件中调用这个样式即可。
style的写法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<
style
>
.logo{
background-color:red;
}
#logo{
background-color:red;
}
a,div{
color:red;
}
a div{
color:red
}
input[type='text']{
color:blue
}
.logo a,.logo p{
font-size:56px;
}
</
style
>
|
1、class选择器
.logo表示class='logo'时，引用该样式
2、id选择器
#logo表示id='logo'时，引用该样式
3、组合选择器选择器
a,div表示所有的a标签和div标签引用该样式
4、关联选择器
a div表示层级关系，即所有a标签下面的div标签应用该样式。
5、属性选择器
input[type='text']，属性标签，表示所有的type为'text'的标签引用该样式
6、.logo a,.logo p表示class='logo'时，下面的所有a标签和class='logo'时下面所有的p标签，引用该样式
