为什么要引入CSS？
纯Html语言编写网页存在着哪些不足？
l
效果单一
l
结构混乱
首先我们要介绍的是html的样式表
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p style = color:red;”>
天使投资指早期投资，尤其指个人早期投资。
</p>
</body>
</html>
内嵌样式表
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p{
color:red; /*设置字体颜色*/
}
</style>
</head>
<body>
<p >
天使投资指早期投资，尤其指个人早期投资。
</p>
</body>
</html>
在这里我们就可以发现，其实内嵌样式表实在头部内进行标识，而对于行内样式表我们可以发现实在body的内部进行表示，而这个就是行内样式和内嵌样式表的差别
外部样式表
外部样式表文件： style.css
p{
color:red;/*设置文字颜色*/
}
网页文件: 1.htm
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>天使投资指早期投资，尤其指个人早期投资。</p>
</body>
而在外部样式表，我们可以很明显的发现，我们在这里是进行引用外部的链接，进行的访问，而对于外部样式表也是一种方式，有很多的优点，比如说在维护的时候很方便我们只需要进行修改公开的CSS的文件即可，并不需要进行大范围的改动
而当我们说完这三种表格分别是，行内样式表，内嵌样式表，外部样式表，是有不同的优先级别
• 行内样式> 内嵌样式> 链接样式>浏览器默认样式
CSS的样式选择器
<style type="text/css">
body{background-color: #ccc;
text-align:center;
font-size:12px; }
h1{font:“黑体";font-size:20px;}
p {color:red; font-size:16px;}
hr {width:200px;}
</style>
<body>
<h1>标题</h1>
<hr>
<p>正文的段落</p>
版权所有
</body>而这段代码我们会显示的样子是
接下来我们介绍一个叫做类选择器
<style type="text/css">
p { font-size:12px; }
.one{ font-size:18px; }
.two{font-size:24px; }
</style>
<body>
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="two">类别2</p>
<p class="two">类别2</p>
<p>普通段落中的文字</p>
</body>
在类选择器中我们使用 . 的意思是进行选择 在这段代码我们所展现出来的是
ID选择器
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>
所展现出来的样式是
而在使用ID选择器的时候我们所使用的符号是# 而与我们在类的定义的不同，除了符号的不同，还有一种不同是id选择器只能够选择一次，不可以进行多次使用
集体声明
<style type="text/css">
h1,p {text-align:center;
}</style>
<body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
</body>
嵌套声明
<style type="text/css">
p span{
color:red;
}
</style>
全局声明
<style type="text/css">
* {
text-align:center;
}</style>
<body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
<h2>欢迎访问论坛</h2>
</body>
在全局声明的时候我们选择*号对全部进行声明
3438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
