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.选择器

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

• 简单选择器

  1. 标签选择器 p{}
  2. 类选择器 .special{}
  3. id选择器 #banner{}
  4. 属性选择器
     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] {}
  5. 伪类选择器

     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为某些特殊值的元素
     

  6. 通配符选择器 *

  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.文本

1. font-size 文字大小

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

2. font-family 字体

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

3. font-weight 加粗： normal 、 bold
4. font-style 倾斜：normal、 italic
5. 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)

6. font 文字缩写

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

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

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

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

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

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

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

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

line-height: inherit;

4.盒模型

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

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

4. margin :
   • 比padding多一个auto值
   • 水平合并： margin：0 auto；
   • margin合并
     1. 相邻元素取margin大的那个值
     2. 父元素与第一个、最后一个子元素合并
5. border
   • border-color默认是内部字体颜色
6. 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;
   

7. overflow 内容超出、overflow-x、overflow-y: visible、hidden、scroll、auto
8. box-sizing: content-box、border-box
9. box-shadow:

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

10. outline 轮廓，不占空间，在border以外

    outline: 1px solid red;
    

5.背景

1. background-color: transparent(默认值)
2. background-image:

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

3. 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;
   

4. background-attachment: scroll(默认值、背景图片不动，内容动)、local(背景图片随内容动)
5. 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;
   

6. 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%的位置
   

7. 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)位置
   

8. 渐变repeat

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

9. background-origin 背景从哪里开始出现: padding-box(默认值)、border-box、content-box
10. background-clip 背景从哪里开始裁剪: border-box(默认值)、padding-box、content-box
11. background-size 背景大小

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

12. background

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