一、概念
CSS(Cascading Style Sheets)：CSS样式后层叠样式表，层叠：使用不同的添加方式给同一个HTML标签添加样式，所有样式共同作用于该标签；样式：给HTML标签添加需要显示的效果。
主要用于设置HTML页面中的文本内容、图片外形以及版面的布局等外观显示样式。
作用：CSS使页面更美观；CSS+Div使布局更灵活。
规则：样式选择器严格区分大小写，但属性和属性值不区分
多个属性用英文分号隔开
若属性值由多个单词组成，用英文引号括住
样式选择器如下：
二、引入CSS样式
1.行内样式
浅笑安然
2.内部样式
3.外部样式
引用外部样式：
CSS文件设置：
/*font样式设置*/
font{
color:green;
}优先级：行内样式优先级最高，内部样式和外部样式就近原则
三、选择器
1.元素选择器
浅笑安然
[html] view plain copy
/*元素选择器*/
font{
color: red;
}2.ID选择器：#id名{}
心若浮沉
[html] view plain copy
/*ID选择器*/
#flower{
color: blue;
}3.类选择器：.class类名{}
清风自来
[html] view plain copy
/*类选择器*/
.happy{
color:gold;
}4.属性选择器：标签名[属性='属性值']
文本：
/*属性选择器*/
input[type=text]{
background-color: brown;
}5.包含选择器：父代标签 子代标签
今天天气好晴朗
/*包含选择器*/
.day font{
color:orangered;
}四、CSS样式
1.border width heigh
2.display：block块级属性 inline行级属性 none隐藏属性 inline-block：在行里的块级元素，有宽度
块级元素p ；行级元素span
3.字体：color font-size background-color
4.float：浮动 clear：清楚浮动
五、盒子模型
margin：外边距，盒子与盒子，顺时针设置，若没有设置则按其对称来
border：边框线
padding：内边距，盒子与内容
盒子模型就是我们常用的盒子，现实生活中它既有自己的边框厚度，有与里面物体的间隔，也有盒子本身与外界的距离。
小结：
CSS层叠样式就是多种样式叠加到一起，共同作用于该标签，无论是选择器的使用，还是属性设置以及盒子模型的运用，根本都是为了改变HTML页面的样式，多种力量作用产生美观页面的效果。
相关文章：
