一、CSS的简介
1. CSS是什么
CSS指层叠样式表，是对HTML进行样式修饰的语言。
层叠：就是层层覆盖叠加，如果不同的CSS样式对统一HTML标签进行修饰，样式有冲突部分应用优先级高的，不冲突的部分共同作用。
样式表：就是CSS属性样式的集合。
2. CSS的作用
1） 修饰HTML，使HTML样式更好看。
2） 提高样式代码的复用性。
3） HTML的内容与样式分离，便于后期维护。
3. CSS的书写
(1) 内嵌样式
内嵌样式就是把CSS的代码嵌入到HTML标签中。
例：<div style=”color:red;font-size : 100px”>这是一个DIV</div>
语法：
（1） 使用style属性将样式嵌入到HTML标签中。
（2） 属性的写法： 属性名 :属性值。
（3） 多个属性之间使用分号；隔开。
*不建议使用这个写法。
(2) 内部样式
在head标签中使用style标签进行CSS的引入。
例：
<styletype=”text/css”>
div{color:red;font-size:100px;}
</style>
语法：
（1）使用style标签进行CSS的引入。
<style type=”text/css”>
</style>
（2） 属性的写法：属性名 :属性值。
（3） 多个属性之间使用分号;隔开。
(3)外部样式
将CSS样式抽取成一个单独CSS文件，谁使用就谁引用。
<linkrel=”stylesheet” type=”text/css” href=”demo1.css” />
语法：
（1） 创建CSS文件，将CSS属性 CSS文件中
（2） 在head中使用link标签进行引入
<linkrel=”stylesheet” type=”text/css” href=”css文件地址”/>
rel：代表要引入的文件与html的关系
type：告知浏览器使用CSS解析器去解析
href：CSS文件的地址
(4) @import方式
<styletype=”text/css”>
@importurl(“CSS地址”);
</style>
link与@import方式的区别
（1） 所有浏览器都支持 link，部分低版本IE不支持import
（2） import方式是等待HTML加载完毕之后再加载
（3） import方式不支持JS的动态修改
二、CSS选择器
1. 基本选择器
（1） 元素选择器
语法：HTML标签名{CSS属性}
示例：
<span> hello css!!!</div>
<style type="text/css">
span{ color : red; font-size : 100px; }
</style>
（2） id选择器（id要唯一）
语法：#id的值{CSS属性}
示例：
<div id="div1">hello css1!!!</div>
<div id ="div2">hello css2!!!</div>
<style type="text/css">
#div1{background-color:red;}
#div{backgroung-color:pink;}
</style>
（3）class选择器
语法：.class的值{css属性}
示例：
<div class="style1">hello css1!!!</div>
<div class="style2">hello css2!!!</div>
<style type="text/css">
.style1{background-color: red;}
.style2{background-color:green;}
****选择器的优先级：id > class > 元素
2. 属性选择器
语法：基本选择器[属性=‘属性值’]{class属性}
示例：
<form action="">
name:<input type="text" /><br>
pass:<input type="password" /><br>
</form>
<style>
<style type="text/css">
input[type="text"]{background:yellow}
input[type="password"]{background-color:pink}
</style>
3. 伪元素选择器
a标签的伪元素选择器
语法：
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
示例：
<a href='#'> 点击我吧</a>
<style type="text/css">
a:link{color:blue}
a:hover{color:red}
a:active{color:yellow}
a:visited{color:green}
</style>
4. 层级选择器
语法：父级选择器 子级选择器......
示例I：
<div id="d1">
<div class="dd1">
</div>
<div class="dd2">
<span>span1-2</span>
</div>
</div>
<style type="text/css">
#d1 .dd2 span{color:red}
</style>
三、css属性
1. 文字属性
font: 简写塑好型，作用是把所有针对字体的属性设置在一个声明中。
font-size : 大小
font-family : 字体类型
font-style: 定义字体风格
2. 文本属性
color : 颜色
text-decoration : 下划线 （属性值：none underline）
text-algin:对齐方式（属性值：left center right）
letter-spacing: 定义字符间隔
word-spacing: 定义字间隔
3. 背景属性
background-color:背景颜色
bacjground-image:背景图片 （属性值：url("图片地址”）
background-position：图片的起始位置
background-repeat:平铺方式 （属性值： repeat：横向纵向平铺 no-repaet：不平铺 repeat-y：纵向平铺 repeat-x：横向平铺）默认横向纵向平铺
4. 列表属性
list-style-type：列表项前小标志
list-style-image：列表项前的小图片
5. 尺寸属性
width:宽度
heigjt：高度
6. 显示属性
display：（属性值：none：隐藏 block：块级显示 inline：行级显示）
7. 浮动属性
float：（属性值：left right clear：清除浮动）
缺点：（1）影响相邻元素，导致相邻元素不能正常显示
（2）影响父元素，导致父元素不能正常显示
四、CSS盒子模型
CSS框模型（Box Model）规定了元素框处理元素内容、内边框、边框和外边框的方式。
元素框的最里面部分是实际内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
border:
border-width：边框的宽度
border-color： 边框的颜色
border-style：边框的线型
padding：
代表边框内壁与内部元素之间的距离
padding：10px; 代表上下左右都是10px
padding：1px 2px 3px 4px；上下左右
padding：1px 2px 上下 / 左右
padding-top：1px 上
padding-left：1px 左
padding-ringht：1px 右
padding-bottom：1px 下
margin：
代表边框外壁与其它元素之间的距离 （boeder padding margin类似）
附CSS中单位说明
扫一扫
714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
