选择器{属性:值； 属性:值;}
|
属性 |
解释 |
|
Width:20px; |
宽 |
|
Height:20px; |
高 |
|
Background-color:red; |
背景颜色 |
|
font-size:24px; |
文字大小 |
|
text-align:left | center| right |
内容的水平对齐方式 |
|
Vertical-align:middle居中| top bottom |
垂直对齐方式 |
|
text-indent:2em; |
首行缩进 |
|
Color:red; |
文字颜色 |
|
line-height: 80px; |
行高 |
CSS嵌入式
<style type="text/css">
</style>
CSS链入式
<link rel="stylesheet" href="11css.css">
display块元素、行内元素
块级元素（block） <h1>...<h6>,<p>,<div>,列表
内联元素(inline) <span>,<a>,<img>,<strong> ...
块元素转行内元素display:inline;
行内元素转块元素display:block;块元素的默认值 元素会显示为块元素 前后带换行符
块和行内元素转行内块元素display:inline-block;
None 不会被显示
inline; 内联元素的默认值 元素会显示内联元素 前后无换行符
block;块元素的默认值 元素会显示为块元素 前后带换行符
inline-block; 行内块元素 元素既具有内联元素特征 也有块元素特征
继承 h系列不能继承文字大小。a标签不能继承文字颜色。
链接伪类
a:link{属性:值;} 链接默认状态
a:active{属性:值;} 链接激活的状态
a:hover{属性:值;} 鼠标放到链接上显示的状态
a:visited{属性:值;} 链接访问之后的状态
：focus{属性:值；} 获取焦点
文本修饰
text-decoration: none 去除修饰| underline 添加下划线 | line-through 添加删除线 | overline 设置文本的上划线
文本阴影
Text-shadow: color x-offset y-offset blur-radius;
Color颜色 x-offset X轴位移，用来制定阴影水平位移量
y-offset Y轴位移，用来指定阴影垂直位移量
blur-radius 阴影模糊半径，代表阴影向外模糊的模糊范围
浏览器兼容性 IE+ Firefox 3.5+ Chrome 2.0+ Opera 9.6+ Safari 4.0+
看兼容性网址 caniuse.com
背景属性
background-color 背景颜色
background-color: rgba(80,80,80, 0.2);透明度
background-image 背景图片
背景平铺
Background-repeat repeat(默认) | no-repeat 不重复| repeat-x | repeat-y
背景定位
Background-position left 左 | right | center 中| top | bottom |
背景颜色渐变
Background: Linear-gradient(position,color1 ,color2,....)
列 Background: Linear-gradient(to left,color1 ,color2,....)
从右（color1）到左（color2）
Position 渐变方向
兼容Webkit内核的阅览器
-webkit- Linear-gradient(position,color1 ,color2,....)
背景图片的大小控制
Background-size:auto 自动 | 100px | 50% | percentage | cover | contain
percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是
相对于元素的宽度来计算的
Cover 整个背景图片放大填充了整个元素
Contain 让背景图片图片保存本身的身高比列，将背静图片缩放到宽度或者
高度正好适应所定义背景的区域
列：background-position:left bottom;
background-position:20px 30px; 左右 上下
background: url("../img/cc.jpg") red no-repeat 0px 30px ;
行高
浏览器默认文字大小：16px
行高：是基线与基线之间的距离
行高=文字高度+上下边距
列
div{
line-height: 80px;
height: 80px;
border:1px solid red;
}
边框
Border-top-style: solid 实线
dotted 点线
dashed 虚线
double 双线
None 无 hidden隐藏
Border-top-color 边框颜色
Border-top-width 边框粗细
边框属性的连写 特点：没有顺序要求，线型为必写项。
border-top:2px blue dotted;
四个边框值相同的写法
border:1px red solid;
边框合并border-collapse:collapse;
禁止边框撑大
box-sizing: border-box禁止边框撑大 | ontent-box 默认的
圆角边框
Border-radius:10px 20px 30px 40px; 左上 右上 右下 左下
左半圆Border-radius:10px 0px 0px 10px;
上半圆Border-radius:10px 10px 0px 0px;
盒子的阴影
Box-shadow:inset x-offset y-offset blur-radius color;
Inset 阴影的类型 内阴影
x-offset X轴位移 指定阴影水平位移量
y-offset Y轴位移 用来指定阴影垂直位移量
blur-radius 阴影模糊半径阴影向外模糊的模糊范围
Color 阴影颜色 定义绘制阴影时所用的颜色
内边距
Padding-left 左 | right 右 | top 上 | bottom下
Padding 连写
Padding: 20px; 上右下左内边距都是20px
Padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
外边距
margin-left 左 | right 右 | top 上 | bottom 下
外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px 30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
浮动
Float: left 左浮动
Float:right 右浮动
Float:none 无浮动 默认值。元素不浮动，并会显示在其文本中出现的位置
清除浮动clear
Clear:left 在左侧不允许有浮动
Clear:right 在右侧不允许有浮动
Clear:both 在左右两侧不允许有浮动
Clear:None 默认值 允许浮动元素出现在两侧
After方法
列：<style type="text/css">
.clear:after{
content: "";/*在clear后面添加内容为空*/
display: block;/*把添加的内容转化为块元素*/
clear: both;/*清除这个元素两边的浮动*/
}</style>
<div class="clear">
<div></div>
</div>
Overflow溢出处理 overflow:Visible
Visible 默认值 内容不会修剪 会呈现在盒子之外
Hidden 内容会修剪 并且其余内容是不可见的
Scroll 内容会被修剪 但是浏览器会显示滚动条以便查看其余内容
Auto 如果内容被修剪 则浏览器会显示滚动条以便查看其余的内容
Position定位
Absolute 绝对定位
Relative 相对定位
选择器
|
选择器 |
类型 |
功能描述 |
|
E F |
后代选择器 |
选择匹配的F元素，并且匹配的F元素包含在匹配的E元素内 |
|
E>F |
子选择器 |
选择匹配的F元素，并且匹配的F元素是匹配的E的子元素 |
|
E+F |
相邻元素选择器 |
选择匹配的F元素，并且匹配的F元素位于匹配的E元素后面 |
|
E~F |
通用兄弟选择器 |
选择匹配的F元素，并且匹配的E元素后面的所有F元素 |
结构选择器
|
选择器 |
功能描述 |
|
F E:first-child |
作为父元素（F）的第一个子元素的元素E |
|
F E:last-child |
作为父元素（F）的最后一个子元素的元素E |
|
F E:nth-child(n) |
选择父级元素F的第n个子元素E，（n可以使1,2,3）关键字为even odd |
|
E:first-of-type |
选择父元素内具有指定类型的第一个E元素 |
|
E:last-of-type |
选择父元素内具有指定类型的最后一个E元素 |
|
F E:nth-of-type(n) |
选择父级元素F的第n个子元素E |
属性选择器
|
选择器 |
功能描述 |
|
E[attr] |
选择匹配具有属性att的E元素 |
|
E[attr=val] |
选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写） |
|
E[attr^=val] |
选择匹配元素E，且E元素定义了属性attr,其属性是以val开头的任意字符串 |
|
E[attr$=val] |
选择匹配元素E，且E元素定义了属性attr,其属性是以val结尾的任意字符串 |
|
E[attr*=val] |
选择匹配元素E，且E元素定义了属性attr,其属性包含了val ，换句话说，字符串val与属性值中的任意位置相匹配 |