CSS 层叠样式表
CSS的使用方式
- 在元素的style属性内 行内式 内联式(行内样式:就是代码写在具体网页中的一个元素内;比如:
<div style="color:#f00"></div>
) - 写在
<style>
标签内 - 写到外部css文件中,用
<link>
关联到HTML中, @import
可以引入css,用于css中引入css
CSS的格式
选择器{
属性:值;
属性:值;
}
CSS的长度单位
- px 像素
- em 相对于默认大小 倍数
- 百分比
- pt(磅) cm(厘米) mm(毫米) 绝对单位
颜色表示
-
颜色的英文单词
red orange yellow green cyan(青) blue purple black white pink gray
-
rgb方式
rgb(123,45,178) rgb(0~255,0~255,0~255) rgb(百分比,百分比,百分比)
- rbg(255,0,0) 红色
- rbg(255,255,255) 白色
- rgb(0,0,0) 黑色
- rgb(100,100,100) 灰色。 只要三个都一样,就是灰色
-
十六进制
-
34afa1
-
ff0000 红色 可以简写 #f00
-
00ff00 绿色 简写 #0f0
-
0000ff 蓝色 简写 #00f
-
ffffff 白色 简写 #fff
-
000000 黑色 简写 #000
-
cccccc 灰色 简写 #ccc
-
336699 简写 #369
-
CSS注释
/* 注释 */
CSS选择器
- 元素选择器
- ID选择器 #id名
- CLASS选择器 .类名
- 全局选择器 *
- 关联选择器-后代元素选择器 slecter selecter
- 关联选择器-子元素选择器 selecter>selecter
- 组合选择器 两种基本选择器的组合
- 伪类选择器 love-hate
- :link 默认的
- :visited 访问过的
- :hover 当鼠标悬浮在上面时
- :active 点击时
选择器的优先级
- ID >CLASS > Tag(标签)
- 组合选择器 ID权重100 class权重10 Tag权重1
CSS的属性
字体属性
- font-family(字体族科)
衬线字体(serif 意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。常用的serif(衬线字体)字体为Times New Roman、Georgia、宋体) 非衬线字体(sans-serif sans serif是无衬线字体,没有这些额外的装饰,而且笔画的粗细差不多。 常用的sans serif(无衬线字体)字体为Verdana、Arial、雅黑。) - font-style 字体风格 normal(默认)/itailc(斜体)/oblique(强制变斜)
- font-weight 字体粗度 normal(默认)/bold(加粗)/bodler(更粗)/lighter(细)/数字(>=600 粗)
- font-variant 字变形 noraml(默认)/small-caps(小型大写字母)
- font-size 字体大小
- font 统一设置
font:[字体风格][字体变形][字体加粗]<字体大小><字体族科>
font:[style/weight/variant] size family
颜色属性
- color 值:英文(blue...)/rgb/16进制
文本属性
- letter-spacing 字母间隔 值为长度,可以是负值
- word-spacing 单词间距
- text-decoration 文字修饰
- none
- underline 下划线
- overline 上划线
- line-through 中划线 删除线