CSS
层叠样式脚本
HTML CSS 都是前端的内容
HTML 四凉八柱
CSS 装修公司
提倡HTML与CSS分离
CSS 样式
元素内容的颜色 color
元素内容的背景色 backgrount-color
字体大小 font-size
RGB颜色
[0-255][0-255][0-255]
白色 255 255 255 ffffff
黑色 0 0 0 000000
CSS与HTML 组合方式
内联样式
把样式表写在标签内部作为标签中的style属性值出现
<span style="color:#ffffff;background-color:#000000;font-size:30px;"> </span>
内部样式
<head>
<title>CSS</title>
<meta charset="utf-8">
<style type="text/css">
span {
background-color:pink;
}
.blood {
color:black;
background-color:red;
font-size:40px;
}
#xb {
color:black;
background-color:green;
font-size:40px;
}
</style>
</head>
外部样式
css 单独存放,后缀名.css
test.css:
span {
background-color:pink;
}
.blood {
color:black;
background-color:red;
font-size:40px;
}
#xb {
color:black;
background-color:green;
font-size:40px;
}
testCss.html:
<head>
<link rel="stylesheet" type="text/css" href="./style/css.css">
</head>
CSS选择器
CSS 给指定标签相应的样式
标签、类和id选择器(优先级依次升高)
标签选择器 —— 对标签选择
span {
background-color:pink;
}
<span> xx </span>
类选择器 —— 对class选择
.blood {
color:black;
background-color:red;
font-size:40px;
}
<span class="blood"> xx </span>
id 选择器
一个id只能被调用一次
#xb {
color:black;
background-color:green;
font-size:40px;
}
<span> xx <span id="xb">
测试
testCss1.html(内联样式)
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
</head>
<body>
<span style="color:#ffffff;background-color:#000000;font-size:30px;"> test </span>
</body>
</html>
testCss2.html(内部样式)
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<style type="text/css">
span {
background-color:pink;
}
.blood {
color:black;
background-color:red;
font-size:40px;
}
#xb {
color:black;
background-color:green;
font-size:40px;
}
</style>
</head>
<body>
<span>1 2<span class="blood"> 3 <span id="xb"> 4 5 </span>6 7 8 </span>9</span>
<br />
<span>ABC<span class="blood">def</span>G</span>
</body>
</html>
testCss3.html(外部样式)
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./style/css.css">
</head>
<body>
<span>1 2<span id="xb">3 4</span>,5 6<span class="blood">7 8</span>9</span>
<span>ABC<span class="blood">def</span>G</span>
</body>
</html>
css.css
span {
background-color:pink;
}
.blood {
color:black;
background-color:red;
font-size:40px;
}
#xb {
color:black;
background-color:green;
font-size:40px;
}
l>
css.css
~~~ css
span {
background-color:pink;
}
.blood {
color:black;
background-color:red;
font-size:40px;
}
#xb {
color:black;
background-color:green;
font-size:40px;
}