Please enable JavaScript.
Coggle requires JavaScript to display documents.
css - Coggle Diagram
css
CSS 三大特性
理解
css样式冲突采取的原则
哪些常见的样式会有继承
CSS层叠性
原则
冲突 就近
不冲突
概念 多种css样式的叠加
CSS继承性
继承父标签特性
CSS优先级（重点）
权重
权重叠加
继承的权重是0
权重计算
!important > 内样式 style="" > id > 伪类 > 标签 > 继承
公式
概念
两个或多个元素规则应用在同一元素上
选择器相同则层叠
不同出现优先级
CSS初识
css
作用 修饰文本、图片、布局和外观
概念 css样式表或层叠样式表
目的
html 结构呈现
样式 css
css三种引入方式
内部样式表（内嵌样式表）
外部样式表（外链式）
行内式（内联样式）
html 局限性（了解）
基础2
CSS 背景
背景图片
背景平铺（repeat 铺满背景）
no-repeat
repeat-x 向上平铺
repeat 向上平铺和纵向平铺
repeat-y 纵向平铺
语法 background-repeat
背景颜色
背景位置(position) 重点
length 百分比
语法 background-position
position top bottom 方位
背景附着 滚动或固定
背景简写 background: transparent url(image.jpg) repeat-y scroll center top ;
背景透明
标签显示模式（重点）
显示模式
作用 排列标签
概念 一行或多行
标签分类 块元素和行内元素
块级元素
<h1> <p> 等
特点 占一行 宽高边距可控制 默认宽度 盒子
行内元素(inline-level)
特点 一行显示多个 高宽设置无效
<a> <strong> 等
行内块元素（inline-block）
特点 相邻有空白 有宽高边距
<img />、<input />、<td>
标签显示模式转换 display
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
块转行内：display:inline;
行高 line-height
文字水平居中
测量行高
基础
css选择器
作用
选择标签
基础选择器
类选择器 .className
id选择器 #id（唯一） 不推荐
标签选择器 p{}
通配符选择器 * 不推荐
复合选择器
后代选择器（重点） 父级 子级{}
子元素选择器 父级>子级{} （离父级最近的亲儿子）
目的 精准、精细的选择标签
交集选择器 p.one
并集选择器（重点） .one,p{}
链接伪类选择器（重点）
a:visited
a:hover
a:link
a:active
CSS字体
样式属性
CSS外观属性
text-align:文本水平对齐方式
line-height:行间距
color:文本颜色
text-indent:首行缩进
text-decoration 文本的装饰
font字体
font-family 字体
font-weight 粗细
font-size 大小
font-style 风格
综合设置
顺序 选择器 { font: font-style font-weight font-size/line-height font-family;}
必须 font-size和font-family（才有作用）
其他
sublime
emmet语法
emmet 安装需翻墙
调试工具 chrome