伪类选择器
a:visited { color : red }
指示作为已访问地址超链接的所有锚
a:link {color : green}
指示作为超链接并指向一个未访问地址的所有锚
a:link 不会应用到 不带href属性的a标签,比如:
the king in the north
动态伪类
:focus
指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素
:hover
指示鼠标指针停留的那个元素
:active
指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将会指示这个超链接
伪类顺序很重要,建议 link-visited-focus-hover-active!!!
强烈建议不要在hover悬停时,改变锚的大小!!!因为这样会重绘文档
选择第一个元素
p:first-child 选择第一个p元素
设置首字符样式
p:first-letter {color : red;}
这个规则会把每一段的第一个字母变成红色
设置第一行样式
:first-line 可以用来影响元素中的第一个文本行.
p:first-line
// 每一段所显示的第一行文本为紫色
限制: css2中:first-letter和:first-line伪元素只能应用于标记或者段落之类的块级元素而不能应用于超链接等行内元素. 在css2.1中, :first-letter能应用到所有元素
设置之前和之后元素的样式
css2.1允许插入生成的内容,然后用伪类:before和:after直接设置样式
h2 : before {content :"}}"; color : silver;}
字体
font-family
可以使用属性font-family在文档中采用字体系列
body{ font-family : sans-serif}
font-weight
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
700 | 800 | 900 | inherit
font-size
百分数值 : 根据从父元素继承的大小来计算
body{ font-size : 20px;}
p{font-size : 80%} // 16px
font-style
font-style用于在normal文本. italic文本和oblique文本直接进行选择.
默认值:normal 指竖立的文本
italic 指倾斜文本
oblique 指倾斜文本
font-variant
字体变形
值 : small-cap | normal | inherit
normal 描述正常文本
small-caps 要求使用小型大写字母文本
font-stretch
拉伸和调整字体,让字体变得更胖或者更瘦
文本属性
缩进文本text-indent
通过使用text-indent属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度是负值.
p {text-indent :3em}
//所有段落首行缩进3em
水平对齐text-align
影响一个元素中的文本行相互之间的对齐方式
text-align: left | center | right | justify | inherit
- left : 左对齐
- center : 居中对齐
- right : 右对齐
- justify : 两端对齐
垂直对齐line-height
line-height属性是指文本行基线之间的距离,而不是字体大小,它确定了将各个元素框的高度增加或者减少多少.line-height值和字体大小之差就是行间距
要确定一个给定元素的行间距,只需要将line-height的计算值减去font-size的计算值. 这个值就是总的行间距. 而且要记住, 这可能是一个负值. 然后行间距在除以二,将行间距的一半分别应用到内容区的顶部和底部,其结果就是该元素的行内框
当一个块级元素从另一个块级元素继承line-height时,问题会变得更为复杂.
比如 :
body{font-size : 10px;}
div{line-height : 1em} // 相当于10px
p{ font-size : 18px}
//结果导致p标签中文本垂直间距挨得很久
段落p标签从其父元素div继承了line-height的计算值,所以p标签的line-height的值为10px. 10px-18px = -8px, 所以段落上下挨得很近
解决办法: 指定一个数,由它设置缩放因子
body{font-size : 10px}
div{line-height : 1}
p{font-size : 18px}
//指定一个数时,缩放因子将是继承值而不是计算值.这个数会应用到该元素及其所有子元素,所以各元素都根据其自己的font-size计算line-height
垂直对齐文本 vertical-align
vertical-align属性只应用于行内元素和替换元素,如图像和表单输入元素.该属性不能继承.
baseline: 要求一个元素的基线和其父元素的基线对齐
sub: 要求一个元素变成下标,这意味着其基线相对于父元素的基线降低.
super: 与sub相反,它将元素的基线相对于父元素的基线升高
注意: 值sub和值super不会改变元素的字体大小,所以下标和上标不会变小
bottom: 将元素行内框的底端与行框的底端对齐(把元素的顶端与行中最低的元素的顶端对齐。)
text-bottom:把元素的底端与父元素字体的底端对齐。
top:把元素的顶端与行中最高元素的顶端对齐
text-top :把元素的顶端与父元素字体的顶端对齐
vertical-align 长度对齐
vertical-align设置长度把一个元素升高或者降低指定的距离.
vertical-align : 5px;
//会把一个元素与对齐前相比上升5像素
字间隔word-spacing
word-spacing属性接受一个正长度值或者负长度值.这个长度会增加字之间的标准间隔.默认值normal与设置值为0是一样的
//正长度值,字间隔增加
p.spread {word-spacing : 0.5em}
p.tight {word-spacing : -0.5em}
p.base{word-spacing : normal}
p.norm{word-spaing : 0}
字母间隔
letter-spacing输入长度会使子母间的间隔增加或减少指定的量
p {letter-spacing : 0}
p.sapcius {letter-spacing : 0.25em}
p.tight {letter-spacing : -0.25em}
文本转换 text-transform
uppercase: 将文本转换为全大写
lowercase: 将文本转换为全小写
capitalize: 只对每个单词的首字母大写
文本修饰 text-decoration
underline: 会对元素加下划线
line-through: 则在文本中间画一个贯穿线
blink:会让文本闪烁
overline: 定义文本上的一条线。
none : 默认值,无任何修饰
处理空白符 white-space
white-space属性指定元素内的空白怎样处理。
normal: 默认值,空白会被浏览器忽略。
pre: 空白会被浏览器保留。
nowrap: 文本不会换行文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap: 保留空白符序列，但是正常地进行换行。
pre-line:合并空白序列,但保持换行
背景
背景色 background-color
background-color:red
背景图像 background-image
如果希望有一个背景图像,为这个属性指定一个URL
body{background-image: url(bg123.png)}
有方向的重复background-repeat
repeat: 图像在水平垂直方向上都平铺
repeat-x:只在水平方向上平铺
repeat-y:只在垂直方向上平铺
no-repeat: 不重复对象
背景定位background-position
原图像的放置由background-position属性决定
注意:于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）".
background-position : left top
background-position:right top
....
background-position:x% y%
//第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。默认值为：0％0％
background-position: x pos y pos
//第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
关联background-attachment
通过使用属性background-attachment,可以声明原图像相对于可视区是固定的(fixed),因此不会守滚动的影响
background-attachment:fixed
//相对于可视区固定
background-attachment:scroll
//默认值,随文档滚动