css总结

1.css简介

css注释 /* */
浏览器私有属性
- chrome，safari: -webkit-
- firefox: -moz-
- IE: -ms-
- opera: -o-
属性值语法包括基本元素、组合符号、数量符合
- 组合符号
  1. 空格：必须按顺序出现，例如：
  2. &&: 必须出现顺序无所谓
  3. ||：至少出现一个顺序无所谓
  4. |：只能出现一个
  5. [ ]: 组合符号，括号内看成一个整体和外部计算
- 数量符号
  1. 无符号：只能出现1次
  2. +：可以出现1或n次
  3. ？：可以出现0或1次
  4. {2，4}：最少出现2次，最多出现4次
  5. *：可以出现0或1或n次
  6. #：可以出现1或n次，中间用逗号（，）隔开
@规则语法
- @media 媒体查询
- @keyframes css动画
- @font-face 引入外部字体

2.选择器

选择器分为简单选择器、伪元素选择器、组合选择器

简单选择器

标签选择器 p{}
类选择器 .special{}
id选择器 #banner{}
属性选择器
1. [att]:具有括号内属性的元素 [disabled] {}
2. [att=val]:选择属性名为att属性值为val的元素，相当于id选择器 [type=button] {}
3. [att~=val]: 选择属性名为att属性值带有val（空格分割）的元素，相当于类选择器 [class~=sports] {}
4. [att|=val]: 选val、val-开头的 [lang|=en] {}
5. [att^=val]: 选val开头的 [href^='#'] {} 属性值（val）是符号或包含空格需要用引号
6. [att$=val]: 选val结尾的 [href$=pdf] {}
7. [att*=val]: 选包含val的 [href*=lady] {}

伪类选择器

a:link {}
a:visited {}
a:hover {}
a:active {}
a标签有这四种，其他元素只有hover，active

:enabled
:disabled
:checked

li:first-child{}
li:last-child{}
li:nth-child(even){}  选中偶数项
li:nth-child(odd){}  选中奇数项
li:nth-child(3n+1){}
li:nth-last-child(3n+1){}
li:only-child{}   选中只有一个子元素的项
dd:first-of-type{}   选中第一个dd类型的元素
dd:last-of-type{}  
dd:nth-of-type(even){} 
dd:nth-last-of-type(3n){} 
span:only-of-type{}  选中只有一个span类型的元素

:empty   ``
:root   html根标签
:not()  不包含括号内选择器的元素
:target 被锚点选中为目标的元素
:lang()  langague为某些特殊值的元素

通配符选择器 *

img[src$=jpg] {} 选中img标签并且src属性是jpg结尾

伪元素选择器
1. p::first-letter {} 第一个字母
2. p::first-line {} 第一行
3. ::before { content: "";}
  ::after { content: "";}
4. ::selection 被用户选中内容的样式
组合选择器
1. 后代选择器 .main h2 {}
2. 子选择器 .main>h2 {}
3. 兄弟选择器
  1. 相邻兄弟选择器 h2+p{} h2相邻的后面一个p
  2. 通用兄弟选择器h2~p{} h2相邻的后面所有的p
4. 选择器分组 h1,h2,h3 {}
组合选择器
继承：一个元素的样式可以被内部子元素继承到。继承属性例如：color、font、text-align、list-style
css优先级
- 行内样式 1000
- id选择器 100
- 类、伪类和属性选择器 10
- 标签选择器、伪元素选择器 1
css层叠
- 相同的属性会覆盖。按照优先级覆盖，优先级相同后面的覆盖前面的
- 不同的属性会合并
改变css样式优先级
- 改变先后顺序
- 提升选择器优先级
- !important

3.文本

font-size 文字大小

font-size: 12px;  （父元素）
    font-size: 16px;  (子元素)
    font-size: 2em;   (子元素，24px)
    font-size: 200%;   (子元素，24px)
    em, % 参照物是父元素字体大小

font-family 字体

font-family: arial;  (英文是arial字体，中文是系统默认字体)
font-family: arial, Verdana, sans-serif; (arial, Verdana都是英文字体，先用arial。中文字体用系统设置的sans-serif)

font-weight 加粗： normal 、 bold
font-style 倾斜：normal、 italic
line-height 行高

line-height: 40px; (父元素，行高为40px，字体大小为30px)
    line-height: 3em; (子元素，行高90px)
    line-height: 300%; (子元素，行高90px)
    line-height: 3; (子元素，行高90px)

line-height: 300%; (父元素，行高90px)
    font-size: 16px(子元素，行高90px。行高为%的时候，先计算父元素行高是90px，然后子元素再计算)

line-height: 3; (父元素，行高90px)
    font-size: 16px(子元素，行高48px。行高为%的时候，子元素直接继承父元素line-height: 3; 然后计算得到48px)

font 文字缩写

font: 30px arial;
font: italic bold 30px/2 arial;

color 文字颜色
text-align 水平对齐 left、right、center、justify(两端对齐)
vertical-align 垂直对齐 baseline(基线、默认)、 sub(上标)、super(上标)、top(这一行最高点)、text-top(文本最高点)、middle、bottom、text-bottom、60%（参照物行高）、20px（基线为起点上移20px)
text-indent 首行缩进 2em(缩进2个字)、 10px、20%(参照物是容器的宽度)
white-space 换行、空格、tab要不要保留

