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

?

?