CSS学习笔记（一）

 

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，则颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

• ID选择器，如#id{}
• 类选择器，如.class{}
• 属性选择，如a[href="www......com"]
• 伪类选择器，如:hover{}
• 伪元素选择器，如::before{}
• 标签选择器，如span{}
• 通配选择器，如*{}

Background简写

顺序：1.background-color 2.background-image 3.background-repeat 4.background-attachment 5.background-position

CSS文本属性

注：汉字字间距用word-spacing调节，而不是letter-spacing

所有字母大写：p.uppercase{text-transform:uppercase;}

所有字母小写：p.lowercase{text-transform:lowercase;}

首字母大写：p.capitalize{text-transform:capitalize;}

direction

rtl表示文本方向从右到左。

unicode-bidi

文字倒叙：unicode-bidi:bidi-override

white-space

使用white-space:nowrap时，文字不会换行，直到遇到<br>为止。

使用pre时，空白会被浏览器保留。

使用pre-wrap时，保留空白符序列，但是会正常换行。

使用pre-line时，合并空白符序列，但保留换行符。

text-shadow

text-shadow{x，y，blur，color}

x代表水平阴影的位置，如2px。

blur模糊距离的位置，可不选。

text-decoration

underline表示文本下的一条线

overline表示文本上的一条线

line-through表示穿过文本的线

blink表示闪烁的文本（浏览器不会显示）

CSS字体

 

font-weight

normal/lighter/bold

font-variant

small-caps可以显示小型大写字母的字体。

font-size

 

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

CSS链接

链接样式

a:link-正常，未访问过的链接

a:visited-用户已访问过的链接

a:hover-当用户鼠标放在链接上时

a:active-链接被点击的那一刻

CSS列表兼容问题

列表标记在所有浏览器中的显示不相同，IE 和 Opera 显示图像标记比火狐，Chrome 和 Safari更高一点点。

解决方案

ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}