css基础

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