CSS概述
CSS概述
CSS:Cascading Style Sheets层叠样式表
目的:使内容与样式相分离,便于修改样式
CSS语法
p{
font-size:12px;/*字号/
color:blue;/*文字颜色/
font-weight:bold;/*加粗/
}
p 为选择器
冒号前面部分为属性名,后面为属性值
注意
1.最后一条声明可以没有分号,但是为了以后方便修改,一般也加上分号
2.为了使用样式更加容易阅读,可以将每条代码写在一个新的行内
CSS添加方法
1.行内添加方法
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p style="color:red">
天使投资指早期投资,尤其指个人早期投资
</p>
</body>
</html>
2内嵌样式
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p{
color:red;/*设置字体颜色/
}
</style>
</head>
<body>
<p>天使投资指早期投资,尤其指个人早期投资。</p>
</body>
</html>
适用状态:
1.即使有公共CSS代码,也是每个页面都要定义的
2.适合文件很少,CSS代码也不多的情况
3.如果一个网站有很多页面,每个文件都会变大,后期维护难度也大
3添加单独文件来添加样式
两个文件夹:1.htm 2.htm
外部式样式表文件style.css
p{
color:red;/*设置文字颜色*/
}
网页文件:1.htm
<!doctype html>
<html>
<head>
<link rel="stylesheet"href="css/style.css"/>
</head>
<body>
<p>天使投资指早期投资,尤其指个人早期投资。</p>
</body>
</html>
优点:
1页面结构HTML代码与样式CSS代码的完全分离
2维护方便
3如果需要改变网络风格,只需要修改公共CSS文件
4可以在同一个HTML文档内部引用多个外部样式表
添加样式优先级
行内样式>内嵌样式>链接样式>网页默认样式