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