CSS层叠样式

最新推荐文章于 2022-10-23 01:46:30 发布

原创最新推荐文章于 2022-10-23 01:46:30 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

CSS层叠样式表

head头标签

<!-- 1. 设置字符集  -->
<meta charset="UTF-8">
<!-- 2. 设置网页标题 -->
<title>Document</title>
<!-- 3. 设置自动刷新并跳转 -->
<!-- <meta http-equiv="refresh" content="秒数;"> -->
<!-- <meta http-equiv="refresh" content="秒数;url=网址"> -->
<!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com"> -->
<!-- <meta http-equiv="refresh" content="3;"> -->
<!-- 4. 关键词 -->
<meta name="keywords" content="关键词1, 关键词2, ...">
<!-- 5. 描述 -->
<meta name="description" content="描述内容">
<!-- 6. 导入css -->
<!-- <link rel="stylesheet" href="css文件地址"> -->
<link rel="stylesheet" href="./test.css">
<!-- 7. 导入js -->
<!-- <script src="js文件地址"></script> -->
<script src="./test.js"></script>
<!-- 8. 设置网页图标 -->
<!-- 普通浏览器 -->
<link rel="icon" href="./favicon.ico">
<!-- 兼容IE -->
<link rel="shortcut icon" href="./favicon.ico">

导入css方式

css导入方式

1. 外链式  正式项目, 推荐
   在head头标签中, 通过link标签导入css
2. 内联式
   在开始标签中, 通过style属性来赋予css样式
3. 内嵌式
   在head头标签中, 通过style标签来赋予css样式
4. 导入式
   在head头标签中, 通过style标签写入
   @import url('css文件地址')
   注意: 导入式, 一定要写在style标签里的最前面
   外链式: 先加载css, 再加载html
   导入式: 先加载html, 再加载css

基础语法

1. 四大通用属性 (html)
   style    给当前标签赋予css样式
   name     给标签取个名字
   id 给标签取唯一的名字 (身份证号)
   class 给标签取个别名   (绰号)     多个, 重复
2. css选择器
   选择器{ 属性名: 属性值;   属性名:属性值;  ...  }
   每个属性之间用 分号 隔开
   最后一个属性 可以不加分号
3. css 大多数不区分大小写
   id 和 class 区分大小写
4. css注释
   /* 注释内容  */

字体颜色

字体颜色
•   color:

- 颜色单词
  red 红
  blue 蓝
  green 绿
  yellow 黄
  black 黑
  white 白

  3位十六进制的数      0-9 a-f

  rrggbb 6位十六进制的数

  rgb(0-255, 0-255, 0-255)

  rgba(0-255, 0-255, 0-255, 0-1)   a:透明度* hsla(0-360, %, %, 0-1)

  h: 色调   0:红  120:蓝  240:绿

  s: 饱和度  % 

  l: 亮度    %

  a: 透明度  0-1   
  透明度
  opacity: 0-1

长度单位

绝对长度



        cm  
        mm
        in  1in = 2.54cm = 25.4mm 96px

    相对长度

        px  
        em  倍数
        %   (相对于父级)

### 基础选择器

##### 标签名{ 属性名: 属性值; ... }

•         PS: 匹配范围比较广, 适用于初始化
•   class选择器
•   .class名{ ... }
•   pS: 可以多个, 可以重复
•   id选择器

•   id名{ ... }

•   PS: 唯一  

•   在css中,如果id重复, css样式能重复使用
•   在今后js中, 出错

关联选择器

功能: 负责明确 祖辈 和 后辈之间的关系
•   s1   s2   { ... }   匹配s1下的所有后辈元素s2
•   s1 > s2   { ... }   匹配s1下的所有儿子元素s2
•   s1 + s2   { ... }   匹配s1后面的一个兄弟元素s2
•   s1 ~ s2   { ... }   匹配s1后面的所有兄弟元素s2

组合选择器

s1, s2, s3, ...sN{ ... }        给不同的选择器 赋予相同的样式

伪元素选择器

s1:hover{ ... }      当鼠标悬停在s1上时, 触发css
•   s1:hover  s2{ ... }  当鼠标选停在s1上时, s2触发css
•   s1:focus{ ... }      当s1获取到光标时, 触发css
•   先父级, 再找第几个, 最后看元素
•   s1:first-child{ ... }   匹配父元素下的第一个子元素s1 
•   s1:last-child{ ... }    匹配父元素下的最后一个子元素s1 
•   s1:nth-child(n){ ... }  匹配父元素下的第n个子元素s1 
•   先父级, 再看元素, 最后找第几个
•   s1:fisrt-of-type{...}       匹配父元素下子元素s1中的第一个
•   s1:last-of-type{...}        匹配父元素下子元素s1中的最后一个
•   s1:nth-of-type(n){...}      匹配父元素下子元素s1中的第n个

伪对象选择器

