css总结

1.css简介

css注释 /* */
浏览器私有属性
- chrome，safari: -webkit-
- firefox: -moz-
- IE: -ms-
- opera: -o-
属性值语法包括基本元素、组合符号、数量符合
- 组合符号
  1. 空格：必须按顺序出现，例如：<font-size> <font-family>
  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   `<p></p>`
: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 鼠标形状： <uri> (图片)、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
背景颜色是绿色

最后编辑于：2018.05.16 09:27:39

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,390评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,821评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,632评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,170评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,033评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,098评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,511评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,204评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,479评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,572评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,341评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,213评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,576评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,893评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,171评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,486评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,676评论 2赞 335