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