引入方式+样式+选择器

三种引入方式

一、行间式

• 在标签头部的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 > 标签 > 统配