最全css样式表

基本格式:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meat charset = "UTF-8">
    <title></title>
    //外部css
    <link rel="stylesheet" type="text/css" href="路径">
    //内部css
    <style>
        选择器 {
            属性名称;属性对应值;
        }
    </style>
</head>
<body>
    //行内css
    <h1 style="color:red;">行内css</h1>
</body>
</html>

0x001:文字属性相关

  • 文字样式

    • font-style:样式
  • 文字粗细

    • font-weight:粗细
  • 文字大小

    • font-size:大小
  • 文字字体

    • font-family:字体,备选字体
  • 合并简写:

    • font: 样式 粗细 大小 字体

0x002:文本属性相关

  • 文本缩进

    • text-indent:缩进距离
  • 文本对齐

    • text-align:对齐方向
  • 文本居中

    • text-align: center
  • 文本划线

    • text-decoration:划线
  • 文本颜色

    • color:颜色

0x003:图片边框属性相关

  • 边框宽度

    • border-width: 宽度px
  • 边框样式

    • border-style: 样式
  • 边框颜色

    • color: 颜色
  • 边框圆角

    • border-radius:大小px

0x004:选择器相关

  • 标签选择器
    标签{
     属性:;
    }
  • ID选择器
    #ID名称{
     属性:;           //配合id = "xxx"使用
    }
  • 类选择器
    .类名{
     属性:;           //配合class = "xxx"使用
    }
  • 后代选择器
    #ID名称 .类名1 .类名2··· {
     属性:;             //同上
    }
  • 子元素选择器
    div>标签>标签>··· {
     属性:;             //">"是指地址
    }
  • 交集选择器
    标签名.类名 {
     属性:;
    }
  • 并集选择器
    ID名称,.类名 {
     属性:;
    }
  • 相邻兄弟选择器
    标签1 + 标签2 {
     属性:;
    }
  • 通用兄弟选择器
    标签1 ~ 标签2 {
     属性:;
    }

0x005:序选择器相关

  • 选中同级别中的第一个标签
    标签:first-child {
     属性:;
    }
  • 选中同级别中的最后个标签
    标签:last-child {
     属性:;
    }
  • 选中同级别中的第n个标签
    标签:nth-child(n) {
     属性:;
    }
  • 选中同级别中的倒数第n个标签
    标签:nth-last-child(n) {
     属性:;
    }
  • 选中父元素中唯一的元素
    标签:only-child {
     属性:;
    }
  • 选中父元素中唯一类型的某个标签
    标签:conly-of-type {
     属性:;
    }
  • 选中同级别中同类型的第一个标签
    标签:first-of-type  {
     属性:;
    }
  • 选中同级别中同类型的最后一个标签
    标签:last-of-type {
     属性:;
    }
  • 选中同级别中同类型的第n个标签
    标签:nth-of-type(n)  {
     属性:;
    }
  • 选中同级别中同类型的倒数第n个标签
    标签:nth-last-of-type(n) {
     属性:;
    }
  • 选中同级别中的所以奇数
    标签:nth-child(odd) {
     属性:;
    }
  • 选中同级别中的所以偶数
    标签:nth-child(oven) {
     属性:;
    }
  • 选中自定义的标签
    标签:nth-child(xn+y) {
     属性:;
    }

0x006:属性选择器相关

  • 根据指定属性找到对应的标签
    标签[id] {
     属性:;
    }
  • 根据class标签找到指定的属性
    标签[class ="xxx"] {
     标签:;
    }
  • 属性的值是以什么开头的
    标签[alt ^="xxx"] {
     属性:;
    }
  • 属性取值是以什么结尾的
    标签[alt $="xxx"] {
     属性:;
    }
  • 属性取值是否包含某个特定的值
    标签[alt *="xxx"] {
     属性:;
    }
  • 选中全文的标签设置属性
* {
    属性:;
}

0x007:优先级相关

  • 提升直接选中标签的优先性
    直接选中的标签 {
     属性:!important;
    }
  • 直接选中标签的权重问题
    • 优先级:id> 类> 标签> 继承> 默认
    • 计算优先级得权重
    • 只有font color text line开头的属性才可以继承

