样式表书写位置
内嵌式写法
<style type="text/css"></style>
外链式写法
<link rel="stylesheet" href="1.css">
行内式写法
<h1 style="font-size:16px"></h1>
三种写法特点:
★内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
★外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
★行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。（不推荐使用）
选择器
基础选择器
标签选择器
类选择器（.）
id选择器（#）
通配符选择器（*）
注意：类选择器命名规则
◎不能用纯数字或者数字开头来定义类名
◎不能使用特殊符号或者特殊符号开头（_）来定义类名
◎不建议使用汉字来定义类名
◎不推荐使用属性或者属性的值来定义类名
复合选择器
交集选择器
后代选择器（空格）
子代选择器（>）
并集选择器（，）
属性
文本属性
font-size:16px; 文字大小，默认字体大小为16px
font-weight: 700; 值从100-900，文字粗细，不推荐使用font-weight:bold;
font-family:微软雅黑/microsoft yahei/unicode编码; 文本的字体
font-style: normal | italic; normal 默认值 italic 斜体
line-height: 行高
文本属性连写文字大小和字体为必写项
font:italic 700 16px/40px 微软雅黑,宋体;
背景属性
background-color:red; 背景颜色
background-image:url(“1.png”); 背景图片
background-repeat: repeat | no-repeat | repeat-x | repeat-y 背景平铺
background-position: left | right | center | top | bottom 背景定位
方位值只写一个的时候，另外一个值默认居中
写2个方位值的时候，顺序没有要求
写2个数值的时候，第一个值代表水平方向，第二个值代表垂直方向
background-attachment: scroll | fixed 背景是否滚动
连写：
background:red url(1.png) no-repeat 30px 40px scroll;
连写的时候没有顺序要求，url为必写项
行高属性
行高是可以继承的
行高的单位: 20px 2em 150% 2 文字大小：20px
行高单位除了像素以外，行高都是与文字大小乘积
嵌套盒子的行高继承：
不带单位时，行高是和子元素文字大小相乘
em和%的行高是和父元素文字大小相乘
行高以像素为单位，就是定义的行高值
input属性
border:0 none;去掉边框
outline-style:none;去掉轮廓线
resize:none;禁止文本框拖拽
li属性
list-style:none; 去除前边的标识符号
图片和文字垂直居中对齐
vertical-align:middle|top|bottom;
vertical-align对inline-block最敏感
默认属性是:vertical-align:baseline
模拟鼠标
cursor: pointer; 鼠标变成小手
cursor: move; 鼠标变成四角箭头
cursor: text; 鼠标变成工形插入条光标
cursor: default; 鼠标变成小白
圆角矩形
border-radius: 宽/高一半；
border-radius: 50%；
border-radius: 0.3em；
border-radius: 左上角 右上角 右下角 左下角；
a链接无效
<a href="javascript:;">1111111111</a>
<a href="javascript:void(0)">1111</a>
首行缩进text-indent
文本的首行进行缩进
text-indent:40px;/2em(代表2个字符);
标签显示方式分类
块元素
典型代表,Div,h1-h6,p,ul,li
特点:
★独占一行
★可以设置宽高
★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
行内元素
典型代表 span ,a, ,strong , em, del, ins
特点：
★在一行上显示
★不能直接设置宽高
★元素的宽和高就是内容撑开的宽高
行内块元素（内联元素）
典型代表 input img
特点：
★在一行上显示
★可以设置宽高
块元素和行内元素的转换
display:block; 行内转块
display:inline; 块转行内
display:inline-block; 块或行内转行内块
css三大特性
-
层叠性
样式发生冲突的时候，总是执行后边的样式，和调用顺序无关。
-
继承性
文字的所有属性都可以被继承
特殊： h1-h6文字大小不能被继承 a标签文字颜色不能被继承
-
优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
特点：继承的权重为0，权重会叠加
权重
left的权重高于right，top的权重高于bottom，当两者同时存在的时候优先执行权重高的
链接伪类
a:link{属性:值;} 链接默认状态 a{属性:值;}是一样的
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放上去显示的状态
a:active{属性:值;} 链接激活的状态
:focus{属性:值;} 获取焦点
注意:如果四个链接伪类都使用，按顺序书写。
文本修饰
text-decoration: none | underline | line-through
盒子模型
border边框
border-top-style: solid 实线 线型
dotted 点线
dashed 虚线
border-top-color 边框颜色
border-top-width 边框粗细
border-left | right | bottom | top
边框属性的连写
border：red solid 5px;
特点：没有顺序要求，线型为必写项
去除边框
input{
border:0 none; /*去掉边框*/
outline-style:none;/*去掉轮廓线*/
}
边框合并
border-collapse:collapse;
获取光标焦点
label for id
<label for="username">用户名：</label><input type="text" id="username">
.username:focus { background:red; }
内边距
padding-left | right | bottom | top
padding: 20px; 上右下左(顺时针)
内边距可以撑大盒子，继承的盒子不会被撑大
行内元素可以定义左右的内外边距，上下会被忽略掉
外边距
margin
垂直方向外边距合并
两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
嵌套的盒子外边距塌陷
解决方法:
1 给父盒子设置边框
2 给父盒子overflow:hidden; bfc 格式化上下文
<http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html>
文档流（标准流）
元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行
浮动
浮动布局
float: left | right
特点：
元素浮动之后不占据原来的位置（脱标）
浮动的盒子在一行上显示
行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）
作用：
文本绕图（图片设置浮动）
制作导航
网页布局
清除浮动
- 当父盒子没有定义高度，子盒子浮动之后 不占位置 子盒子不会撑开父盒子，下边的标准流盒子会跑到子盒子下面。
- 清除浮动不是不用浮动，清除浮动产生的不利影响。
清除浮动的方法
clear: left | right | both
工作里用的最多的是clear:both;
-
额外标签法
<div> <div style="float:left;"></div> <div style="float:right;"></div> <!--在最后一个浮动元素后添加标签--> <div style="clear:both;"></div> </div> -
给父级元素使用
overflow:hidden;
BFC原理 注意：如果有内容出了盒子，不能使用这个方法 -
单伪元素标签法
浮动元素的父元素直接调用，也就是没有定义高度的盒子
.clearfix:after {
content:"";
display:block;
height:0;
line-height:0;
visibility:hidden;
clear:both;
}
<!--兼容ie浏览器-->
.clearfix {
zoom:1;
}
- 双伪元素标签法
.clearfix:before .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1;
}
定位
定位方向: left | right | top | bottom
静态定位
position:static;
标准流，默认值，就是文档流。
绝对定位(看脸型)
position:absolute;
特点：
自身从浏览器出发。
绝对定位之后，元素不占位置，会脱标。
嵌套的盒子，父元素没有给自身绝对定位，子元素绝对定位，子元素从浏览器出发设置自身位置。
嵌套的盒子，父元素绝对定位，子元素绝对定位，子元素从父元素出发设置自身位置。
行内元素转成行内块。（不推荐使用）
相对定位（自恋型）
position:relative;
位置从自身出发。
设置相对定位之后，还占据原来的位置。
子绝父相，子元素绝对定位，父元素相对定位。
嵌套的盒子，父元素相对定位，子元素绝对定位，子元素从父元素出发设置自身位置。
不能将行内元素转成行内块。
固定定位
position:fixed;
特点:
位置从浏览器出发。
不占据原来的位置，会脱标
可以将行内元素转换为行内块。（不推荐使用）
定位盒子的居中显示
margin:0 auto; 只能让标准流的盒子居中对齐。
定位的盒子居中：先向右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
规避脱标流
尽量使用标准流。 标准流解决不了的使用浮动。 浮动解决不了的使用定位
<!--设置盒子左边距为auto，将盒子冲到右边-->
margin-left:auto;
层级
使用注意：
1.必须有定位（static除外）
2.用z-index来控制层级数（不给默认为0）
层级高低的划分：
定位 z-index=0
标准流盒子的文字 浮动
标准流盒子
定位 z-index=-1
浮动的盒子比标准流盒子高，能够遮挡住标准流盒子，但遮挡不住里面的图片和文字
overflow
overflow:visible 默认值，内容不会被修建，会呈现在元素框之外
overflow:hidden 多出的内容会被修剪
overflow:scroll 用滚动条显示多余的内容，滚动条一直存在
overflow:auto 多出部分用滚动条显示
隐藏盒子的问题
overflow:hidden; 隐藏盒子超出的部分
display:none; 隐藏盒子而且不占位置（用的最多）
visibility:hidden; 隐藏盒子而且占位置
opacity:0; 隐藏盒子而且占位置
position-left/top/...:-999px; 隐藏盒子而且占位置
css可见性
overflow:hidden; 溢出隐藏
visibility:hidden; 隐藏元素，隐藏之后还占据原来的位置
常配合js使用
display:none; 隐藏元素，隐藏之后不占据原来的位置
display:block; 元素可见
css之内容移除（网页优化）
- text-index:-5000em;
- 将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏
css精灵图
属性选择器
input[type=text][class]{
width:100px;
}
引入icon图标
网站名（带www.）/favicon.ico 下载所有网站的图标
制作icon的网站：bitbug.net
<link rel="shortcut icon" href="favicon.ico" />
emmet快捷键
生成id名和类名
标签名.类名#id名+tab
没有标签名.类名+tab ==>div
生成同级元素
标签名+标签名+标签名 “+”tab
生成子类标签
标签名>子标签名>子标签名>子标签名+tab
标签名>子标签名>子标签名>子标签名^^子标签名+tab
带固定数量的标签:
ul>li*5+tab
带有序号名称
ul>li.abc$*3 + tab
生成带有内容的标签：
ul>li>a[#]{item}*5
css
width:30px==>w30+tab
height:30px==>h30+tab
margin:30px==>mg30+tab
padding:30px==> pd30+tab
line-height:12px==>lh12px+tab
background==>bg+tab
其它详见emmet语法
标签包含规范
- div可以包含所有的标签。
- p标签不能包含div h1等标签。
- h1可以包含p，div等标签。
- 行内元素尽量包含行内元素，行内元素不要包含块元素。
css初始化代码
<!--腾讯-->
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
<!--新浪-->
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
<!--淘宝-->
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
1394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
