三种引入方式
一、行间式
- 在标签头部的style属性内
- 属性值满足的是css语法
- 属性值用key:value形式赋值,value具有单位
- 属性值之间用;隔开
二、内联式
- 在style标签内（style标签一般作为head的子标签）
- 属性值满足的是css语法
- 属性值用key:value形式赋值,value具有单位
- 属性值之间用;隔开
- 格式：选择器（样式块）
三、外联式
- 在外部css文件中
- 属性值满足的是css语法
- 属性值用key:value形式赋值,value具有单位
- 格式：选择器（样式块）
- 将html与css文件建立联系：html通过link标签链接外部css
四、三种引入方式的优先级
- 注:三种方式间没有优先级
- 三种方式协同布局:
- 重复的属性采用覆盖赋值,保留最后位置的属性值
- 行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
- !important会影响优先级
长度及颜色单位
一、长度单位
- 1in = 72pt
- 1cm = 10mm
- 1em = 1rem = 16px
- 1vw = 1% view width
二、颜色单位
- rgb(255,0,0)
- rgba(255,0,0,0) 六个十六进制位
- hsl()
- 满足#AABBCC形式 可以简写为#abc
样式
字体样式
- 大小 : font-size
- 字重 : font-weight
- 行高 : line-height
- 风格 : font-style
- 字族(可以自定义,多个表示备用):font-family
- css语法 : 空格隔开为多个值赋值 ,隔开为一个值多值赋值
文本样式
- 颜色 : color
- 水平居中方式 : text-align(left center right)
- 字划线 : text-decoration(underline line-through overline none)
- 字间距 : letter-spacing
- 词间距 : word-spacing
- 显示方式:display:inline-block
- 缩进:text-indent
- 垂直排列方式:vertical-align(top baseline bottom)
背景样式
- 背景图片 background-image: url(路径)
- 平铺 background-repeat(no-repeat repeat-x repeat)
- 定位相关的涉及到滚动时的效果 background-attachment(scroll fixed)
- 整体设置 background(所有设置都可以直接写)
基础选择器
统配选择器
- 匹配所有html,body,body中的所有具有显示效果的子标签
标签选择器
- 匹配指定标签名的对应所有标签
类选择器
- 匹配指定类名对应的所有标签
id选择器
- 匹配指定id名对应的唯一标签(html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个)
总结
- 通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式)
- 标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
- 基本选择器优先级:id > class > 标签 > 统配