html-css样式

Share

一、html&css样式

（一）符合选择样式

  • 标签指定式（交集）标签名.类名{}
    eg:div.box{}
  • 选择符分组（并集）选择器，选择器，选择器{}
    eg:div,.box,h1{}
  • 后代选择器 父级选择器 子集选择器
    eg:ul li{}

    (二)CSS中的注释

    /**/

    (三)选择器的高级权限

  • 权重值（只针对于后代选择器使用）
    1）行内式 1000
    2）id 100
    3）类 10
    4）标签 1
  • 原则
    1）就近原则
    就近原则使用：
    ⑴先判断两个选择器是否选择到同一元素（标签）上
    ⑵如果是，就比点数大小
    ⑶如果不是，就近原则大
  • 提权
    !important
    提权使用
    1）选择同一元素时，可以给权限小的选择器提权
    2)就近原则>提权

    （四）strong和em标记（带有语气语义的标记）

  1. strong 加粗
  2. em 斜体
    带有语气的标记，使用SEO搜索引擎优化

    （五）常用属性

  3. word-break：break-all/keep-all;文本的换行或不换行
  4. 文本装饰属性
    text-decoration：none/underline/overline/line-through; 文本装饰：无/下划线/上划线/删除线

    （六）一行文本垂直居中

    高度=行高

    （七）单位长度和颜色单位

  • 单位长度
    1）相对 px. em 相对当前文本的倍数
    2）绝对 cm mm
  • 颜色单位
    1）颜色名：color:red;
    2)十六进制 color：#F00 缩写：两位都一样可以缩写，取值范围0-9，A-F。
    3）三原色： color：rgb（255,0,0）取值范围：0-255.

    （八）复合属性（缩写形式）

  • border ： border-width:边框粗细
    border-style:边框样式
    border-color： 边框颜色
    缩写：border：1px solid #F00;
    边框方向
    1）border-left
    2） border-right
    3）border-top
    4） border-bottom
  • background : backfround-color:背景颜色
    background-image：背景图片 background-repeat ：背景图片平铺方式
    background-position：背景图片的位置
    background:#000000 URL() no-repeat center center;
  • font: font-weight font-style font-size line-height font-family
    缩写：font：bold italic 12px/20px 宋体；
    总结：
  1. border 属性值不能省写，属性值可以调换位置
  2. background 属性值能省写，属性值可以调换位置
  3. font 属性值能省写，但是必须有字体和字号，属性值不可以调换位置。

    （九）a链接的四种状态

  4. a:link 未访问时
  5. a:visited 访问后
  6. a:hover 鼠标悬停
  7. a:active 鼠标点击不动时
    实际工作中的用法：
    a{color:red;} (未访问，访问后)
    a:hover{olor:blue;}
    注意：所有的行内元素，在代码中折行书写，在页面中会出现一个空格。

    二、盒子

    ##（一）盒子的组成
    左边框+左内边框+内容+右内边框+右边框=盒子的宽度

    （二）盒子的边距

  • 内边距 padding
    内边距方向：padding-left/right/top/bottom
    缩写：1）一个值 上下左右
    2）两个值 上下 左右
    3）三个值 上 左右 下
    4）四个值 上 右 下 左
  • 值同外边距

    （三）盒子的居中

    margin：0 auto;
    外边距 自动

    （四） 盒子边距常见问题

  1. 水平盒子之间的外边距 相加 行内元素
  2. 垂直盒子之间的外边距 取大值 块元素
  3. 行内元素垂直内外边距不起作用，解决转块或行内块
  4. 内边距会撑大盒子，解决：用宽度减去内边距
    注意：color属性有继承性，但是a标记不起作用，单独控制
  5. 清除列表默认项目符号属性
    list-style:none;
    注意：块元素会自动适应父级的宽度，，如果没有单独控制子级块元素的宽，那么加了内边距，也不会减。

    三、浮动

    （一）浮动

    float：left/right
    浮动特点：
    1. 脱离文档流
    2. 盒子水平排列
    3. 类似于行内块

      （二） 文档流（标准流）

      按照代码的书写顺序在浏览器中显示

      （三）清除浮动（浮动对其他元素造成的影响）

  6. clear 清除浮动
    clear：both；
  • overflow：hidden； 清除浮动
    1）溢出隐藏
    2)父级自适应子级的高度
    3)清除浮动
    注意：img与垂直元素之间会有缝隙，
    解决：img标记转块元素
  • 伪类清除浮动：after
    1
    2
    3
    4
    5
    6
    7
    8
    clearfix:after{
          clear:both;
          display:block;
           visibility:hidden;
          height:0;
          line-height:0;
          content:"";
    }

定位

（一）定位

  1. 相对定位：相对于自己， position:relative;
  2. 绝对定位：相对于浏览器，position:absolute;
    定位的使用：
    子绝父相
    解释：在实际工作中，子级写绝对定位，在要相对的父级上写相对定位。
  3. 固定定位 ：position:fixed;

    (二)css精灵（sprite)

    把多张图片合成为一行，减少对服务器的请求次数，提高页面加载速度。