css笔记（2）

一、样式规则的注释与有效范围

 

1、规则

/*注释的内容*/

 

2、样式规则的继承

  所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。

 

3、样式规则的优先级

  ID选择器 > CLASS选择器 > HTML标签选择器

  内联样式 > 嵌入样式  > 外部链接样式

 

二、样式的属性分类

 

字体

font-family

font-size

font-style

text-decoration 添加上、中、下划线效果

font-weight 粗体字大小

font-variant  大写

text-transform 大小写

Color  #RRGGBB、rgb(r,g,b)、red

p{font:italic bold 12pt times,serif}

 

 

背景

background-color   背景颜色

background-image 背景图像

{background-image:url("")}

background-repeat 背景图像填充

  value: no-repeat、repeat、repeat-x、repeat-y

background-attachment 是否跟随内容移动

  value: fixed  scroll

background-position 背景图像的水平位置和垂直位置

  value： left、center、 right、20px、top、bottom、center

 

table{backgroun:#00cc00 url{logo.gif} no-repeat bottom right}

 

 

文本

word-spacing 单词之间的间距

letter-spacing 字符之间的间距

vertical-align 文本的垂直对齐方式

  value：sub（下标）、super（上标）、top、middle、bottom、相对于元素行高属性的百分比

text-align 文本水平对齐方式

  value: left、right、center、justify

text-indent 设置文本第一行的缩进值

white-space 处理空白元素

  value: normal（多个空格折叠成一个，html默认）、pre（记事本那种空格）、nowrap（只有遇到br标签才换行）

 

 

位置

 

CSS-P(Cascading Style Sheet Positioning)

 

Position 用于设定元素的定位方式

  value: absolute(绝对定位)、relative（相对定位）、static(默认)

left

top

width

height

z-index 解释的繁琐，用的时候就知道了。

 

布局

visibility 设置元素的可见状态

  value：inherit 这个元素继承外层元素的显示属性

              visible 显示该元素

              hidden 影藏该元素，但仍占浏览页面空间

 

Display 设定元素的显示状态

  value：block

              inline

              list-item

              none  被浏览页面忽略

Clip 没整明白

  clip:rect(top,right,bottom,left)

 

Overflow 元素中的内容超出元素中的大小时该如何处理

  value： visible 增加显示空间

               hidden 影藏多余内容

               scroll  滚动条

               auto

float 定义网页中其他文本如何环绕这个元素

  value： left、right、none

Clear 如何清除元素中的其他文本

  value：left 不允许左边有浮动对象

              right 右边不允许有浮动的对象

              none

             both

 

边缘

 

 

margin(margin-top、margin-right、margin-bottom、margin-left)

padding(padding-top、padding-right、padding-bottom、padding-left)

border-width(top right bottom left)

  value:thin\medium\thick or number

border-color(top right bottom left)

border-style(top right bottom left)

  value:noe\dotted\dashed\solid\double\groove\ridge\inset\outset.

border(border-top\borderright\border-bottom\border-left)

 

列表

list-style-type

list-style-image

list-style-position  value:inside\outside

 

 

其他

 

cursor