css层叠样式表
css的使用方式
- 在元素的style属性内 行内样式 内联样式
- 写在
<style>标签内 - 写在外部css文件中,用
<link>关联到HTML中 @import可以引入CSS,用于CSS中引入CSS
CSS的格式
选择器{
属性:值;
属性:值;
}
css的长度单位
- px 像素
- em 相对于默认大小 倍数
- 百分比
- pt(榜) cm(厘米) mm(毫米) 绝对单位
颜色表示
-
颜色的英文单词
red orange yellow green cyan(青) blue purpule(紫) black white pink(粉红色) gray(灰)
-
rgb方式
rgb(123,45,178) rgb(0~255,0~255,0~255) rgb(百分比,百分比,百分比)- rgb(255,0,0) 红色
- rgb(255,255,255) 白色
- rgb(100,100,100) 灰色 只要三个都一样,就是灰色
-
十六进制
-
34afa1
-
ff0000 红色 可以简写#f00
-
00ff00 绿色 简写 #0f0
-
0000ff 蓝色 简写 #00f
-
ffffff 白色 简写 #fff
-
000000 黑色 简写 #000
-
336699 简写 #369
css注释
/*注释*/
CSS选择器
- 元素选择器
- ID选择器 #id名
- class选择器 .类名
- 全局选择器
- 关联选择器-后代元素选择器 slecter selecter
- 关联选择器-子元素选择器 selecter>selecter
- 组合选择器 两种基本选择器的组合
- 伪类选择器 (love-hate)
- :link
- :visited
- :hover
- active
提升权重 !important
行内>ID>class标签
选择器的优先级
- ID>CLASS>TAG
- 组成选择器 ID权重100 class权重10 tag权重1
css属性
字体属性
- font-family 衬衫字体( serif) 非衬衫字体( sans-serif)
- font-style 字体风格 normal(默认)/itailc(斜体)/oblique(强制变斜)
- font-weight 字体粗度 normal(默认)/bold(加粗)/lighter(细)/数字(>=600 粗)
- font-variant 字变形 normal(默认)/small-caps(小型大写字母)
- font-size 字体大小
- font 统一设置
font:{style/weight/variant} size family
颜色属性
- color 值:字母/reg/16进制
文本属性
- letter-spacing 字母间距 默认0px
- word-spacing 单词间距 默认0px
- text-decoration 文本修饰
- none
- underline 下划线
- overline 上划线
- line-through 中划线 删除线
- text-align 水平对齐方式 left(默认)/right/center
- vertical-align 垂直对齐(基于文字的基线) baseline/bottom/top/middle/sub/super/text-top/text-bottom/百分比
- text-indent 首行缩进 长度单位
- line-height 行高 长度单位 设置行高=高 使一行文字垂直居中
font:[style/variant/weight]size/line-height family
css背景属性
- background-color 背景颜色
- background-iamge 背景图片 url()
- background-repect 背景图片的平铺方式 repeat(默认)/repeat-x/repeat-y/no-repeat
- background-position 背景图片定位 left/center/right/长度单位 top/center/bottom/长度单位
- background-attachment 背景图片固定或滚动 scroll(默认)/fixed
background:color image repeat postion
css边框属性
- border-width 边框的宽度 长度单位
- border-color
- border-style 边框线的风格solid(实线)/dotted(点划线)/dashed(虚线)/double(双线)...
- border
border:width sytle color - border-left/right/top/bottom
css鼠标光标属性
- cursor 值 default(箭头)/pointer(手)/move(四周有箭头)/crosshair(十字)/text(I)/wait(转动的圆圈)
css列表属性
- list-style-type 列表项的图形 disc/circle/square/decimal/lower-roman/upper-ram
- list-style-postion 列表项图形的位置 outside/inside
- list-style-image 自定义列表图形 url
- 最常见的设置
list-style:none
css表格属性
- table-layout 表格布局方式 auto/fixed
- border-collapse 合并单元格边框 separater/collapse
- border-spacing 单元格间距 长度单位
- caption-side 表格标题位置 top/bottom
- empty-cells 没有内容的单元格是否隐藏 show/hide