css简述
CSS（Cascading Style Sheets），通常称为CSS样式表，是网页的美容师。
CSS样式表应用到HTML的三种方式
1、内部样式表
用<style type=“text/css”> </style>
插入到HTML文件头部
说明：
内部样式表必须定义在 <head>和</head>之间；
本页面所有样式都可以写在<style>和</style>之间。
2、引用外部样式表 前提需要创建一个CSS文件
链接方式：在HTML文件头部<head></head>之间写上代码
<link rel=“stylesheet” href=“样式表路径及全称” type=“text/css” />
说明：
rel=“stylesheet”指这个link和其href之间的关联样式为样式表文件。
type= "text/css"指文件类型是样式表文本。
外部样式表（另一种引入方法，了解）
<style type=”text/css”>
@import url(样式表路径及全称);
</style>
3、内联样式表（行间样式，行内样式，嵌入式样式）
语法：<标签 style="属性：属性值；属性：属性值；"></标签>
三种方式的作用域比较：
1、行内样式的作用域是当前标签
2、内部样式的作用域是当前文件
3、外部样式表的作用域是所有关联的所有文件。
三种方式的优先级比较：
1、行内式（内联样式）优先级最高
2、如果没有行内式，则内部样式和外部样式都可以起作用
3、内部样式和外部样式起冲突的话，按照从上到下的书写顺序，按照最下方的起作用
CSS选择符
CSS语法：选择符{属性：属性值；}
选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.
1、类型选择符（标签选择器、元素选择器）
用法：p{color:red}
使用HTML标签名称作为选择器，通常用于统一页面上的默认样式
2、id选择符
语法：#id名{属性：属性值；}
说明：
Id选择符可对元素进行一个ID名称的指派，id的基本作用是对每一个页面中的唯一出现的元素进行样式定义。
在使用ID选择符前我们应先为元素定义一个ID属性。
用法示例
html: <div id=“top”></div>
CSS: #top{font-size:12px;color:blue;}
3、class类选择符
语法：．类(class)名{属性：属性值；}
说明：
对同类标签进行不同的样式设定
对不同类的标签进行同样的样式设置
用法：
CSS: .txt{font-size:12px;color:blue;}
html: <div class=“txt”>1111</div>
<div> 222</div>
<p class=“txt”>333</p>
CSS复合选择符
1、群组选择符 语法：选择符1，选择符2，选择符3……{属性：属性值；}
对一组元素进行相同的样式指定，例如：
h1,h2,h3,p{font-size:12px;color:blue;}
使用逗号对选择符进行分离，对页面中使用相同样式的地方只需书写一次样式即可，可减少代码量，改善CSS代码的结构。
2、包含选择符
语法：父元素 子元素 ……{属性：属性值；｝
对某个对象的子对象进行样式指定，例如：
div a{font-size:12px;color:red;}
包含选择符指选择符组合中前一标签包含后一个标签，之间用空格空开。
利用包含选择符可以避免过多的使用class及id的设置，
并且直接对所需要设置的元素进行了样式设置。
包含选择符除了可以二者包含，也可以多级包含。
3、子选择符 语法：父元素 > 子元素{属性：属性值；｝
例如：h1 > strong {color:red;}
不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
4、伪类选择符 a:link/visited/hover/active
链接伪类选择器（顺序不能改变l v h a）
在实际开发中，一般不对四个都进行说明。而是按照以下方式说明，先定义默认状态的样式，再对需要修改的状态进行说明。
a{
color:#333；
text-decoration:none;
}
a:hover{
color:#f10215;
}
CSS文本属性
1、字体大小：font-size:16px;
2、字体风格：font-style:normal/italic/oblique; 分别为正常/斜体
3、字体加粗：font-weight：normal/100-900/bold/bolder 分别为正常/加粗
4、字体：font-family:“微软雅黑”;
简写：font:font-weight font-style font-size/line-height font-family;
对齐方式：
1、水平对齐：text-align：left/right/center/justify
2、垂直对齐方式（注意：是控制图片和文字的对齐方式）：
vertical-align:top/bottom/middle/baseline;
3、行高：line-height：数值或倍数。 文字一定会出现行高的中间
单行文本水平垂直居中：
text-align:center;
line-height:容器的高度;
text-decoration：文本修饰属性，设定文本划线的属性。
值有：none/underline/overline/line-through
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
text-indent：文本缩进属性，设定文本首行缩进。值为数值，常用单位有px
text-indent可以取负值；text-indent属性只对第一行起作用。
CSS属性-列表
list-style-type:disc 实心圆
circle 空心圆
square 实心方块
none 去掉列表标签
list-style-image:url(所使用图片的路径及全称)
list-style-position:outside/inside;
CSS属性-背景
background-color 为元素设置背景色
background-image 为元素设置背景图
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满容器
3）容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图
background-repeat 和背景图搭配使用，设置背景图是否平铺
值有：repeat/repeat-x/repeat-y/no-repeat
background-position 背景定位属性，和背景图搭配使用
第一个值表示水平方向，第二个值表示垂直方向
如只写一个值，则第二个值将默认center
background-attachment 设置图片是否跟随内容滚动。
值：scroll/fixed
背景属性简写为：
background:background-color/-image/-repeat/-position/-attachment
background:#f00 url(img/tu.jpg) no-repeat right fixed;
背景属性 background:背景属性的综合属性。
语法：background:背景颜色 背景图像 背景重复 背景位置 背景附着
例如：background:#f00 url(img/tu.jpg) no-repeat right fixed;
盒模型
盒模型的组成：content padding border margin
内边距（padding）：设定页面中一个元素内容到元素的边缘（边框）之间的距离。
padding值是添加在原有的content内容之上的，若想保持元素大小的不变，需从元素的原有大小上减去添加的padding值。
padding值的方向：
一个值：上下左右四个方向
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左 （四个方向顺时针）
边框
边框属性border:是边框属性的综合应用。
语法：border:边框宽度 边框风格 边框颜色
例如：border:5px solid #f00
边框风格 border-style:设定边框风格，常用属性值有:none（无）/solid(实线)/dotted(点划线)/dashed（虚线）/ double双线
边框宽度 border-width:设定边框宽度，数值，单位为px
边框颜色 border-color:设定边框色
margin
边距属性（margin）:设定页面中一个元素所占空间的边缘(边框)到相邻元素边框之间的距离。
属性值的4种方式：
四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向
1423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
