CSS简介：Cascading Style Sheets(层叠样式表)的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。
CSS的作用：
1、它是用来定义网页外观（例如，字体、背景、文本、位置、布局、边缘、列表及其他等),它也可以和JavaScript等浏览器端脚本语言结合做出许多动态效果。
2、所谓的样式表，是样式化HTML的一种方法，HTML是文档的内容，而样式表是文档的表现，或者说是外观。
3、所谓的层叠，就是将一组样式在一起层叠使用，控制某一个或多个HTML元素，按样式表中的属性一次显示。
一个样式表可以用于多个页面，甚至整个站点，因此CSS具有良好的易用性和扩展性。
从总体来说，使用CSS不仅能够弥补HTML对网页格式化功能的不足，例如段落间距、行距、字体变化和大小等，还可以使用CSS动态更新页面格式，进行排版定位等。
CSS特点如下：
（1）控制页面中的每个元素（精确定位）。
（2）对HTML语言处理样式的最好补充。
（3）把内容和格式相分离，减少工作量。
CSS的规则组成：CSS和HTML一样都是由W3C制定的标准。
CSS的优势?
1.内容与表现分离
2.网页的表现形式高度统一，便于后期维护
3.具备极为丰富的样式，页面美化更加灵活
4.减少网页的代码量，增加网页的浏览速度 可以节省网络带宽
5.用于独立于页面的CSS,有利于搜索引擎的收录
CSS如何去写？
选择器:就是你要选择谁，然后改变什么
CSS的导入方式:
内部样式:
位置:<head>范围内
格式:
<style type="text/css">
...
</style>
特点:
适合同一个页面的效果实现，其他页面无效
行内样式:
位置:所需要实现的标签内
格式:
<p style="color:red">
特点:
适合某一个标签的样式修改
外部样式:
独立创建一个css文件，这个文件里面不需要写style,直接写样式即可
1.在head当中，<link href="css/style_demo.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
2.在head当中的style当中,@import url("css/style_demo.css" );
一般来说只会使用第一种，第二种几乎不用，因为link标签是属于xhtml的
而@import属于css2.1的规则，如果浏览器不支持@import，也就意味着你的样式无效
如果你使用的是link进行导入，先加载CSS样式，然后再去显示整个网页
如果你使用的@import，是先加载网页，再去显示CSS样式
适合多个页面共享一个CSS样式
样式表的优先级:
行内样式表 > 内部样式表 > 外部样式表
一般来说，我们只会使用外部样式表
格式:
选择器{
属性:属性值;
}
选择器分类:
基础选择器:
标签选择器:
标签名{
属性:属性值;
}
注意:属性值后的分号，你可以不写的 但是W3C的标准是必须要写的，而大部分
浏览器都遵循了W3C的标准，如果不写 可能会有部分浏览器无法使用。
特点:
一旦符合规则的标签，全部会实现同样的CSS效果
类选择器:
<i class="class">类选择器</i>
.类名{
属性:属性值;
}
特点:
所有符合类名的标签，都会实现同样的效果
类名不能以数字开头
ID选择器:
<p id="id">ID选择器我</p>
#ID名{
属性:属性值;
}
特点:
所有符合ID名的标签，都会实现同样的效果
但是，在同一个页面当中，标签不能出现同名的ID(js会出现问题)
选择器的优先级:ID选择器 > 类选择器 > 标签选择器
练习：
望庐山瀑布:
诗正文使用14px字体，颜色为绿色
水调歌头:
标题为红色，字体大小为18px，
正文第一段字体大小为12px,字体为红色
第二段字体颜色为黑色，字体大小为12px
如梦令:
使用标签选择器设置标题字体大小为20px
页面当中所有段落的文字为16px
使用类选择器设置译文和正文内容字体颜色为绿色
想办法将译文字体颜色改变为蓝色
复合选择器:
指两个及两个以上的选择器进行组合使用。
交集选择器:
标签选择器+类(ID)选择器{
属性:属性值;
}
特点:既要满足是否使用了某个标签选择器，也要满足是否使用了某个类或者ID选择器(也就说明标签选择器和类或者ID选择器必须同时满足)
后代选择器:
选择器+空格+选择器{
属性:属性值;
}
特点:无隔代限制，必须包含嵌套关系，例如p标签下面的span标签
子代选择器:
选择器>选择器{
属性:属性值;
}
特点:子代必须是父类的直接子代，不能存在隔代关系
并集选择器:
选择器,选择器,选择器,选择器,选择器,选择器{
属性:属性值;
}
特点:所有的选择器都实现同一个效果。
CSS继承性的问题:
html -> head ->title
body ->h1
p
ul -> li -> ol ->li ->ul
div
如果存在嵌套关系，父元素的属性发生了改变，子元素也会随之改变，
但是h标签无法继承父元素的字体大小，a标签无法继承父元素的颜色
文本样式:
background: firebrick;
color: khaki;
text-align:center;
text-indent:2em;
text-decoration:underline;
字体样式:
font-size:20px;
font-family:"宋体";
font-style:oblique;
font-weight:bold;
超链伪类:
/ *鼠标悬浮所触发的样式*/
.baidu:hover{
color: thistle;
font-size:10px;
}
.wangyi,
.baidu:visited {
color: darkcyan;
font-size: 50px;
}
.tencent:active{
color: green;
}
.tencent:link {
color:deepskyblue;
font-size: 180px;
}
DIV的练习：
用途:
div+css是现在主流的web设计模式
div主要的作用:
对网页进行布局
对网页内容进行对应的排版
div一般配合CSS，并且设置高和宽，否则无意义。
颜色的表示形式:
三原色:rgba(46,61,73,.4)
进制:#000000
单词:red
背景颜色:background-color:red;
图片背景:background-image: url(img/timg.jpg);
背景重复方式:background-repeat:no-repeat;
repeat-x:沿着x轴平铺
repeat-y:沿着y轴平铺
no-repeat:图像不平铺
repeat:图像平铺
图像大小:background-size: 50%;
图像定位:
background-position-y:沿着y轴移动
background-position-x:沿着x轴移动
移动方式:
y%/x%:依照百分比来移动
ypx/xpx:依照像素移动
x轴:left/center/right
y轴:top/center/bottom
背景连写:颜色/路径/x轴/y轴/平铺方式
background: red url(img/timg.jpg) 250px 150px no-repeat;
![汇编语言之基础知识[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)