CSS2.0简单总结
CSS2.0总结
CSS 指层叠样式表
CSS样式
css背景
1、background-iamge:url(“加入图片地址”);
2、background-repeat:repeat ;(表示平铺 分别可加 repeat-X，repeat-Y轴方向) 或者设置 no-repeat (不平铺);
<style>
background-repeat:no-repeat;
</style>3、background-color:(表背景颜色)这个属性接受任何合法的颜色值4、background-position:(背景图定位)后边 直接跟x轴 y轴坐标。图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角
<style>
background-position:right center;
</style>css文本
1、缩进文本text-indent 属性，该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。单位em,表示字节。text-indent 属性可以继承
2、text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。具有继承性，对于块级元素来说可以让盒子中的文字改变位置，但是对于行内元素或者行内块元素（宽高不可以设置，除非使用disply：block 或者disply:inline-block改变属性）来说是能作用于盒子。
3、line-hight:行高设置中 对于块级元素，行高可以撑起盒子高度。对于行内元素来说设置行高并不能使得合资的高度，但是盒子本身可以变化（比如通过行高设置居中，则行内元素的盒子就可以居中）。
4、font-size:加字体尺寸大小font-style:字体是否倾斜（intlic倾斜 normal正常）
font-weight:是否加粗(bold粗 bolder比较粗 normal正常)
font-family：哪种字体（宋体 ，黑体…）
综合属性font:font-style font-weight font-size/line-height font-family;前两个位置可以互换，也可以不写，font-size/line-height 例如24px/2 表示字体大小是24px 行高为字体大小的2倍。
css列表：
有序列表：ol li 无序列表 ul li 自定义列表 dl dt dd其中列表前的标志可去掉
可以使用属性 list-style-type：square（设置为方块） none(无) list-style-image（将图象设置为列表项标志。） list-style-position(设置列表中列表项标志的位置.)
css表格：
table,tr(行),th(第一列),td（列）border-collapse:collapse(单一边框);（属性设置是否将表格边框折叠为单一边框）
1、对齐方式：text-align(属性设置水平对齐方式，比如左对齐、右对齐或者居中) 和 vertical-align(属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐) 属性设置表格中文本的对齐方式
2、border-spacing:(设置单元格边框的距离)
盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
1、element:盒子里边的内容
2、padding：盒子的内边距（盒子边与内容之间的距离）如果给padding设置百分比，则其百分比根据父元素的宽设置，而不是高。
3、border：盒子的边框 border-style(边框的线):dotted(点画线) dashed(虚线) solid(实线)
4、margin：盒子的外边距 如果给margin设置百分比，则其百分比根据父元素的宽设置，而不是高。
5、height：内容的高度
6、width：内容的宽度
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
padding、margin都可以设置距离大小：简写为padding/margin:上 右 下 左;padding/margin:上下 左右 ;padding/margin:上 左右 下 ;border简写：1px(边框线的大小) solid(边框线的样式) red(边框线的颜色);
对于行内元素（行内块元素也属于特殊的行内元素包含其中 ）来说垂直方向上的padding margin设置无效。
margin的设置会导致父子元素，兄弟元素塌陷（遵从取大值，解决办法 ：给父元素设置border 或者padding）
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
边框与背景：元素的背景应当出现在边框的可见部分之间，元素的背景是内容、内边距和边框区的背景。设置背景图片之后：填充区域为padding+内容+边框部分图片平铺（边框样式参考上边）
css选择器
1、CSS 元素选择器：文档的元素就是最基本的选择器,元素选择器又称为类型选择器。
<style>
html {color:red};h1 {color:blue;}h2 {color:silver;}
</style>2、通配符选择器:显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
<style>
*{color:red;}*{margin:0;padding:0}
</style>3、结合选择器和声明的分组:可以使用很少的语句定义相对复杂的样式
<style>
h1, h2, h3, h4, h5, h6 { color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana;
</style> }4、CSS 类选择器:类选择器允许以一种独立于文档元素的方式来指定样,只有适当地标记文档后，才能使用这些选择器式。该选择器可以单独使用，也可以与其他元素结合使用。
<style>
<h1 class="important">This heading is very important.</h1>
<p class="clear">This paragraph is very important.</p>
</style>其中important就是类名，想选中添加样式则：
<style>
.important{ color:#ddd ; .... }
</style>CSS 多个类选择器具有相同属性中间用空格隔开：
<style>
.important .clear{ font-size:24px; ....}
</style>5、CSS ID 选择器:ID 选择器允许以一种独立于文档元素的方式来指定样式,首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。例如：
<p id="intro">This is a paragraph of introduction.</p>
选中它的话:
<style>
#intro{ color:#eee; .....}
</style>与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次.不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表
6、后代选择器又称为包含选择器,后代选择器可以选择作为某元素后代的元素.在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符例如：
<div class = qa>
<p class = hou> 我是后代 </p>
</div> 选中后代可以是：
<style>
.qa .hou{ color:red;}
</style>或者
<style>
.qa p{ background-color:#ddd;}
</style>等…
7、css伪类:
（1）、:first-child 伪类来选择元素的第一个子元素
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul><style>
li:first-child{ font-weight:bold; }
</style>（2）、:hover：当鼠标悬浮在元素上方时，向元素添加样式。
8、伪元素：（1）、":before" 伪元素可以在元素的内容前面插入新内容
<style>
h1:before{ content:url(logo.gif);}
</style>（2）、":after" 伪元素可以在元素的内容后面插入新内容
<style>
h1:after{ content:url(logo.gif);}
</style>浮动
flot:left/right/center;
浮动的初衷是为了实现字围效果，后应用于让块级元素并排显示
浮动会让其半脱离标准文档流，从而文字可以产生字围效果
浮动的特点：
(1)贴靠性：浮动的盒子紧紧贴靠，宽度不够自动换行
(2)包裹性：一个块级元素在不设置宽高的情况下浮动，它的宽高会尽可能小。
元素浮动会对它后面的元素造成影响，后面的元素（盒子）会钻上去占据位置，但是元素中的文字不会（依旧保持字围效果）
清除浮动对父元素 兄弟元素造成的影响：
父元素：overflow:hidden;或者加一个高度
兄弟元素：clear:both(加在第一个受影响的元素上)
行内元素设置浮动之后就可以直接设置宽高。
<div class = "flo">
<div class = "flet"></div>
<div class = "cent"></div>
<div class = "righ"></div>
</div>三个子元素浮动：(父盒子没有设置宽高，宽尽可能大 ，高为子盒子的高度撑起来，三个盒子同时浮动会导致父类盒子高度塌陷，所以给其设置overflow:hidden(本意是超出部分隐藏，不过清除浮动造成的影响也可以))
<style>{
.flo{overflow:hidden;}
.flo .flet{flot:left; width:120px hight:100px background-color:#aaa;}
.flo .cent{flot:left; width:120px hight:100px background-color:#fff;}
.flo .righ{flot:left; width:120px; hight:100px; background-color:#ccc}
</style>本文地址：https://blog.csdn.net/Fairyasd/article/details/107266459