伪对象选择器   (不占空间, 后期有大用)
•   s1::before{}    匹配s1下的最前面 
•   s1::after{}     匹配s1下的最后面
•    ul::before{ content: '第零个马克斯改变了我的思想';  }
•   ul::after{ content: '第五个马桶改变了我上厕所的姿势';  }
•   被选中时 (默认的选中网页的字体和背景颜色
•   ::selection{background:pink; color:blue;}

字体

字体 font
•   font-size:      字体大小
•   font-family:    字体家族  (如果带空格, 请加引号)
•   font-weight:    字体加粗  bold
•   font-style:     字体倾斜  italic
•   line-height:    行高  
•   (如果设置成父级/自己 高度一致时, 垂直居中的效果, 仅限一行)
•   简写:   [] : 可有可无   |: 或者
•   font: size  family;
•   font: [weight | style] size  family;
•   font: [weight | style] size[/line-height]  family;

背景

background
•   background-color :      背景颜色

```
    image :         背景图片
                        url(图片地址)
     position:  背景定位X Y 
     repeat:    背景重复no-repeat
     size:      背景大小
     attachment : 背景固定fixed
```

•   简写:
•   background: [color | image | position[/size] | repeat | attachment ]

权重优先级

权重优先级
•   标签:     1
•   class:  10
•   id:     100
•   权重值相同时: 离标签越近, 优先级越高
•   权重值不同时: 权重值越高, 优先级越高
•   权重值可以叠加
•   最高权重, 没有确切的权重值, 位置: 写在属性值的后面
•   继承性
•   大多数属性都是可以继承的
•   小部分属性不能继承祖辈属性
•   例如: 
•   h   标签不能继承大小
•   a   标签不能继承颜色

边框

•   边框 border
•   四边
•   border-color: 默认值

```
         -width: 默认值
        -style: 
              solid     实线
              none  没线
                    ...
```

•   简写: border: style [color | width]
•   单边
•   border-方向-属性

```
              -left
              -right
              -top
              -bottom
```

•   简写: border-方向: style [ color | width ]
•   圆角:
•   border-radius:  px | %
•   border-上下-左右-radius: 
•   边框合并
•   border-collapse: collapse   边框合并 (适用于表格)
•   轮廓
•   outline: none   常用none
    width color style

盒子阴影

box-shadow: 10px 20px 30px 40px red
•   10px: 水平位移      +: 右  -:左
•   20px: 垂直位移      +: 下  -:上
•   30px: 模糊度       不能为负数
•   40px: 阴影面积      可以为负数, 可省略(与本身一样大)
•   inset: 内阴影

列表属性

•   list-style: none;

•   去除列表之前的符号

溢出

overflow-x: hidden | visible | auto
•   overflow-y: hidden | visible | auto
•   overflow: hidden | visible | auto
•    hidden: 将溢出的内容隐藏
•    vibible: 将溢出的内容显示  默认
•   auto: 将溢出的内容通过滚动条显示
•   min-wdith: 最小宽度
•   min-height: 最小高度
•   max-width: 最大宽度
•   max-height: 最大宽度

文本

text-indent     : 首行缩进

```
    -decoration : 文本修饰
                    underline       下划线
                    overline        上划线
                    line-through    删除线
                    none
     -align:    水平对齐方式
                    left
                    center
                    right

            -shadow: 文字阴影
                10px: 水平对齐
                20px: 垂直对齐
                30px: 模糊度   不能为负数
                阴影颜色

            -overflow: ellipsis     将溢出的隐藏内容用 ... 代替
                需要配合
                    white-space
                    overflow
```

•   vertical-align : 垂直对齐方式  (默认对外)

鼠标样式

•   cursor:

•       pointer     手
•       move        移动
•       text        文本
•       default     默认箭头
•       none        隐藏

字体图标

@font-face{

```
    font-family: 自定义家族名
    src: url(字体文件地址)
    }
```

•   link导入

•   字体图标  
•   @font-face{
•   font-family: 自定义家族名
•   src: url(字体文件地址)
•   } <title>字体图标</title>
•   <link rel="stylesheet" href="./fonts-mi/iconfont.css">
•   <style>
•   p:hover{color:red;}
•   </style>

盒子模型

标准组成:   内容 + 内边距 + 边框       外边距

IE组成:   内容(内边距,边框)          外边距

内联块元素

  块级元素  block

1. 总是独占一行

2. 宽度默认与浏览器一样

3. 高度默认与内容一致

4. 宽高, 行高, 内外边距 都是可以控制

5. 容纳性: 任何元素
   内联元素 (行级元素) inline

6. 总是不会独占一行

7. 宽度默认与内容一致

8. 高度默认与内容一致 

9. 宽高, 行高, 内外边距 部分可以控制 (自己测试)

10. 容纳性: 只能容纳内联元素

    元素转换    
    display:    
    table-cell      单元格 td
    block           块级元素
    inline          内联元素
    inline-block    内联块元素
    none        隐藏元素        不保留原来的位置
    visibility: hidden      隐藏元素        保留原来的位置
    visible     显示元素

内外边距

外边距     元素与元素之间的距离
•   margin: 10px                上下左右均为10px
•   margin: 10px 20px           上下10    左右20
•   margin: 10px 20px 30px      上10     左右20    下30
•   margin: 10px 20px 30px 40px 上10     右20     下30     左40
•   单方向:

```
            margin-方向: 
                  -top
                  -left
                  -right
                  -bottom

```

•   水平居中
•   margin-left: auto;
•   margin-right: auto;
•   margin: 100px auto  30px

•   内边距

•       padding: 10px                   上下左右均为10px
•       padding: 10px 20px              上下10    左右20
•       padding: 10px 20px 30px         上10     左右20    下30
•       padding: 10px 20px 30px 40px    上10     右20     下30     左40

•       单边:
•           padding-方向:

定位

position: absolute;     

•   位置: 不保留原来的位置        

•   原点: 基于第一    页的四个角落

•   所有定位: 当元素发生重叠时, 可以使用定位
•   相对定位

•       position: relative;
•       位置: 保留原来的位置
•       原点: 基于原来的位置

•   固定定位

•       position: fixed
•       位置: 不保留原来的位置
•       原点: 基于可视窗口的四个角落

•   如何让子元素 基于父元素的四个角落进行定位

•       父元素: 任何定位  (推荐: 相对定位)
•       子元素: 绝对定位

浮动

•   float: left | right | none;

•   注意: 不保留原来的位置

•   清浮动

•   清除浮动1

•       原理: 后面的同级元素 清除前面的同级元素
•       clear: left | right | both

•   清除浮动2

•       BFC区域 实现清除子元素的浮动 (不包括孙子及更大的后辈)
•       BFC: 不会影响到区域外的元素
•       overflow:hidden;    

•   清除浮动3    推荐

•       ::after{
•           clear: both
•           content:'';
•           display: table;
•       }       

•   如果有发现只有after时, 不起作用了, 请补上before

•       ::before{
•           content:'';
•           display: table;
•       }

CSS初始化

例:/* 腾讯 */

    body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
    body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
    a{color:#2d374b;text-decoration:none} 
    a:hover{color:#cd0200;text-decoration:underline} 
    em{font-style:normal} 
    li{list-style:none} 
    img{border:0;vertical-align:middle} 
    table{border-collapse:collapse;border-spacing:0} 
    p{word-wrap:break-word} 

    /* 新浪 */
    body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
    body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} 
     
    ul,ol{list-style-type:none;} 
    select,input,img,select{vertical-align:middle;} 
     
    a{text-decoration:none;} 
    a:link{color:#009;} 
    a:visited{color:#800080;} 
    a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} 

    /* 淘宝 */
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
    h1, h2, h3, h4, h5, h6{ font-size:100%; } 
    address, cite, dfn, em, var { font-style:normal; } 
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
    small{ font-size:12px; } 
    ul, ol { list-style:none; } 
    a { text-decoration:none; } 
    a:hover { text-decoration:underline; } 
    sup { vertical-align:text-top; } 
    sub{ vertical-align:text-bottom; } 
    legend { color:#000; } 
    fieldset, img { border:0; } 
    button, input, select, textarea { font-size:100%; } 
    table { border-collapse:collapse; border-spacing:0; }

    /* 网易 */
    html {overflow-y:scroll;} 
    body {margin:0; padding:29px; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;} 
    div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} 
    table,td,tr,th{font-size:12px;} 
    li{list-style-type:none;} 
    img{vertical-align:top;border:0;} 
    ol,ul {list-style:none;} 
    h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} 
    address,cite,code,em,th {font-weight:normal; font-style:normal;}

平滑过渡

平滑过渡
•   transition: 属性  持续时间    速率    延迟时间;
•   属性:         指定多个属性, 直接用all
•   持续时间:   单位  s/ms
•   速率:         linear  默认 匀速

•   ease-in     加速
•   ease-out    减速
•   ease-in-out 先加速再减速

•   延迟时间:   单位  s/ms

•   适合用于 有数值变化的属性

变形

transform:  

•       none        不变形
•       translate   位移
•       translate(X)
•       translate(X,Y)
•       translateX()
•       translateY()

•   rotate      旋转      单位: 度 deg

•               rotate()
•               rotateX()
•               rotateY()

•   skew        扭曲  单位: 度 deg

•               skew()
•               skewX()
•               skewY()

•   注意: 90deg的奇数倍, 会扭没了
•   scale       中心缩放
•   单位: 倍数
•   1: 本身
•   倍数: 可小数, 可负数
•   比1大的: 放大 
•   比1小的: 缩小