css简介
网页分成三个部分
结构
表现 :外在显示的样子
行为
css-层叠样式表
网页实际上是一个多层结构,通过css可以分别为网页的每一层来设置样式,最终我们看到的是最上面的一层
css学习
先找到元素,再去设置样式
css书写的位置
第一种、行内式写法
<p style="color:red; font-size: 30px;">p中的文字</p>
<span class="one" style="color:red; font-size:30px">span1</span>
- 代码可维护极差,css代码与html结构没有实现分离
- 影响的范围只有当前标签
第二种 、内嵌式写法
<head>
<style type="text/css">
选择器 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
</style>
</head>
- 代码可维护性较差,没有实现css代码与html结构的完全分离
- 影响的范围只有当前页面
第三种 、外联式
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="1.css">
</head>
- 代码可维护性高,css与html结构完全分离
- 影响范围广,当前整个网页站点
css语法规范
语法:选择器 声明块
选择器:通过选择器来选中页面中指定的元素,p就是选中页面中所有的p元素
声明块:声明块是紧跟在选择器后面的,使用{}括起来
通过声明块给指定的元素设置样式
语法:样式名:样式值;
这叫名值对 ,一组一组,可以多组 用;隔开
p {
color: red;
background-color: salmon;
}