强哥CSS学习笔记

html嵌套css样式：
1.外部（推荐）
2.内部
3.内联（不推荐）

css优先级
1.内联
2.id选择器
3.class选择器
4.标签

css长度单位：
1.px
2.em (14px)

css选择器：
常用选择器
基本选择器
层级选择器
伪类选择器
属性选择器

常用选择器：
1.标签
2.id
3.class
4.关联
.div1 .imgcls{

}

5.组合
.div1 .imgcls,.div2 .imgcls{

}

基本选择器：
1.:first-child
2.:first-letter 第一个字符
3.:first-line 第一行
4.:last-child
5.:nth-child(2)

层级选择器:
a,b 和
a b 选择后代
a>b 选择子集
a+b a后面的b

伪类选择器：
:hover 划过上方
:focus 获得焦点
::selection 选择

属性选择器：
[id] 含有属性
[id=use1] 属性等于
[name*=us] 包含us
[name|=en] 以en开头
[name^=en] 以en开头
[name$=en] 以en结尾

常见的样式属性和值：
1.字体和颜色
2.背景
3.文本
4.边框
5.鼠标光标
6.列表
7.定位
8.内外边距
9.浮动和清除浮动
10.滚动条
11.显示和隐藏

字体：
font:
font-size: 字体大小
font-family: 字体类型
font-style: 字体样式(斜体italic)
font-weight: 字体粗细(bold加粗)

文本：
letter-spacing 字间距
word-spacing 词间距
text-decoration none|underline|overline|line-through 横线
text-align left|center|right 文字对齐
text-indent 首字母缩进
line-height 行高
color 颜色
word-break 自动换行

背景：
background
background-color 背景色
background-image 背景图片
background-repeat 背景图片是否重复（平铺）
background-attachment 背景图随内容滚动（用在body身上,其他不适用）
background-position

边框：
1.border-style solid实线 dotted小虚线 dashed小横线 double双线 groove凹 ridge凸 inset凹槽 outset凸槽
2.border-width
3.border-color
4.border-left right bottom top

鼠标：
cursor:crosshair十字 pointer小手 text文本 wait等待 default默认 help帮助

列表：
list-style-type

1.none空|desc实心圆|circle空心圆|square实心方块|decimal数字|lower-roman小写罗马数字|upper-roman大写|lower-alpha小写字母|upper-alpha大写字母
2.list-style-type:none; 列表前面的选项图标取消
3.text-decoration:none; a标签下划线取消

尺寸：
height:
max-width:
max-height:

文本框：
textarea
width:
height:
resize

样式继承：
文字有关的样式会继承下去
font-size:
font-family:
font-style:
color:
line-height:
font-weight:
word-spacing:
等

表格：
border-collapse: collapse边框合并|separate不合并
border-spacing: 间距

定位：
1.position: absolute绝对定位|relative相对定位
2.top
3.left
4.定位
5.z-index z轴

绝对定位和相对定位：
1.相同点：
脱离文档流，在文档流上方
2.不同点
坐标系不同，绝对的坐标系在浏览器左上角，相对的坐标系在自己的左上角
占位
绝对不占位，相对占位

div绝对居中：
1.父div：position:relative;
2.子div：position：absolute

外边距：
margin-right:
margin-left:
margin-top:
margin-bottom: 10px;
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

内边距：
padding

浮动：
float

清除(阻止)浮动
clear left|right|both
可以有效防止盒子回缩
<div style='clear:both'></div>

滚动条：
overflow: hidden隐藏|auto自动|scroll出现滚动条

显示和隐藏：
1.display:none隐藏|block块显示|inline行显示
2.visibility:visible显示|hidden隐藏

边框样式：
1.border-radius
第一个值是水平半径。
如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
如果任意一个值为0，则这个角是矩形，不会是圆的。
值不允许是负值。
2.box-shadow <length>水平偏移 <length>垂直偏移 <length>阴影模糊值 <length>阴影外延值 || <color>颜色
box-shadow: 5px 5px 5px 0px #999;
none： 无阴影
<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>： 设置对象的阴影的颜色。
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

3.border-image:
border-image: url('b.png') 26 26 round;
stretch | repeat| round | space
stretch： 指定用拉伸方式来填充边框背景图。
repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

4.background-size: 属性规定背景图片的尺寸
5.background-origin: 属性规定背景图片的定位区域
border-box边框区域
padding-box内边距区域
content-box有效区域

6.text-shadow 文字阴影
text-shadow:3px 3px 3px #f00;
7.word-wrap:break-word;单词折行
类似word-break
8.字体样式
@font-face
{
font-family: my;
src:url('my.ttf');
}

2D样式：
1.translate() 移动
2.rotate() 会改变坐标系
3.scale() 比例

3D样式：
1.rorateX(30deg);
2.rorateY(30deg);

多栏样式：
column-count
column-gap
column-rule

用户界面：
1.轮廓样式
outline-offset