css简介

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致使元素变成行内元素,而容许并排显示,形成想要的布局样式这种布局方式解决了浮动定高的局限,而且在浏览器中表现较为正常稳定。

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus