CSS的分类和优先级
- 浏览器缺省设置
- 外部样式表(
<head>
标签内部),定义在单独css文件中,由<link>
标签引用,
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
- 内部样式表(
<head>
标签内部,由<style>
标签包围)
<style type="text/css">
hr {color: sienna;}
</style>
- 内联样式表,在HTML元素内部使用
style
属性,style
可以包含任何css属性。
<p style="color: sienna; margin-left: 20px">
优先级 4>3>2>1 ;
CSS基本语法
selector {
property1: value1;
property2: value2;
...
}
- selector被称为选择器,代表要被渲染的元素,可能是元素HTML名称、id值或者class值;
- 可以指定多个选择器,用逗号隔开; 如果是空格隔开,表示派生选择器,即空格前后的元素具有父子关系;
选择器分类
- 元素选择器,即直接使用html元素作为选择器,可以用
*
表示所有元素。 - 类选择器,又叫class选择器,顾名思义该选择器作用于指定的class元素,使用
.class
表示。类选择器可以和元素选择器结合使用,如p.class1,表示class='class1'
的p
元素。 - ID选择器,作用与指定
id
的元素,使用#id
表示。 - 属性选择器,作用于特定属性的元素,语法:
可选的元素名[属性名]
,还可以根据属性值选取特定元素,如a[href='http://www.bb.com']
,选取href为’http://www.bb.com’的a
标签。其他高级语法:~=
部分匹配,即匹配词列表中某个词;^=
匹配开始;$=
匹配结尾;*=
包含子串; - 后代选择器或派生选择器,使用空格隔开,从左至右为祖先后代关系。
- 子元素选择器,使用
>
隔开父子元素。 - 相邻兄弟选择器,使用
+
链接,但只选择右边的元素,两个元素必须相邻,且有共同的父元素。
CSS样式
背景
背景色:
background-color: red;
背景图像:
background-image: url("img_file");
背景重复:
取值:repeat-x
,水平重复; repeat-y
,垂直重复; no-repeat
,不重复.
background-repeat: repeat-y;
背景定位:
可能取值: top
, bottom
, right
, left
, center
,百分比
, px
(相对于元素左上角内边距的偏移量); 分别表示垂直和水平方位,所以最多赋两个值,一个表示垂直,另一个表示水平,如果只赋一个值,另一个默认center;
background-position: top;
背景关联:
背景图是否随视图窗口滚动。
取值:scroll
(默认), fixed
, inherit
, initial
, local
, unset
.
background-attachment: fixed;
以上所有背景相关属性都可以统一放入background
属性赋值,用空格隔开。
文本
文本缩进:
text-intent
,可以赋值em或百分比(相对于父元素)。
水平文本对齐:
text-align
,可能值left,right,center,justify等,只影响文本,不影响元素本身。
字母间隔:
letter-spacing
,影响单词的每个字母或者字符之间的间隔,可以使用em,px,百分比等多种单位;另外word-spacing
定义单词之间的间隔,但是这里的单词并不是传统意义的单词,只要有空白符隔开,都会被认为是单词,所以慎用word-spacing
。
大小写转换:
text-transform
,取值:
- none,默认,不转换
- uppercase, 大写
- lowercase,小写
- captalize,首字母大写
文本装饰:
text-decoration
,取值:
- none,默认,无装饰
- underline, 下划线
- overline,上划线
- line-through,贯穿线
文本颜色:
color
字体类型:
font-family
,CSS 定义了 5 种通用字体系列:
- Serif 字体
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
具体可参考:http://www.w3school.com.cn/css/css_font-family.asp
字体风格:
font-style
,可能值,
- normal, 正常显示
- italic, 斜体
- oblique, 文本倾斜
italic和oblique在大部分场景下显示效果相同,只有部分字体本身不支持倾斜的话,italic是无效的,所以只能使用oblique。
字体加粗:
font-weight
,取值:
- 100~900,九级粗度
- bold, 相当于700
- normal, 相当于400
- bolder, 比继承的粗度更粗
- lighter, 比继承的粗度更细
字体大小:
font-size
, 可以使用em,px,百分比,smaller,larger等定义字体大小,其中em是相对大小单位,与实际大小的对应关系为: 实际大小= 继承来的大小*em。
链接
链接<a>
有四种状态:
- a:link, 普通,未被访问的状态
- a:visited, 已访问
- a:hover, 鼠标指针位于链接上方
- a:active, 链接被点击的时刻
其中冒号前面的a也可以换成a的#id或者.class,为某个或某些特定的链接指定样式。可分别为这几种状态指定color
,background
,font-family
,text-decoration
等样式,但是实测时发现color
值不能使用关键字,如red,green等,要使用十六进制表示的RGB值,如#00FF00.
列表
列表即有序列表<ol>
和无序列表<ul>
,列表样式包括:
list-style-type:square
,列表项的标志符号,也可以使用list-style-image:url()
自定义图像;list-style-position
, 列表符号的位置, 默认outside,当设置是为inside的时候,列表项整体会后移。
表格
border
系属性用于设置<table>、<td>、<th>、<tr>
等边框,包括样式(border-style
)、颜色(border-color
)、厚度(border-width
)、是否单线(border-collapse
)、边框与边框之间的间距(border-spacing
,当border-collapse
设置为collapse时,看不到效果).
表格边框默认不显示(border-style
为’none’),要设置样式为其他值后才会显示。
除此之外还可以设置以下表格相关属性:
pading
: 内边距margin
: 外边距text-align
和vertical-algin
: 文本对齐
轮廓
在元素的最外围画一层指定样式的边框
相关属性:
outline-color
outline-style
outline-width
outline
定位
CSS定位有三种:普通流、浮动和绝对定位。
定位属性:position
,取值:
static
: 默认,无定位,元素框正常生成。relative
: 相对定位,相对于其本来位置偏移。absolute
: 绝对定位,相对于最近已定位的祖先元素,可能覆盖页面上的其他元素,可以通过z-index
控制边框的对方次序。fixed
: 相对于浏览器窗口定位,即元素不会随浏览器滚动。
除static
外,其他属性值还可与top
、bottom
、left
、right
配合使用,表示具体的偏移值。
浮动:float
浮动框不在文档的普通流中,他可以想做或者向右移动,直到碰到它的包含框或另一个浮动框。
如果一个元素不想其周围出现浮动元素,可以使用clear
指定对应的边即可。
CSS3
新边框属性
-
border-radius
, 设置圆角,四个角可以分别设置。 -
border-image
,使用图像充当边界线。
新的背景属性
-
background-size
, 背景图像大小。 -
background-origin
,背景开始绘制的区域,取值有border-box
、padiing-box
和content-box
。就像贴纸一样,将贴纸从指定区域的左上角开始贴。 -
backgound-clip
,背景图像的绘制区域,将该区域外的图像裁剪掉,效果就像先按照background-origin
区域贴好贴纸,然后将background-clip
区域外的贴纸裁剪掉。 -
background-image
,不是新属性,但是多了使用方式,可以指定多个url作为背景。 -
box-shadow
,盒模型阴影。
渐变
-
线性渐变:
liner-gradient
,例子background:linear-gradient(red,blue)
,设置一个从上到下,从red渐变到blue的背景色。如果设置从左到右的渐变色,可以设置一个90度的渐变角度,如backgound:linear-gradient(90deg,red,blue)
。 -
径向渐变:
radial-gradient
, 例子,background: radial-gradient(circle, red, yellow, green)
,设置圆形的径向渐变效果。
新的文本属性
- 文本阴影:
text-shadow:5px 5px green
,文本溢出时该如何处理,取值有:ellipsis
(省略号)、clip
(裁剪)等。 - 文本溢出:
text-overflow:ellipsis
(溢出时显示省略号)。
注:另一个相似属性
overflow
,不针对文本,而是整个内容区域溢出时的处理,取值有hidden
、scroll
等。
- 使用自定义字体:
@font-face
2D转换
- 移动:
translate(x,y)
- 缩放:
scale(x,y)
- 旋转:
rotate(angle)
- 倾斜:
skew(x,y)
过渡
transition-property
:应用过渡的CSS属性。transition-duration
:过渡时长,默认0。transition-delay
:延时。transition-timing-function
:过度效果
动画
定义:
@keyframes myname {
from {property_name: value;}
to {property_name: value;}
}
使用:
div {
animation-name: myname;
animation-duration: 2s;
...
}
多列
把内容分成多部分显示,只有当内容足够多时才会分成多列。
column-count
: 列数column-width
: 列宽column-gap
: 两列之间的间隙column-rule-style
: 分割线的样式column-rule-color
: 分割线颜色column-rule-width
: 分割线宽度
设置元素尺寸可伸缩
resize
,取值horizontal
(水平方向可伸缩)、vertical
(垂直方向可伸缩)、both
(水平和垂直可伸缩)。
一般要与overflow
同时使用才有效果。即会在元素右下角生成可拉伸的三角区,拖动该区域就可以伸缩元素了。