css
Css入门
http://www.peise.net/tools/web/
https://gsnedders.html5.org/outliner/
http://docs.emmet.io/cheat-sheet/
Css字符编码
默认utf-8在css里写 ： @charset “utf-8”
css外部引用 在html里引用可以导入多个
type=” text/css” href=” ***.css” >
css文件导入 @import ”***.css”
可以把头和尾专门放在一个css文件里其他的html引入css
css样式表
样式表优先级从高到低：
行内样式： 写在元素内部 用style设置
文档内嵌样式： 写在head头部，用style它的位置可以放在文件任意位置，但是放在标签中是最佳位置，避免页面出现乱版，提高网页的加载速度。
外部引用样式 ：用link引用 在外部新建一个以.css为扩展名的文件
浏览器样式 ：等于标签本身的样式
取消浏览器本身样式： 把标签样式再设置一遍冲突掉
强制优先级： ！important
继承
外观样式默认继承 子元素继承父元素（字体、颜色）
布局样式默认不能继承（边框等）
强制布局样式继承 标签 {属性：inherit；}
文本属性可以继承的有：font-size font-family font-weight font-style:italic ; text-decoration:none/underline; color:red;
选择器
注意：如果多个选择器修饰同一个元素时css属性会以最后执行的为准。如果有不相同的css属性修饰同一个元素时，则会叠加。
选择器优先级
标签选择器 <类选择器 < id选择器 <行内样式表
通用选择器
* {属性：值；}
元素选择器
标签 {属性：值； }
Id选择器 id=””
#id {属性：值; }
类选择器 class= ”类名”
类名 { 属性：值；}
属性选择器
Css2 [属性] {属性：值；}
例：href就是属性
Css2 [属性=”属性值”] {属性：值；}
例：type=”text”
Css3 [href^=”http”] {属性：值；}
以属性值http开头匹配的属性选择器
Css3 [href$=”.cn”] {属性：值；}
以属性值.cn结尾匹配的属性选择器
[属性*=”字符”] {属性：值；}
属性值包含指定字符的属性选择器
复合选择器
标签，标签，标签 {属性：值；}
也可以将id、类。标签、属性，混合用逗号隔开
后代选择器
标签 标签 {属性：值；}
标签下的所有指定标签不在乎层次关系可以和ID、类、属性混合使用
子选择器
标签>标签>标签 {属性：值；}
必须一层一层往下走
相邻兄弟选择器
标签 + 相邻兄弟标签 { 属性：值;}
只会改变相邻兄弟的值
普通兄弟选择器
标签 ~ 不相邻兄弟标签 { 属性：值;}
只会改变自己以后所有的不相邻兄弟标签的值 css3才有
伪元素选择器
：：first-line { 属性：值; }
只会改变块级元素首行值
标签：：first-line { 属性：值; }
只会改变指定标签块级元素首行值
：：first-leater { 属性：值; }
只会改变块级元素首个字值
标签：：first-leater { 属性：值; }
只会改变指定标签块级元素首个字值
：：selection { 属性：值; }
当鼠标选定文字时文字的值（火狐不支持）
伪类选择器
需要加上前置选择器来限制范围
结构性伪类选择器
1. 根元素选择器
：root {属性：值；}
为html设置值，基本不用
2. 伪类子元素选择器
标签>标签：first-child {属性：值；}
只会改变指定标签子元素第一个元素的值
标签>标签：last-child {属性：值；}
只会改变指定标签子元素最后一个元素的值
标签>标签：only-child {属性：值；}
选择只有一个字元素的那个子元素
标签>标签：only-of-type {属性：值；}
选择子元素只有一个类型的那个子元素
一种类型表示一种标签只有一个而不是不同标签
标签>标签 ：nth-child（数值） {属性：值；}
选择指定子元素第几个子元素
标签>标签：nth-last-child（数值） {属性：值；}
选择指定子元素倒数第几个子元素
标签>标签：nth-of-type（数值） {属性：值；}
选择指定子元素的第几个子元素type特定的是标签不是类型第几个表示是指定的标签总共的的第几个，而不是所有的标签的第几个第几个标签要和特定的标签相同
标签>标签：nth-last-of-type（数值） {属性：值；}
选择子元素只有一个类型的子元素的倒数第几个子元素
3.伪类后代元素选择器
标签 标签：first-child {属性：值；}
改变指定标签所有的后代元素的值
3. Ui伪类选择器一般表单使用
input：enabled {属性：值；}
设置启用状态的表单的值
input：disabled {属性：值；}
设置禁用状态的表单的值
input：checked {属性：值；}
设置复选框默认启用的表单的值
input：valid {属性：值；}
设置验证时（require d）合法的表单的值
input：invalid {属性：值；}
设置验证时（required）不合法的表单的值
input：required {属性：值；}
设置必填的（required）表单的值
input：optional {属性：值；}
设置不必填的（required）表单的值
4. 动态伪类选择器
（a标签）
a：link {属性：值；}
超链接未被访问时显示的状态
a：visited {属性：值；}
用户已访问过的链接
a：hover {属性：值；}
鼠标悬停时显示的状态
a:hover:not(.active) a标签class非.active鼠标悬浮样式
a：avtive {属性：值；}
鼠标激活时不松显示的状态
（文本框input）
input：focus {属性：值；}
获取到光标时现实的状态
a:hover 必须跟在 a:link 和a:visited后面
a:active 必须跟在 a:hover后面
设置首页默认状态: a, a：hover，而其他的a标签则是鼠标悬浮时的状态
5.其他伪类选择器
a：not（[href*=”baidu”]）{属性：值；}
除指定链接外其他链接的值
：empty {属性：值；}
设置空元素的值
：target {属性：值；}
设置定位到锚点时显示的值
标签.类名 类名为某某的标签
5.css颜色
标签 { color：red；}
标签 { color：#fffff；}
标签 { color：#fff；} 两位相同组合成一位6变3
标签 { color：rgb（0，128，128）；}
标签 { color：rgba（0，128，128，0.5）；}最后一位小数设置透明度
标签 { color：hsl（0，100%，100%，）；}
标签 { color：hsl（0，100%，100%，0.5）；}
6.css尺寸
em 与字体大小有关
rem 与跟元素的字号挂钩
ex 与元素子的高度挂钩
px 与像素有关
% 相对于另一个值的百分比
font-size：值px; 字体大小绝对值
font-size：100%; 字体大小相对值根据body
font-size：值em; 字体大小相对值根据body
height: 值em； 标签高度 相对值根据body
height:值px； 标签高度 绝对值根据
width：值px 宽度 绝对值
width：100% 宽度 相对值根据body
width：em； 宽度 相对值根据body
min-width：值px；
min-height：值px；
max-width：值px；
max-height：值px；font-style:normal 字体正常
font-style:italic 字体倾斜
px/16=em
em 是相对单位会根据字体大小自动调整大小
px 也是相对单位但是因为根据分辨率调整所以看起来是绝对的，不会自动调整
% 高不能设置百分比 宽的百分比根据父元素自动调整其最大父元素body
7.css字体
font-variant： small –caps； 小型大写字母
font-variant： normal； 取消小型大写字母
font-variant： italic； 字体倾斜
font-variant： oblique； 字体倾斜
font-weight： bold； 字体加粗 像素是600
font-weight： normal； 字体正常
font-family：楷体;微软雅黑；宋体；
速写
font: small –caps italic bold 值px 宋体;顺序不能变
服务器提供字体
@font-face {
font-family: 字体名称;
src：url（‘字体名称.otf’）;
}
标签 {
font-family: 字体名称;
font-size：值px;
}
8.css文本样式
text-decoration：underline； 底部下划线
text-decoration：overline； 上部下划线
text-decoration：line-through；中部下划线
text-decoration：underline，wavy 颜色；
（位置 形状 颜色）
a {
text-decoration：none
} 让本身有下划线的文本取消下划线
text- transform： lowercase 将大写转换为小写
text-transform： uppercase 将小写转换为大写
text- transform：capitalize； 将英文首字母转换为大写（英文单词之间有空格所以才能转换）
text-shadow：5px 5px 5px 颜色 水平偏移 垂直偏移模糊距离 阴影颜色
text-alige：right； 文本居右
text-alige：center； 文本居中
text-alige：justify； 文本两端对齐
white-space：nowrap； 空白符被压缩文本不换行
white-space：pre； 空白符被保留 文本有换行符（回车）才换行
white-space：pre-line； 空白符被压缩 文本有换行符（回车）或排满才换行
white-space：pre-wrap； 空白符被保留 文本有换行符（回车）或排满才换行
letter-spacing：值px； 设置文本间距
word-spacing：值px； 设置英文文本间距（单词语单词之间）
word-break:break-all; /*针对字母换行*/
line-height：值px 设置行高
line-height：% ； 设置行高
line-height：1.5； 设置行高
text-indent：值px； 设置文本首行缩进
行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
9.css盒子模型
实际宽度 = 自身宽度+左右边框宽度+左右内边距的宽度+左右外边距的宽度
实际高度 = 自身高度+上下边框宽度+上下内边距+上下外边距
padding-top:值px 上内边距
padding-bottom：值px 下内边距
padding-left：值px 左内边距
padding-right：值px 右内边距 内边距会把盒子撑大 padding属性负值是不允许的。
速写
padding: 值px； 同时改变上右下左
padding：值px 值px 改变上下 左右
padding：值px 值px 值px 改变上 右左 下
padding：值px 值px 值px 值px 改变上右下左
margin-top：值px 上部外边距
margin -bottom：值px 下部外边距
margin -left：值px 左部外边距
margin -right：值px 右部外边距
速写
margin: 值px； 同时改变上右下左
margin：值px 值px 改变上下 左右
margin：值px 值px 值px 改变上 右左 下
margin：值px 值px 值px 值px 改变上右下左
何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白
清理浮动后设置margin无效那么就需要做相对定位position：relative
padding会把字体撑大
溢出
x轴与 y轴同理
overflow-y： auto； 垂直方向溢出自动处理没有则不显示
overflow-y： hidden； 垂直方向溢出自动裁剪
overflow： hidden； 溢出自动裁剪
text-overflow：ellipsis 在超出没有超出部分加省略号
text-overflow:clip 修剪文本
text-overflow:string; 使用给定的字符串来代表被修剪的文本
word-wrap:break-word 允许长单词换行到下一行
white-space：nowrap 强制不换行（这三个必须一起使用，而且使用后只显示一行，所以最好只给一行设置）
overflow-y： scroll； 垂直方向不管是否溢出都显示滚动条
元素可见性
visibility：hidden； 隐藏盒子但还占据位置
visibility:visible 显示盒子
display：none 隐藏盒子
display：block 显示盒子
元素类型
块级元素（div）
可以设置宽和高块后边的内容自动换行
行内元素（span）
不能设置宽和高自适应不能自动换行
内联块（图片img）
可以设置宽和高 但元素后的内容不能自动换行
元素转换
块元素转换为行内元素 display: inline;
行内元素转换为块元素 display:block;
块级元素或行内元素转换为行内块元素 display:inline-block
元素浮动
float：left 左浮动
float：right 右浮动
clear：left 左边界不得浮动
clear：right 右边界不得浮动
clear：both 两边都不得浮动
清除浮动
10.边框属性
border-style：solid； 实线边框
border-widrh：值px
border-color：颜色
border-style：dashed； 虚线边框
dotted 圆点线 double 双线（至少三个像素） groove 槽线
inset 具有内嵌效果 outset 具有外凸效果 rigde 脊线边框
设置一个边的样式、颜色、宽度
左：
border-left-color:red;
border-left-style:solid;
border-left-width:1px;
合并：border-left:1px solid red;
右：
border-right-color:red;
border-right-style:solid;
border-right-width:1px;
合并：border-right:1px solid red;
上：
border-top-color:red;
border-top-style:solid;
border-top-width:1px;
合并：border-top:1px solid red;
下：
border-bottom-color:red;
border-bottom-style:solid;
border-bottom-width:1px;
合并：border-bottom:1px solid red;
单独设置颜色、样式、宽度
宽度
border-width:20px 10px 15px 30px;
border-width:20px 10px 15px;
border-width:20px 10px;
border-width:20px;
样式
border-style:dashed dotted groove ridge;
border-style:dashed dotted groove;
border-style:dashed dotted;
border-style:dashed;
颜色
border-color:red blue yellow pink;
border-color:red blue yellow;
border-color:red blue;
border-color:red;
图片边框
border-image-width:20px | border-width:20px; 边框背景图宽度
border-style:solid; 边框样式
border-image-source:url(images/border.png); 引入一个背景图
border-image-slice:20; 裁剪背景图为九宫格
border-image-repeat:round; 制定平铺方式
简写：
border:20px solid;
border-image:url(images/border.png) 20 round;
速写
border：长度值px 类型 颜色；
只设置一个方向
border-top|bottom|left|right：长度类型颜色；
图片边框
border-image-width:20px | border-width:20px; 边框背景图宽度
border-style:solid; 边框样式
border-image-source:url(images/border.png);引入一个背景图
border-image-slice:20; 裁剪背景图为九宫格
border-image-repeat:round; 制定平铺方式
简写：
border:20px solid;
border-image:url(images/border.png)20 round;
上边框
Border-top-color:颜色值;上边框的颜色
Border-top-style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线
Border-top-width:粗细；例如border-top-width:2px;
简写为
Border-top:粗细 线型 颜色;
右边框
Border-right-color:颜色值;上边框的颜色
Border-right-style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线
Border-right-width:粗细；例如border-right-width:2px;
简写为
Border-right:粗细 线型 颜色;
下边框
Border-bottom -color:颜色值;上边框的颜色
Border-bottom-style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线
Border-bottom-width:粗细；例如border-bottom-width:2px;
简写为
Border-bottom:粗细 线型 颜色;
左边框
Border-left-color:颜色值;上边框的颜色
Border- left -style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线
Border- left -width:粗细；例如border- left-width:2px;
简写为
Border- left:粗细 线型 颜色;
圆角边框
border-radius=值px
border-radius=值px值px值px值px （左上右上右下左下）
border-top-right-radius=值px 右上角
border-bottom-right-radius=值px 右下角
border-botto-left-radius=值px 左下角
border-top-left-radius=值px 左上角
背景色
background-color：silver 银灰色
background-color：transparent 透明色
color:rgba(255,0,0,0.3)
background:rgba(0,0,0,0.6) 只允许背景透明，不会影响到内容的不透明度。（常用）
opacity 0.几 透明度可以改变文字与背景色透明度 缺点：使所有内容的不透明
background-image： url（“图片路径”）；添加图片
默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。
background-repeat：repeat-x；水平平铺
background-repeat：repeat-y；垂直平铺
background-repeat：no-repeat；禁止平铺
background-position：top；从顶部向旁边扩展
background-position：left；从左边向旁边扩展
background-position：right；从右边向旁边扩展
background-position：center；从中间向旁边扩展
没有no-repeat的话会从中间向四周扩展有的话只会出现一张
background-position：px px； 图片定位
注意：如果从底部向旁边扩展那么他的块必须有高度 如果是body的背景图片那么html就必须有高度100%
不用no-repeat的话则会平铺（重复）
background-position：值px值px|| 值 top… || top.. left…（设置背景图片位置第一个值是左右位置第二个值上下位置）
上下左右可以组合使用（如果只设置一个值第二个值默认center也可以用px来表示）
background-attachment:背景附件，背景是否随着上方的内容一起滚动
取值 ：fixed 背景固定 scroll 滚动
例如：background-attachment:fixed;
可以插入多个url
background-image: url(img_flwr.gif),url(paper.gif);
background-position: right bottom, left top; //右下角
background-repeat: no-repeat, repeat; //对应设置上面图片的重复和不重复
在一个元素上添加多个背景图像。
background: url(img_flwr.gif) right bottomno-repeat, url(paper.gif) left top repeat;
可以给背景设置大小
background-size:80px 60px;
背景图像的位置区域 注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。
background-Origin属性指定了背景图像的位置区域。
background-Origin ：content-box //背景图像在内容上
background-Origin ：padding-box //背景图像在padding上
background-Origin ：border-box //背景图像在border上
CSS3中background-clip背景剪裁属性是从指定位置开始绘制 如果没有指定背景剪裁则背景颜色在border上
background-clip:content-box; //背景颜色在border内位置会变文字都会缩小
background-clip:padding-box //背景颜色在border内位置不变 文字缩小
background-size: cover; 等比例缩放使图像尽可能覆盖容器
background-size: contain; 等比例放大或缩放使图像完整显示一张
background-size:值px 值px 图片显示长度和高度
background-size: 100% 100%； 图片自适应大小 （只适用火狐）
background-attachment: fixed；图片固定font-family
background-attachment: scroll；图片随窗口一起滚动
background-origin：boder-box；图片渗入边框
background-origin：padding-box；在内边距盒子内部显示图片 默认值
background-origin：concent-box；在盒子内部显示图片
background-clip:border-box|padding-box|content-box
速写
background：背景颜色 背景图片url（路径）平铺方式 center|top|left（也可以用px来设置左右、上下） / 100% border-box |content-box
body {background:#ffffff url('img_tree.png') no-repeat right top;}
如果要写background-size：100% 要用斜杠隔开顺序不能变
background:#fff url(图片地址) repeat-x left top;
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
['background-color'> ||<'background-image'> ||<'background-repeat'>|| <'background-attachment'> ||<'background-position'>] 顺序
表格单元格对齐方式
text-align：center 单元格水平对齐
border-collapse：collapse 合并间隔线
border-spacing： 值px 设置间距（必须在有间距的情况下）
caption-side：top|bottom|left|right 设置标题方位
empty-cells: hide 隐藏空单元格（有间隔才有效果）
table-layout：fixed 文字过长自动换行
border：值px 颜色 虚实线 设置外部边框样式
table tr th，table tr th
border：值px 颜色 虚实线 设置内部边框样式
vertical-align：top|bottom|left|right|center 单元格垂直对齐方式
vertical-align：sub下标
vertical-align：super上标
内部文字图像的垂直对齐
vertical-align:text-top;}
vertical-align:text-bottom;
列表
list-style-type:none 取消列表前面的小黑点给ul设置 disc实心圆circle空心圆square实心方框decimal阿拉伯数字
lower-roman 小写罗马数字 upper-roman大写罗马数字
lower-alpha 小写英文字母 upper-roman大写英文字母
list-style-image:url(images/list.png);设置图片类型的列表点
列表样式
①list-style:;
②list-style-image:url(images/list.png);设置图片类型的列表点
③list-style-position:inside|outside; 设置列表点的位置
outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐
④list-style-type:设置样式 square 方形;但大部分使用图片代替
可以使用背景图实现：
background:url(images/list.png)no-repeat left;
padding-left:15px;
div内文本对齐方式
text-align：center 文本水平居中
vertical-align: -（负）值px 文本必须用span包含才能设置盒子内文本垂直方向位置而且要用负值才能下来
内容简介：
同时设置table, th, td的边框会有双边框。这是因为表和th/ td元素有独立的边界。解决办法：
table{border-collapse:collapse;} //折叠成一个单一的边框
table,th, td{border: 1px solid black;}
td设置垂直对齐：vertical-align:bottom;
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：padding:15px;
box-shadow: 值px 值px 值px 值px 颜色
阴影水平偏移量（正负=右左），阴影垂直偏移量（正负值=下上），阴影模糊值 ，阴影延伸半径（正负值=“延伸与缩小”），阴影颜色
outline：值px 虚实线颜色 边框外部再设置边框
em和rem
使用em和百分比布局更加灵活以后会这样写首先设置body的px值
rem直接基于根元素变化
em 根据父元素变化计算太复杂要先计算父元素再计算子元素
渐变
background-image：linear-gradeint（to top|bottom|right|left颜色，颜色） （火狐适用IE不适用）
background-image：linear-gradient（值deg，颜色，颜色，颜色，颜色）
background-image：linear-gradient（值deg，颜色值%，颜色值%，颜色值%，颜色值%）
white-space：nowarp；禁止换行
overflow：hidden；
text-overflow：ellipsis如果溢出裁剪后显示了一半用省略号显示
表格布局
margin：0 auto 上下为0左右auto 那么左右会推挤就居中了
border-spacing：值px 设置边框
border-collapse：collapse 合并间隔线
浮动布局
loat：left 左浮动
float：right 右浮动
clear：both 两边都不得浮动
border-sizing: border-box；所设置的border和padding不会破坏已设置好的样式，总宽度和高度会自动减去border和padding低版本需要加前缀，前面学过前缀与标准可以同时设置但是值要相同
清除浮动
1）
.clearfix:after{content:"";display:block;clear:both}
.clearfix{zoom:1}
2）
在父元素的样式中加overflow:hidden
3）
定位布局 绝对定位 以文档左上角0 0定位 position:absolute； top：值px left：值px 以窗口参考定位 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动： position： fixed； top：值px left：值px 相对定位 没有浮动在空中以自己为基准点 相当于将盒子从整个文档中抽出，移动到某个位置 postition:relative top：值px left：值px 以相对点做绝对定位 必须设置父级为相对点 父级的右上角 position：relative； 然后在给子盒子设置绝对点 position： absolute； top：值px left：值px 相对定位相对于以前的位置移动，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着 fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。bottom：0 right：10px position:absolute参照定位的元素必须是相对定位元素的前辈元素参照定位的元素必须加入position:relative; 不会脱离文档流 多列布局 需要厂商前缀 火狐 -moz-column：auto 数值；（代表几列） -moz-columns：值px（表示低于这个值则不支持 列数） 数值；（代表几列） -moz-column-width： 值px （每段列数的宽度 会自动分列） -moz-column-count： 数值 （列数） -moz-column-cap：值px 设置间距 -moz-column-rule：值px 虚实线 颜色； （设置列割线）
三列布局：3个盒子 旁边的盒子高度大于中间的定位的盒子 -webkit-background-size:cover; -o-background-size:cover; -ms-background-size:cover; -moz-background-size:cover; -webkit- 谷歌浏览器chrome 和safari -o- 欧朋浏览器 -moz 火狐浏览器 -ms- ie浏览器 -ms-background-size:400px 500px; 元素层级关系 z-index：数值 数值越大浮动越在上边默认0 所有的CSS定位属性 属性 说明 值 CSS bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 auto 2 clip 剪辑一个绝对定位的元素 shape 2 cursor 显示光标移动到指定的类型 url 2 left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto 2 overflow 设置当元素的内容溢出其区域时发生的事情。 auto 2 overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto 2 overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto 2 position 指定元素的定位类型 absolute 2 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto 2 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto 2 z-index 设置元素的堆叠顺序 number 2 IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包： 垂直居中 设置垂直对其方式valign:top|button CSS下拉菜单
设置导航的注意要点 1.给100%的div设置相对点，下拉菜单的div需要设置绝对点 2.下拉菜单div（此时的div位置是在导航的li里，绝对定位后设置top让它下来）设置宽，高，隐藏，绝对定位，背景颜色（此时因为继承的原因，导致设置的背景颜色不成功，需要给菜单里的a标签设置颜色为none并且强制优先级） 3.下拉菜单div下的a标签设置左浮动，设置颜色强制优先级，背景颜色none强制优先级 导航的下拉按钮 { position: relative; display: inline-block; } 导航的下拉内容{ display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; //设置下拉内容与下拉按钮的宽带一致，可设置 width为 100% box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); //box-shadow属性让下拉菜单看起来像一个"卡片"。 padding: 12px 16px; } .dropdown:hover .dropdown-content { display: block; } 设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码 right: 0; 指定一个表的Th，TD元素和黑色边框 table { border-collapse: collapse; } table, td, th { border: 1px solid black; } 设置表格标题的位置 caption {caption-side:left;} right button top input获取焦点后改变背景颜色使用：焦点 input:focus{background-color:yellow;} 如何用dl创建居中的线并且使dd下的a标签一边一个 1.块级元素不能被一条线穿过 内联块可以被一条线穿过 2.可以用margin 的负值来定位盒子的位置 用dt来设置标题 3.用dl宽度=0 高度auto（剪掉多余的线） margin：0 auto设置居中的线 4.用dd设置圆角边框 宽度 高度 border—radio 5.设置dd为圆角边框后 里面的a链接需要用position绝对定位来设置位置 6.内联块有外边距 而float没有外边距所以做盒子的排列时最好用float 7.可以用vertical—align：值 的方式设置盒子的位置 ==================================================================================================== 所有的背景图片都可以用background-position：（左，上）改变位置 宽度去掉滚动条之后是1263px 给一个盒子设置了宽度、背景颜色但是还是不显示那是因为没有设置高度 给1263px盒子做自适应居中而不是width=100%的盒子 li长度固定只要设置ul的长度就能间距不变而改变位置 text-align:center只应用于块级元素vertical-align属性仅仅作用与内联元素 给ul取消小黑点 ul {list-style：outside none none;} ul不靠边要去掉ul的padding position：absolute； top：50% left：50% 这时还不是最中间那么就用margin设置减去背景框的高一半宽一半，而且要用负值， 下面的一个盒子设置了相对点层次比较它高所以它也要设置一个相对点position：relative；把它的层次设置高一点z-index：数值
要把图片排成一行，把行内元素换成内联块display：inline-block 如果不设置图片的宽度，那么图片的描述会把图片撑开 文本首行缩进 text-indent: px用padding也可以 linear-gradient（to right bottom， rgb（0，0，0.7）， rgba（0,0,0,0）） 导航背景图片横铺 background:url(navbg.jpg) repeat-x; 在body里设置字体族 ①text-align：center 文字水平居中 align：center 表格水平居中 margin ：0 auto 盒子水平居中 （如果一个大盒子包含一个小盒子，如果给小盒子设置margin-top就会带着大盒子一起移动，那么就要给大盒子设置position：absolute） 中心对齐,使用margin属性 .container //第一个盒子 { text-align:center; } .center //第二个盒子 { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; text-align:left; } 使用position属性设置左，右对齐 .right { position:absolute; right:0px; width:300px; } 使用float属性设置左，右对齐 .right { float:right; width:300px; background-color:#b0e0e6; } 文字与图片居中 1. 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。 2.当被设置元素为块状元素时用 text-align：center就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素 定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。width:200px;/*定宽*/ margin:20pxauto;/* margin-left 与 margin-right 设置为auto */ 不定宽块状元素：块状元素的宽度width不固定。)不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）： 加入 table标签 设置display:inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置 设置position:relative和left:50%：利用相对定位的方式，将元素向左偏移50%，即达到居中的目的 为什么选择方法一加入table标签?是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。第一步：为需要设置的居中的元素外面加入一个table标签(包括、 table{ border:1px solid; margin:0 auto; } 第二种方法：改变块级元素的display为inline类型（设置为行内元素显示），然后使用text-align:center来实现居中效果/*margin:0;padding:0（消除文本与div边框之间的间隙）*/display:inline; 方法三：通过给父元素设置 float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和 left: -50% 来实现水平居中。 使用专用字体 使用您需要的字体 1. position : absolute text-align=”center|left|right” 文字的对其方式 必须在标签里面加 而且不能加给style 因为这是标签自带的属性！
.left{ width:200px; height:600px; position:absolute; left:0; top:0}
.center{ height:600px;margin:0 310px 0 210px; }
.right{ height:600px; width:300px; position:absolute; top:0; right:0; }
两个盒子布局：
第一个盒子宽度px 高度不设置 第二个盒子宽度设置100% 高度不设置 overflow：hiden
厂商前缀
length
%
inherit
auto
inherit
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
length
%
inherit
hidden
scroll
visible
inherit
hidden
scroll
visible
no-display
no-content
hidden
scroll
visible
no-display
no-content
fixed
relative
static
inherit
length
%
inherit
length
%
inherit
auto
inherit
载入后，初始化新标签的CSS：
/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
垂直居中-父元素高度确定的多行文本（方法一）
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用table td{height:500px;background:#ccc}因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本（方法二）
display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
取消点击时产生的外边框outline：none
设置鼠标手型cursor：pointer
box-shadow: 值px 值px 值px 值px rgba（值值 0.5）
取消倾斜 font-type：normal
取消加粗 font-weight：normal
垂直居顶vertival-align：top
导航的a扩大面积 display:block; 左浮动 float:left;
导航的a浮动后没有撑开最外层div 设置空div
导航每个a标签右边加一条竖线图片 background:url(nav_li_bg.jpg) no-repeat;
导航最外层div最右边一条竖线背景图片 background:url(nav_li_bg.jpg) top right no-repeat;
用关键字top right 第一个y轴 用px时 第一个x轴
ul用图片当做小点 background:url(libg.jpg) 0px center no-repeat;
text-indent:15px;
新闻
垂直方向margin-top失效 float:left;
图片是行级元素设置margin：0 auto 失效 display:block;
图片变圆 border-radius:50%
边界传导解决办法 overflow:hidden;
===============================================================================
、 )
使用百分比和EM组合
在所有浏览器的解决方案中，设置 元素的默认字体大小的是百分比：
body {font-size:100%;} body设置百分比
h1 {font-size:2.5em;} 其他的设置em
@font-face
{
font-family: myFirstFont;
font-weight:bold;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了
1.behavior 滚动的方式
alternate :表示在两段来回滚动
scroll 由一端滚动到另一端 重复
slide 由一端滚动到另一端 不重复
2. direction 滚动的方向 down up left right
3. loop 滚动的次数 默认-1一直滚动
4.scrollamount 设定活动字幕的滚动速度
5. scrolldelay 设置活动字幕两次滚动之间的延迟时间
6.οnmοuseοver="this.stop()"; 鼠标移入停止
οnmοuseοut="this.start()" 鼠标移除开始
你可能感兴趣的:(css)