web开发之----CSS基础知识

1.选择器

• （1）元素选择器：选中相同的元素，然后对相同的元素定义同一个CSS样式。div{color:red;}
• （2）id选择器: 为元素设置一个id属性，唯一的.#id名{color:red;}
• （3）class选择器: 对拥有同一个class的元素进行CSS样式操作  .类名{color:red;}
• （4）后代选择器: #father1 div {color:red;} id为father1的元素”下的所有div元素红色
• （5）群组选择器: #id名,.类名,span{color:red;}

2. 字体样式

3.文本样式

text-decoration ：none, underline, line-through, overline.

text-transform: none, uppercase,lowercase,capitalize.

4.边框样式

整体样式 border-width、border-style以及border-color  简写 { border: 1px solid red; }

局部样式 border-top-width, border-bottom......left, right   { border-right: 1px solid red; }

5. 列表样式

list-style-type: 取值;  这个属性是针对ol或者ul元素的  / 多用 none

list-style-image属性来定义列表项图片,就是使用图片来代替列表项符号（但一般用iconfont)

6.表格样式

caption-side: 取值;  top/bottom

border-collapse属性 单元格之间的空隙  seperate, collapse

border-spacing属性来定义表格边框间距 border-spacing: 像素值;

7.图片

很多人认为图片的水平对齐是在img元素中定义，其实这是错的！！！

图片是在父元素中进行水平对齐，因此我们当然是在图片的父元素中定义 text_align。

text-align属性一般只用于两个地方：文本水平对齐和图片水平对齐。

垂直 vertical-align，但注意vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式

float文字环绕

8. 背景样式

背景颜色”使用的是background-color属性（注意color属性定义“文本颜色”）。

background-repeat属性来定义背景图片的重复方式

background-position: 水平距离 垂直距离;(相对于左上角) 或 background-position: 关键字;

background-attachment: scroll / fixed ;

9. 超链接样式

鼠标样式  :cursor  ------- default、pointer和text / 鼠标样式 .cur图片 cursor: url(图片地址), 属性值;

10. CSS盒子模型

 div是块元素，因此可以设置width和height。span是行内元素，因此不可以设置width和height

 padding ,margin   顺时针

 11.浮动布局

文档流 --------- 正常文档流，脱离文档流

我们想要改变正常文档流，可以使用有两种方法：浮动和定位。

float:left/right ;   / clear:both;

12.定位布局  position

固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。

默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。

部分参考 ： http://www.lvyestudy.com/css