Css入门学习笔记

欢迎加入Unity业内qq交流群：956187480

qq扫描二维码加群

1.语法基础

  格式：选择器{属性1：值1;属性2：值2}
  单位：px像素pixel，%百分比根据外部父容器设置大小
  基本样式：width，height，background-color
2.CSS样式的引入方式

  1.内联样式：style属性
    <div style="width: 100px; height:100px; background-color: red;">这是一个div块</div>
  2.内部样式：style标签
    <style>
    div{width: 100px; height:100px; background-color: red;}
    </style>
    内部样式的代码可以复用，复合w3c的标准规范，尽量让结构和样式分开处理
  3.外部样式
    引入一个单独的css文件，name.css
    <link>标签用来引入外部资源，rel指定引入资源类型，hraf指定资源地址路径:
    <link rel="stylesheet" href="./common.css">
    @import也用来引入外部样式: @import url('./common.css')
3.CSS中颜色的表示方法
  单词表示法，十六进制表示法，三原色表示法
4.CSS背景样式
  background-color背景色
  background-image背景图 
  url 背景地址
  background-repeat 
  水平竖直平铺方式 repeat-x；repeat-y；repeat(x,y)(默认)，no-repeat

  background-postion 背景图位置:right;30%;50px
  background-attachment 背景图随滚动条的移动方式 
  scroll背景位置是按照当前元素进行偏移的。
  fixed背景位置是按照浏览器进行偏移的
5.Css边框样式
  border-style:边框样式
  border-width:边框大小
  border-color:边框颜色
  只针对某一条边单独设置：border-right-style 中间是方向
  颜色：透明 transparent
6.CSS文字样式
  font-family:字体类型
  Arial /'Times New Roman'英文字体
  微软雅黑，宋体 中文字体

  衬线体与非衬线体：显示风格不同
  多字体设置：可设置多个备选方案 识别本机存在的字体：div{font-family: SimSun, Helvetica, sans-serif;}
  引号问题：字体名字里面出现空格就需要单引号引起来

  字体大小：font-size
  (不推荐)xx-small 最小；x-small 较小；small小；medium 正常(16px)；large 大；x-large较大；xx-large最大
  字体粗细：font-weight
  模式：正常（normal）加粗（bold）
  写法：单词（normaln,bold）|number(100....900)100-500都是正常的，500-900才有加粗效果

  字体样式：font-style
  模式：正常normal，斜体italic

  字体颜色：color

7.CSS段落样式
  text-decoration  文本装饰
    下划线 underline
    上划线 overline
    删除线 linethrough
    可以附加多个用空格隔开
  text-transform 文本大小写(英文)
    lowercase 小写
    uppercase 大写
    capitalize 只针对首字母大写
  text-indent 文本缩进
    em 相对缩放值
  text-align 对齐方式 
    left right center justify(两边对齐)
  Line-height 行高
    一行文字的高度，上边距和下边距等价关系

8.css复合样式
复合样式的写法是通过空格是实现的,有的对顺序没有要求background：border；font字体就必须按照顺序写
 1.background： red url() repeat 0 0;
 2.border: 1px red solid
 3.font：（最少要有两个属性：size family）

 注意：要么只用单一样式要么只用复合样式，
 如果真的要两种都用就要先写复合样式最后写单一样式，
 因为后写复合的话就会把之前的单一样式覆盖掉

9.CSS选择器
    1.ID选择器
        #elem{}   id="elem"
        注：
        1.id是唯一值 在一个界面里面只能出现一次
        2.命名规范，由字母，下划线，中划线，数字组成，且第一个字符不能是数字
        3.驼峰写法：小驼峰 大驼峰
    2.class选择器
      .elem{} class ="elem"
      注：1.class选择器可以复用，
          2.可以添加多个class选择器
          3.多个样式的时候，样式优先级根据CSS决定，而不是Class属性中的顺序
          4.标签+类的写法
    3.标签选择器（Tag选择器）
          css：div{}  
          htm：<div></div>
          使用的场景：
          1.去掉某些标签的默认样式时
          2.复杂的选择器中，如 层次选择器
    4.群组选择器
      css：div，p，span{}    
    5.通配选择器
      *{ } -> div ,ul,li,p,h1,h2...{}
      注：慎用通用选择器
    6.层次选择器
      后代：M N{ }
      父子：M > N{}
      兄弟：M~N{} 当前M下的所有兄弟
      相邻：M+N 当前M下面相邻的标签
    7.属性选择器
      M[attr] {}
      = :完全匹配
      *= : 部分匹配
      ^= :起始匹配
      $= ：结束匹配
      [][][] :组合匹配
    8.伪类选择器
      M:伪类{}
      :link 访问前的样式  （只能添加给a标签）
      :visited 访问后的样式   （只能添加给a标签）
      :hover 鼠标移入时的样式   （添加给所有标签）
      :active 鼠标按下时的样式     （添加给所有标签）
      如果四个伪类都生效，一定要注意顺序：L V H A
      一般网站只设置： a:{} a:hover{}

      :after :before 通过伪类的方式给元素添加一个文本内容,使用content属性
      :checked  :disabled  :focus 都是针对表单元素的

      结构型伪类选择器
        nth-of-type()  nth-child()
        括号内角标是从1开始的，1表示第一项，2表示第二项  n表示从0到无穷大
        first-of-type
        last-of-type
        only-of-type

        nth-of-type()和nth-child()之间的区别
           type：类型
           child：子节点

欢迎加入Unity业内qq交流群：956187480

qq扫描二维码加群