Hipo日志
css简介
8/5/2012, 7:29:51 AM
toc
Intro
css是指层叠样式表，主要是用来定义[html](http://hicc.me/blog/html.html "html简介")元素的显示，主要通过内部样式表和外部样式表工作。
**css的语法**
selector {property1: value;property2:value;…..}
**css中常用的选择器**
1.元素选择器
2.id，class选择器
3.伪类选择器，属性选择器
**css的创建使用**
1.外部样式表
2.内部样式表
3.内联样式表，主要实在元素的起始标签内，加入style属性。
This is a paragraph
css中常用的属性
css中常用的属性
1.排版使用
- float——浮动，参数有left、right。
- width、height、margin、padding
2.丰富表现类
- border、background、color、
- background-attachment——附加，用于控制背景图像是否会随着页面一起滚动，有固定fixd、和scroll滚动。
3.字体文本
- font-family——设置字体
- font-size——是指字的大小
- font-weight——设置子的粗细 值有，narmal、bold、bolder、lighter、像素
- font-style——设置字型
- line-height——设置行高
- font-variant——设置子的变形，ie不支持。
- text-transform——设置大小写的转换。有首字大写capitalize、大写sppercase、小写lowercaer和none。
- text-docoration——文本的修饰，下划线underline、无下划线overline、删除线linethrough、闪烁blink、none。
- word-wrap——控制单词断行。属性有normal和控制断行的break-word。
4.区块属性
- word-spacing——单词间距 有nomal和数值。
- letter-spacing——字母间距，有nomal和数值。
- vertical-align——垂直对齐，值有baseline，基线对其，下标sub、上标super，顶部top、文本顶对齐text-top、中线对齐middle、底部bottom。
- text-align——文本对其，有left、right、center、justify均分。
- text-indent——文字缩进
- white-space——空白间距，在html中中空格被省略，有normal、pre保留和nowrap不换行三种。
5.绝对定位。
- position——确定定位的类型，absolute绝对、relative相对、static静态。
- z-index——设置元素的叠放顺序，Z轴，值为纯粹的整数。
- visibility——控制显示的，值有inherit继承，visible可见，和隐藏hidden。
- overflow——溢出，值有visible，hidden、scroll、和自动auto。
6.列表
- list-style-type——类型样式，有圆点disc、圆圈circle、方形square、
- 数字decimal、小写罗马数字lower-roman、大学罗马数字upper-roman、小写字母lower-alpha、大学字母upper-alpha。
- list-style-imge——列表前的项目图像
- list-style-position——位置，有outside和inside两种值。
**css布局**
1.绝对定位
主要是使用css中position属性来控制，
实例代码为：
E { position: absolute; left: 20px; top: 20px; }
注：
- 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
- 定义了绝对定位的元素会脱离文档流，因此可以和别的元素覆盖，通过z-index来设置。
2.浮动布局
css属性中float属性最初用来设置文字环绕图片，之后被用来浮动布局，简单的做法便是给需要浮动并排显示的元素设置float属性，则这些元素会在宽度容许的情况下并排显示，需要注意得是，浮动会导致父元素高度塌陷，固定高度的不灵活，而且会导致在ie浏览器下一系列bug。
3.display:inline-block布局
现在比较提倡的是使用display:inline-block来布局，display:inline-block致使元素变成行内元素，而容许并排显示，形成想要的布局样式这种布局方式解决了浮动定高的局限，而且在浏览器中表现较为正常稳定。
