【CSS 教程】--- 总览

[AlexZ33]

【CSS 基础】--- 总览

1.css简介

• css注释  /* */

• 浏览器私有属性

  • chrome，safari:  -webkit-
  • firefox:  -moz-
  • IE:  -ms-
  • opera:  -o-

• 属性值语法包括基本元素、组合符号、数量符合

  • 组合符号
    1. 空格：必须按顺序出现，例如：<font-size> <font-family>
    2. &&: 必须出现顺序无所谓
    3. ||： 至少出现一个顺序无所谓
    4. |：只能出现一个
  • 数量符号
    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. 属性选择器

  5. [att]:具有括号内属性的元素  [disabled] {}

  6. [att=val]:选择属性名为att属性值为val的元素，相当于id选择器 [type=button] {}

  7. [att~=val]: 选择属性名为att属性值带有val（空格分割）的元素，相当于类选择器 [class~=sports] {}

  8. [att|=val]: 选val、val-开头的 [lang|=en] {}

  9. [att^=val]: 选val开头的 [href^='#'] {} 属性值（val）是符号或包含空格需要用引号

  10. [att$=val]: 选val结尾的 [href$=pdf] {}

  11. [att=val]: 选包含val的 `[href=lady] {}`

  12. 伪类选择器

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

  13. 通配符选择器 *

• 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. 兄弟选择器
  4. 相邻兄弟选择器 h2+p{} h2相邻的后面一个p
  5. 通用兄弟选择器h2~p{} h2相邻的后面所有的p
  6. 选择器分组  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 鼠标形状： (图片)、default（光标）、auto、help、none（消失）、pointer(手)、zoom-in(放大镜)、zoom-out(缩小镜)、move

18. inherit 强制继承

    line-height: inherit;

    4.盒模型

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

20. height max-height min-height

21. padding

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

22. margin :

    • 比padding多一个auto值
    • 水平合并： margin：0 auto；
    • margin合并
      1. 相邻元素取margin大的那个值
      2. 父元素与第一个、最后一个子元素合并

23. border

    • border-color默认是内部字体颜色

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

25. overflow 内容超出、overflow-x、overflow-y: visible、hidden、scroll、auto

26. box-sizing: content-box、border-box

27. box-shadow:

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

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

    outline: 1px solid red;

    5.背景

29. background-color: transparent(默认值)

30. background-image:

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

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

32. background-attachment: scroll(默认值、背景图片不动，内容动)、local(背景图片随内容动)

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

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

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

36. 渐变repeat

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

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

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

39. background-size 背景大小

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

40. background

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

    6.布局

41. display:

    • block
    • inline
    • inline-block : 可以设置宽高、同行显示 input select button
    • none
    • visibility: hidden 不显示，但还占据原来的位置
    • 块元素水平居中 margin: 0 auto;

42. position：

    • static
    • relative 在文档流中，设置了top、left后 仍然占据之前的元素
    • absolute： 脱离文档流、默认宽度为内容宽度、参照物是第一个定位元素或者根元素
    • fixed 脱离文档流、默认宽度为内容宽度、参照物为窗口
    • z-index 未设置z-index的时候，后面元素盖在前面元素上面

43. float：left right none

    • 半脱离文档流（对后续元素脱离文档流 对于后续元素内容在文档流）
    • clear: both left right none 清楚浮动元素对后续元素的影响

      .clearfix:after { display: block; content: "."; clear: both; height: 0; overflow: hidden; visibility: hidden; }

44. flex

    //在flex容器，设置 
    display: flex;
    //flex item 在文档流的子元素才是弹性元素 （孙元素不是）

    对flex容器设置

• 排列相关
  1. flex-direction 排列方向：row、row-reverse、 column、 column-reverse
  2. flex-wrap 换行：wrap、wrap-reverse(反向换行)
  3. felx-flow:<'flex-direction'> || <'flex-wrap'> (一次设置两个值)
  4. order: 0(默认值) （order:0 排在order：1 前）
• 弹性相关
  1. flex-basis(设置flex item 初始宽或者高)
  2. flex-grow： 0（初始）设置剩余区域所占的比例
  3. flex-shrink ： 1（初始，内容不超出，正好） 分到负的剩余空间。 0（内容超出）
  4. flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'> (一次设置三个值) （0 1 main-size）
• 对齐相关
  • （设置在容器上）
    1. justify-content(主轴对齐)：flex-start(左对齐)、 flex-end(右对齐)、 center、 space-between(间隔平分)、 space-around(间隔平分 首尾也可以分到)
    2. align-items(副轴对齐)： flex-start(上对齐)、 flex-end(下对齐) 、center、 baseline(基线对齐)、 stretch
  • （设置在flex元素上）
    1. align-content (当有多行felx item时，设置每一行在副轴上的对齐方式)： flex-start(多行居上)、 flex-end(多行居下)、 center、 space-between(间隔行平分)、 space-around(间隔行平分 首尾也可以分到) 、stretch（每行都拉伸）
    2. align-self(设置单个元素在副轴上的方向、align-items属性值一样) ：auto(默认值，跟设置在容器上的对齐方式一样)、 flex-start(上对齐)、 flex-end(下对齐)、 center、 baseline(基线对齐)、 stretch

       7.变形

1. rotate()

   //绕z轴顺时针旋转45度
   transform: rotate(45deg);

2. translate()

   //往x轴正方向偏移50px
   transform: translate(50px);
   //往x轴正方向偏移50px，往y轴正方向偏移自身高度的20%
   transform: translate(50px, 20%);
   //往x轴反方向偏移50px
   transform: translateX(-50px);