---	换行	空格、tab	自动换行
'normal'	合并	合并	换行
'nowrap'	合并	合并	不换行
'pre'	保留	保留	不换行
'pre-wrap'	保留	保留	换行
'pre-line'	保留	合并	换行

word-wrap 单词换行 normal、break-word
word-break 字母换行 normal、 break-all
text-shadow 文字阴影

text-shadow: 1px 2px red;  (x轴偏移1px、y轴偏移2px、阴影为红色)
text-shadow: 1px 2px 3px;  (x轴偏移1px、y轴偏移2px、模糊半径为3px、阴影为文字颜色)

text-decoration: none、underline、overline、linethrough （可以同时写多个）
text-overflow: clip、ellipsis

超出文字省略号
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

cursor 鼠标形状： (图片)、default（光标）、auto、help、none（消失）、pointer(手)、zoom-in(放大镜)、zoom-out(缩小镜)、move
inherit 强制继承

line-height: inherit;

4.盒模型

width： 200px、 50%（参照物父元素）max-width min-width
height max-height min-height
padding

padding: 20px 10px; == padding: 20px 10px 20px 10px;
padding: 20px 10px 30px; == padding: 20px 10px 30px 10px;

margin :
- 比padding多一个auto值
- 水平合并： margin：0 auto；
- margin合并
  1. 相邻元素取margin大的那个值
  2. 父元素与第一个、最后一个子元素合并
border
- border-color默认是内部字体颜色

border-radius:

top-left、top-right、bottom-right、bottom-left

border-radius: 0px 5px 10px 15px / 20px 15px 10px 5px;
第一个角水平半径0px 垂直半径20px;
border-top-left-radius: 10px;

overflow 内容超出、overflow-x、overflow-y: visible、hidden、scroll、auto
box-sizing: content-box、border-box

box-shadow:

box-shadow: 4px 6px 3px 0px red; 
水平偏移、垂直偏移、模糊半径（往外1.5px模糊，往内1.5px模糊）、阴影大小
颜色默认文字颜色
box-shadow: inset 0px 0px 3px red; inset 内阴影
阴影不占空间

outline 轮廓，不占空间，在border以外
```
outline: 1px solid red;
```

5.背景

background-color: transparent(默认值)

background-image:

background-image: url(red.png), url(blue.png);
可以同时引入多个图片，先写的在上一层

background-repeat: repeat、repeat-x、repeat-y、space（平铺的背景与背景见留空隙，使得平铺的背景不被截掉）、round（把背景缩放，使得平铺的背景不被截掉）、no-repeat
```
background-image: url(red.png), url(blue.png);
background-repeat: repeat-x;
两个背景图，一个background-repeat值。两个背景图都按照repeat-x平铺
background-repeat: repeat-x, repeat-y;
```
background-attachment: scroll(默认值、背景图片不动，内容动)、local(背景图片随内容动)

background-position:

background-position:10px 20px;
x轴偏移10px,y轴偏移20px
background-position:10% 20%;
图片的x轴10% y轴20%位置与 容器x轴10% y轴20%位置重合
background-position:right;
x轴居右，y轴默认居中
background-position:right 10px top 20px;

linear-gradient 线性渐变:

backgroud-image: linear-gradient(red,blue);
从上到下 红色渐变到蓝色
backgroud-image: linear-gradient(to top,red,blue);
backgroud-image: linear-gradient(to right bottom,red,blue);
从左上角到右下角 红色渐变到蓝色
backgroud-image: linear-gradient(0deg,red,blue);
从下到上 红色渐变到蓝色
linear-gradient(45deg,red,blue);
0度是从下往上， 45deg是0deg的时候顺时针旋转45deg 红色渐变到蓝色
backgroud-image: linear-gradient(red,green,blue);
backgroud-image: linear-gradient(red,green 20%,blue);
green在20%的位置

radial-gradient 径向渐变:

backgroud-image: radial-gradient(closet-side,red,blue);
向最近的那条边渐变
默认形状是椭圆
backgroud-image: radial-gradient(circle,red,blue);
渐变圆默认半价是  从元素圆心到farthest-corner(元素左上角)
backgroud-image: radial-gradient(100px 50px at 0 0,red,green 20%,blue);
椭圆x轴半径100px,y轴半径50px, 椭圆圆心移动到(0,0)位置

渐变repeat

backgroud-image: repeating-linear-gradient(red,blue 20px, red40px);
backgroud-image: repeating-radial-gradient(red,blue 20px, red40px);

background-origin 背景从哪里开始出现: padding-box(默认值)、border-box、content-box
background-clip 背景从哪里开始裁剪: border-box(默认值)、padding-box、content-box

background-size 背景大小

background-size: 50% 50%;
宽高都是容器的50%
background-size: cover;
最小宽高=容器宽高
background-size: contain;
最大宽高=容器宽高

background

background: url(red.png) 0 0/20px 20px no-repeat content-box green;
注：position(0,0)/size(20px 20px)
content-box 即是origin又是clip
背景颜色是绿色