0x008:div和span标签

  • div标签 – 容器级标签(可以嵌套所有的标签)

    • 作用:完成网页的基本布局
    • 注意点:div标签独占一行
    • 格式:
      <div class="xxx">
      标签属性
      </div>
  • span标签 – 文本级标签(只能嵌套文字,图片和超链接)

    • 作用:修改文本的局部信息
    • 注意点:span标签不会独占一行
    • 格式:
      <span>内容</span>

0x009:显示模式的转换

  • 转换为块级元素
    • 块级元素是在容器级标签的基础上多了p标签
    • 注意点:块级元素独占一行,可以控制宽高
    • 格式:
      display:block;
  • 转换为行内元素
    • 行内级元素是在文本级标签的基础上少了p标签
    • 注意点:行内元素不会独占一行,不能控制宽高
    • 格式:
      display:inline;
  • 转换为块级行内元素
    • 不独占一行,并且可以控制宽高
    • 格式:
      display:inline-block;

0x010:背景属性

  • 设置背景颜色
    background-color: 颜色;
  • 设置背景图片
    background-image: url(图片地址);
  • 页面背景图片
    body {
     background-image: url(图片地址);
    }
  • 图片平铺属性
    background-repeat: repeat-x;    //x轴平铺
    background-repeat: repeat-y;     //y轴平铺
    background-repeat: no-repeat;     //不平铺
  • 图片关联方式
    background-attachment: fixed;   //页面动图不动
  • 背景图片定位
    background-position: 方向 方向;
    水平方向:left,center,right
    垂直方向:top,center,bottom
  • 背景属性缩写
    background: 颜色 图片 平铺 关联 定位;

0x011:盒模型属性css

  • 边框属性

    • 格式:
      border-top: 宽度 样式 颜色;       //上边框
      border-left: 宽度 样式 颜色;      //左边框
      border-right: 宽度 样式 颜色;     //右边框
      border-botom: 宽度 样式 颜色;     //下边框
      border: 宽度 样式 颜色;           //四条边都相等
      例:border: 1px solid #000;
      //虚线样式:dashed
      border-width: 上 右 下 左;
      border-style: 上 右 下 左;       //一步设置四条边
      border-color: 上 右 下 左;
  • 内边距属性

    padding-top: 宽度;
    padding-left: 宽度;
    padding-right: 宽度;
    padding-bottom: 宽度;
    padding: 上,右,下,左;    //四条边的内边距宽度
  • 外边距属性

    margin-top: 宽度;
    margin-left: 宽度;
    margin-right: 宽度;
    margin-bottom: 宽度;
    margin: 上,右,下,左;     //四条边的外边距宽度
    margin: 上 auto;        //auto:只可水平方向居中
  • 盒子模型计算

    内容宽高 = width或height
    外边距:margin
    内边距:padding
    元素宽高  = 边框 + 内边距 + `内容高度`或`宽度`
    边框:border
    元素空间宽高 = 外边框 + 边框 + 内边距 + `内容高度`或`宽度`
  • 盒子box-sizing属性

    • 作用:
      • 保证元素宽高不变的情况下,添加padding和margin属性时超过了元素宽高的值时,自动改变内容的宽高
    • 格式:
      box-sizing: border-box;
  • 水平居中

    text-align: center;margin: 0 auto; 的区别
    text-align: center; -> 边框内部的内容居中
    margin: 0 auto; -> 盒子边框整体居中
  • 清空默认的外边距

//范围太广比较不实用
* {
    padding: 0;
    margin: 0;
}
//用于大项目的开发时
body, div, dl, dt, dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, tex tarea, p, blockquote, th, td {
    padding: 0;
    margin: 0;
}
  • 边框内的行高
    • 作用:
      • 设置行高的高度等于边框的高度时,可以使单行文字在边框中垂直居中显示(只适用于一行文字),如果有多行文字则应使用padding来垂直居中
    • 格式:
      line-height: 高度;

0x012:浮动流

  • 浮动流的基本概念
    • 注意点:
      • float中不能使用center居中,也不能使用margin: 0 auto进行距中
    • 好处:
      • 无论是块级元素/行内元素/块级行内元素都可以进行水平排版都可以进行设置宽高
    • 格式:
