css 网页表现
语法 selector{attribute: value;}
标签选择器 label{attribute: value;}
类选择器 .class{attribute: value;}
ID选择器 #id{attribute: value;}
通配符选择器 *{attribute: value;}
交集选择器 selectorselector{attribute: value;}
后代选择器 selector selector{attribute: value;}
子代选择器 selector>selector{attribute: value;}
并集选择器 selector,selector{attribute: value;}
字体尺寸 font-size
字体粗细 font-weight
字体族 font-family
字体样式 font-style
行高 line-height
字体 font: font-style font-weight font-size/line-height font-family
颜色 color
背景 background
背景颜色 background-color
背景图片background-image
背景重复 background-repeat
背景位置 background-position
背景附件 background-attachment
文本对齐 text-align
文本缩进 text-indent
块元素 独占一行 宽高 嵌套 display:block;
行内元素 在一行显示 无宽高 display:inline;
行内块元素 在一行显示 宽高 display: inline-block;
优先级 !important>行内样式>id>类>标签>默认样式
链接 a:link{attribute:value;}
链接后 a:visited{attribute: value;}
链接悬停 a:hover{attribute: value;}
链接激活 a:active{attribute: value;}
焦点 :focus{attribute: value;}
文本修饰 text-decoration
边框 border
边框样式 border-style
边框颜色 border-color
边框宽 border-width
边框塌陷 border-collapse
内边距 padding
外边距 margin
ps
新建 Ctrl+N
打开Ctrl+o
显示隐藏标尺 Ctrl+R
清除参考线 视图---清除参考线
放大镜 Z Alt+左键 放大
抓手 H
面板 F8
测距 矩形选框M 面板 F8
标准流 元素自上而下,自左而右,块元素独占一行,行内元素在一行显示
浮动流 浮动元素不占据原来位置(脱标) 浮动元素在一行显示 float
溢出隐藏 overfloat
静态定位 position:static;
绝对定位position:absolute; 不占据原来位置(脱标) 位置从定位元素开始
相对定位 position:relative; 位置从自身开始 占据原来位置
固定定位 position:fixed; 不占据原来位置(脱标) 位置从浏览器开始
标准流盒子居中 margin:0 auto;
定位盒子居中 position:absolute; left:50%;margin-left:-一半
尽量使用标准流 标准流解决不了使用浮动 浮动解决不了使用定位
图片和文字垂直 vertical-alian
可见性 visibility:hidden 隐藏后占据原来位置
display:none 隐藏后不占据原来位置
隐藏位置 height:0;padding:正值;overflow:hidden;
emmet快捷键
html5结构 !+Tab
id #id+Tab
类 .类名+Tab
同级元素 selector+selector+Tab
嵌套标签selector>selector+Tab
数量 selecotr*number+Tab
序号selector$+Tab
内容{}+Tab