float: left;             //左对齐
float: right;           //右对齐
  • 浮动的排版规则

    • 从外向内,从上向下;
    • 在浮动流中,浮动的元素不能撑起父元素的高度。
  • 清除浮动

    • 注意点:
      • 当使用clean后margin将会失效。
    • 格式:clean: both; //清除左右浮动
    • 格式:overflow: hidden;
    • 作用:
      • 可将超出标签范围的内容截剪掉;
      • 如果在盒子里设置了margin-top,则可以让外面的盒子不会掉下来
  • 伪元素选择器

    • 格式(div内容之前):

      div::before {
       content: "内容";         //添加子元素内容
       width: 宽度;               //添加内容的宽度
       height: 高度;              //添加内容的高度
       background-color: 背景颜色;
       display: block;          //转换为块级元素
       visibility: hidden;     //隐藏添加的内容
      }
    • 格式(div内容之后):

      div::after {
       content: "内容";        //添加子元素内容
       width: 宽度;               //添加内容的宽度
       height: 高度;              //添加内容的高度
       background-color: 背景颜色;
       display: block;          //转换为块级元素
       visibility: hidden;      //隐藏添加的内容
      }

0x013:定位流

  • 标准定位

    • 注意点:

      • 标准定位流不会脱离标准流的空间,只能在标准流内进行上右下左的移动
    • 格式:

      position: relative;
      top: 大小px;              //相当于上外边距
      right:  大小px;           //相当于右外边距
      bottom: 大小px;       //相当于下外边距
      left: 大小px;              //相当于左外边距
  • 绝对定位

    • 注意点:

      • 主要是祖先关系的定位流都可以实现绝对定位,那个定位流离它最近就在那里定位
    • 格式:

      position: absolute;
      top: 大小px;              //相当于上外边距
      right:  大小px;           //相当于右外边距
      bottom: 大小px;       //相当于下外边距
      left: 大小px;              //相当于左外边距
  • 子绝父相:

  • 将子元素是绝对定位,将父元素是相对定位

  • 水平居中:

    left: 50%;
    margin-left: 元素宽度的一半;
  • a标签伪类选择器

    //修改从来被访问过状态下的样式
    选择器标签:link {
        color: 颜色;
    } 
    //修改被访问过的状态下的样式
    选择器标签:visited {
        color: 颜色;
    }
    //修改鼠标悬停状态下的样式
    选择器标签:hover {
        color: 颜色;
    }
    //修改鼠标长按状态下的样式
    选择器标签:aetive {
        color: 颜色;
    }
    • 注意点:

      • 如果四种同时出现,则必须按照爱恨原则排序love hate,如果需要修改访问过和未访问过的颜色一样时,则可以简写为:
      a {
       color: 颜色;
      }

0x014:过度模块

  • 基本格式

    transition-property: 变化的标签,变化的标签;
    transition-duration: 秒数,秒数;
    transition-delay: 延时时间s;
    
    选择器标签:hover {
        //变化的宽度,高度,内外边距大小,颜色
        例:margin: 100px;
        例:width: 100px;
        例:background-color: red;
    }
  • 控制模块移动速度

    • 格式:

      选择器标签:nth-child(序数) 标签 {
        transition-timing-function: 速度;
        linear:匀速
        ease:慢慢变慢
        ease-in:由慢变快
        ease-out:由快变慢
        ease-in-out:由慢变快再变慢
      }
  • 合并连写

    transition:过渡属性 过渡时长 运动速度 延时时间;

0x015:2D转换模式

  • 2D图形旋转
    transform: rotate(度数deg);
  • 2D图形移动
    transform: translate(水平px,垂直px);
  • 2D图形缩放
    transform: scale(水平,垂直);
  • 形变中心点
    transform: origin(xxx%,xxx%);
  • 旋转轴向.默认是X
    transform: rotate X/ Y/ Z(度数deg);
  • 透视属性.近大远小
    perspective: 大小px;

0x016:动画模块

  • 动画三要素
    animation-name: xxx;
    animation-duration: 时间;
    @keyframs xxx {
     from {
         属性:;
     }
     to {
         属性:;
     }
    }
  • 动画延时
    animation-delay: 延迟;
  • 动画速度
    animation-timing-function: 同上;
  • 动画次数
    animation-iteration-count: 次数;
  • 动画往返
    animation-direction: alternate;
  • 悬停暂停
    animation-play-start: paused;
  • 连写格式
    animation: 动画名字 动画时长 运动速度 延时时间 执行次数 是否往返;

文章作者:Torres-圣君
文章链接:http://www.cjlblog.vip/posts/f8a3898b.html
版权声明:本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Torres-圣君


  转载请注明: Torres-圣君 最全css样式表

评论
  目录