CSS

CSS概述

CSS全称层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

层叠

多个样式可以作用在同一个html元素上

样式表

提供了丰富的样式修饰内容

作用

样式丰富。功能强大
内容和样式分离(解耦)

CSS与HTML结合方式

css三种引入方式

行内样式
内部样式
外部样式

行内样式

在标签内使用style属性指定css代码。该方式定义样式作用于为整个页面。
特性
- 复用性不好，不提倡使用，在测试中可以使用
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 行内引入 -->
    <div style="width: 200px;height: 200px;border:1px solodl"></div>
</body>
</html>

内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码。
特性
- 样式与结构未全部分离，控制当前页面的标签样式使用，复用性不好
例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
            /* 选择器：给某个元素上作用样式就必须先获取某个元素 ，执行特定任务的选择器*/
            div{
                width: 200px;
                height: 200px;
                border:1px solodl
            }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

外部样式

定义css文件，在head标签中使用link标签，引入外部的资源文件。
语法格式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

特性
- 重用性较强, 一个css样式文件可以控制多个页面、可以达到结构和样式的彻底分离
例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>

   <!-- 外部引入 
       rel:样式表
       href：外部的css文件路径
       type：引入的外部文件类型    可选 
       
   -->
   <!-- 方式一 -->
   <link rel="stylesheet" href="../css/demo.css" type="text/css">

   <!-- 方式二 -->
   <style>
       @import url("../css/demo.css");
   </style>
</head>
<body>
   <div></div>
</body>
</html>

优先级

行内>内部|外部(后加载生效)

CSS语法格式

无论使用HTML还是CSS都需要遵从一定的规范。

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

格式

选择器{
属性1:属性值;
属性2:属性值;
属性3:属性值;
...
}
h1
{}：限定范围，指当前花括号内的所有样式都属于当前选择器

注意事项

选择器严格区分大小写，属性和属性值不区分大小写。

CSS选择器

基本选择器

想要将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。
筛选具有某一特征的元素
分类
- 标签选择器
- ID选择器
- 类选择器
标签选择器
- HTML标签指HTML的标记名称、如div、html、body、input等
- 格式
  - 标签名{
    样式一;
    样式二;
    ....
    }
- 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        /* 
        标签选择器:给当前页面中所有此种标签作用样式 
        
        */
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

ID选择器
- ID选择器CSS中用“#”开头定义，后面跟随ID名称。例如：#name
- ID为当前HTML元素的ID属性值。
- 格式
  - 【#id名称】{
    样式一;
    样式二;
    ....
    }
- 示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>

   <style>
       /* 
           id选择器:给网页中某一个元素作用样式
       */
       #d1{
           width: 100px;
           height: 100px;
           background-color: aqua;
       }

       #d2{
           width: 300px;
           height: 300px;
           background-color: yellow;
       }
   </style>
</head>
<body>
   <div id="d1"></div>
   <div id="d2"></div>
</body>
</html>

类选择器
- 在css中类选择器使用“.”符号开头定义，后面跟随类名。例如：.name
  class属性
- 格式
  - .类名{
    样式一;
    样式二;
    ...
    }
- 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 
          类选择器：当前页面中引入此样式的所有类型的标签都可作用此样式
        */
        .p1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

</head>
<body>
    <div class="p1">   </div>
    <p class="p1"></p>
</body>
</html>

其他选择器

全局选择器
- 全局选择器又称通用选择器，将匹配任何标签, 使用来表示。
- 格式
  - *{
    样式一;
    样式二;
    }
- 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 全局选择器：任意标签都作用此样式 */
        *{
            color: hotpink;
        }
    </style>
</head>
<body>
    <div>中国梦之队</div>
    <p>跳水冠军</p>
    <span>亚军也是</span>
</body>
</html>

组合选择器
- 当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
- 示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>


   <style>
       /* 组合选择器 */
       div,p{
           color: red;
       }

       .p1,#username,#password{
           width: 200ps;
           height: 200px;
           color: rebeccapurple;
       }
   </style>
</head>
<body>
   <div>中国</div>
   <p>在亚洲，非常强大</p>

   <input type="text" name="username" id="username">
   <input type="password" name="password" id="password">

   <span class="p1">
       小日本奥运会不讲五得
   </span>
</body>
</html>

后代选择器
- 获取某个元素下所有子孙元素
- 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 后代选择器 获取某个元素下所有子孙元素*/
        div span{
            color: salmon;
        }

    </style>

</head>
<body>
    <div>
        <p>
            我没有颜色
        </p>

        <p>
            <span>中国人很厉害</span>
        </p>

        <span>
            中国人很强大
        </span>
    </div>
</body>
</html>

子元素选择器

获取某个元素下所有的子元素（不包含孙子元素）

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
            /* 子选择器 获取某个元素下所有子元素，不包含孙子元素*/
            div>span{
                color: salmon;
            }
    
        </style>
    
    </head>
    <body>
        <div>
            <p>
                我没有颜色
            </p>
    
            <p>
                <span>中国人很厉害</span>
            </p>
    
            <span>
                中国人很和蔼
            </span>
        </div>
    </body>
    </html>

属性选择器
- 以属性名或者属性值来匹配对应标签
- [attr] 该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
- [attr=val] 该选择器仅选择 attr 属性被赋值为 val 的所有元素。
- 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 属性选择器：[href]获取当前页面中该属性所有元素
                [href="http://www.baidu.com"]获取准确的当前元素
        */
        [href]{
            /* 去除下划线 */
            text-decoration: none;
        }

        [src]{
            width: 100px;
            height: 100px;
        }

        [href="http://www.baidu.com"]{
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">点我</a>
    <a href="http://www.baidu.com">点我</a>

    <img src="../img/1.jpg" alt="">
</body>
</html>

伪类选择器
- 分类
  - a:link 未访问的颜色
  - a:visited 已访问的颜色
  - a:hover 鼠标悬浮的颜色
  - a:active 鼠标点击时候的颜色
  - 注意事项：位置不能改变
- 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style> 
    /* 伪类选择器：超链接的4中状态标识 
        书写顺序不能改变
    */

    /* 未访问点击的颜色 */
        a:link{
            color: red;
        }

        /* 已访问过的颜色 */
        a:visited{
            color: gray;
        }

        /* 鼠标悬浮时颜色 */
        a:hover{
            color: violet;
        }

        /* 鼠标点击时颜色 */
        a:active{
            color: blue;
        }
    </style>
</head>
<body>
    <a href="#">点我</a>
</body>
</html>

CSS常见属性

尺寸修饰

属性

属性名	属性说明
height	设置元素的高度
width	设置元素的宽度

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        [src]{
            width: 100px;
            height: 100px;
        }

    </style>

</head>
<body>
    <img src="../img/2.jpg" alt="">
</body>
</html>

字体样式

属性

属性名	属性说明
font-size	字体大小
font-style	字体风格(取值：italic/normal...)取值(扩展):italic : 斜体。normal : 默认值。正常的字体
font-family	字体类型(取值：隶书/微软雅黑...)
font-weight	字体粗细取值:Normal 默认值。bold 粗体字符 bolder 更粗的字符 lighter 定义更细的字符

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p{
            font-size: 28px;
            font-family: '楷体';

            /* 斜体 */
            font-style: italic;  
            
            /* 
            100-900     数字越大字体越粗  400正常字体 
            bold:加粗   相当于700
            bolder：最粗  相当于900
            */
            font-weight: 600;
        }
    </style>
</head>
<body>
    
    <!-- 
        font-size:字体大小
        font-family:字体风格    宋体、楷体等
        font-style:字体样式
        font-weight:字体粗细

     -->

     <p>
         犯我中华者，虽远必诛
     </p>

</body>
</html>

文本样式

属性

属性名	属性说明
color	文本颜色（取值：colorname或#0000FF）
text-align	文本对齐（取值：left/right/center...）
text-decoration	文本装饰，取值:none默认、underline下划线、 overline上划线、line-through删除线
line-height	设置行高
text-shadow	指定文本内容的阴影参数1：水平阴影位置参数2：垂直阴影位置参数3：模糊度(数字越大越模糊) 参数4：颜色

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p{
            /* 文本颜色 */
            color: red;
            /* 文本装饰 
                 overline:上划线
                 underli：下划线 
                 line-throug：穿过线
                 none：没有样式  
            */
            text-decoration: overline;

            /* 文本对齐方式 
                center:居中
                left
                right
            */
            text-align: center;

            /* 行高 */
            line-height: 40px;
            /* 文本阴影： 
                参数1：水平阴影位置
                参数2：垂直阴影位置
                参数3：模糊度
                参数4：颜色
            */
            text-shadow: 10px 10px 2px black;
        }

        a{
            text-decoration: none;
        }
    </style>

</head>
<body>
    <a href="#">点我</a>
    <p>
        最近天气不错，天天下雨<br>
        适合睡觉，休闲又恰逸
    </p>
</body>
</html>

边框样式

属性

属性名	属性说明
border-width	边框宽度按方向设置：border-(left/right/top/bottom)-width
border-color	边框颜色按方向设置：border-(left/right/top/bottom)-color
border-style	边框风格按方向设置：border-(left/right/top/bottom)-style

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        /* 
            border-(top|legt|bottom|right)-width:边框的宽度
            border-(top|legt|bottom|right)-style:边框的样式dashed  虚线、dotted 点线 、 double 双实线、solid 实现
             border-(top|legt|bottom|right)-color:边框的颜色
        */

        div{
            width: 400px;
            height: 400px;

            /* 设置上边框 */
            border-top-width: 2px;
            border-top-style: solid;
            border-top-color: red;

            /* 简写  dashed  虚线*/
            border-left: green dashed 3px;

            /* dotted 点线 */
            border-bottom:dotted goldenrod 10px ;

            /* double 双实线 */
            border-right:10px double darkcyan;

            /* 设置圆角 
                设置一个值表示：上下左右4条边都是80%弧度
                设置两个值表示：值1：左上和右下  值2：左下和右上
                设置三个值表示：值1：左上 值2：右上和左下 值3：右下
                设置四个值表示：顺时针方向
            */
            border-radius: 10% 50% 80%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

设置圆角边框
- 属性

属性名	属性说明
border-radius	圆角边框按方向设置值：border-(top/bottom)-(left/right)-radius

背景样式

属性

属性名	属性说明
background-color: yellow;	背景颜色
background-image: url(img/1.jpeg);	背景图片
background-repeat	背景是否平铺取值:repeat-x : 水平方向平铺repeat-y : 垂直方向平铺repeat : 水平和垂直方向同时平铺no - repeat : 不平铺
background-position: center;	背景偏移
background-attachment	背景是否随内容滚动取值:scroll背景图片随页面的其余部分滚动。这是默认fixed背景图像是固定的, 不滚动

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 600px;
            height: 600px;

            /* 背景颜色 */
            /* background-color: darkcyan; */

            /* 背景图片 */
            background-image: url(../img/1.jpg);

            /* 背景大小 */
            /* background-size: 100%; */

            /* 背景偏移
                值1：x轴偏移  正数向右偏移
                值2：y轴偏移  正数向下偏移
            */
            /* background-position: -50px -10px; */

            /* 
            背景平铺
                repeat-x：只允许横向平铺
                repeat-y:只允许纵向平铺
                no-repeat:不平铺
            */
            /* background-repeat: repeat-x; */

            /* 背景是否随内容进行滚动 
                fixed：固定
                scroll：随着滚动

            */
            background-attachment: scroll;


        }
    </style>
</head>
<body>
    <div></div>

    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>

    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>
    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>

    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>
    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>
    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>
    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>
    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>
    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>
    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>
    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>
    <p>人在塔在<br>
        人亡塔忘<br>
        多人运动<br>
    </p>

</body>
</html>

盒子模型

概念
- CSS 的框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
- 盒子宽度=内容宽度+左右外边距的宽度+左右内边距的宽度
- 盒子高度=内容高度+左右外边距的高度+左右内边距的高度
属性解析
- 内边距
  - padding，也叫填充。色这话元素内容与元素边距之间的距离
  - 填充的属性有四个取值：padding-(top/bottom/left/right)
- 外边距
  - margin：也叫空白边（margin），位于盒子的最外围，设置不同元素之间, 它们边框与边框之间的距离。
  - 空白边的属性有五种:margin-(top/bottom/left/right) margin
示例设置外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #d1{
            width: 200px;
            height: 200px;
            background-color: red;

            /* 设置外边间距 margin*/
            margin-top: 200px;
            margin-left: 300px;

        }

        #d2{
            width: 200px;
            height: 200px;
            background-color: rgb(44, 136, 44);

            margin-left: 300px;
            margin-top: 200px;
        }
    </style>

</head>
<body>
    <div id="d1"></div>
    <div id="d2">

    </div>
</body>
</html>

示例设置内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid;

            /* 设置内边距 padding
                盒子宽：内容的宽度+左和右内边距宽度+左和右外边距宽度
                盒子高：内容高度+上和下内边距的高度+上和下外边距的高度
            */
            padding-top: 80px;
            padding-left: 50px;

            /* 固定盒子大小 */
            box-sizing: border-box;
        }

    </style>
</head>
<body>
    <div>
        大帅哥
    </div>
</body>
</html>

布局样式

HTML有些标签默认从左到右排列，如input。有些则默认从上到下排列，如div。
解释
- 如果将这些默认从上到下的标签改变排列规则，按照从左到右的顺序排列，就需要用到浮动属性。float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
元素设置浮动后就会脱离标准文档流，所以会对页面中其他未设置浮动的元素排版产生影响，可以使用clear属性清除浮动。
浮动
- 让div元素由垂直分布变为水平分布
标准文档流
- 元素从上到下从左到右依次排序
属性解析
- float
  - float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  属性名属性说明
  
  left 元素左浮动
  
  right 元素右浮动
  
  none 默认值，不浮动

属性名	属性说明
left	元素左浮动
right	元素右浮动
none	默认值，不浮动

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #d1{
            width: 200px;
            height: 200px;
            background-color: green;

            /* 浮动属性 左浮动 */
            float: left;
        }

        #d2{
            width: 300px;
            height: 300px;
            background-color: red;
            
            float: left;
        }

        #d3{
            width: 400px;
            height: 400px;
            background-color: rebeccapurple;

            /* 右浮动 */
            float: right;
        }

        #p1{
            /* 清除左侧浮动 */
            /* clear: left; */

            /* 清除两侧浮动 */
            clear: both;
        }
    
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <p id="p1">这是一个段落标签</p>
</body>
</html>

定位样式

相对定位

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: salmon;

            /* 相对定位：
                1、以元素自身位置向左向右偏移 
                2、保留元素原始位置 */
            position: relative;
            top: 650px;
            left: 1250px;
        }

        p{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div></div>

    <p></p>
</body>
</html>

绝对定位

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #d1{
            width: 200px;
            height: 200px;
            background-color: red;

            /* 绝对定位：
                1、参考最近的父容器、如果没有父标签以body进行偏移
                2、元素元素位置不会保留
                 */
            position: absolute;
            top: 300px;
            left: 800px;
        }

        #d2{
            width: 200px;
            height: 200px;
            background-color: blue;    
        }

        #big{
            width: 600px;
            height: 600px;
            border: 1px solid;

            position: absolute;
            left: 400px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="d1"></div>
    </div>



    <div id="d2"></div>
</body>
</html>

列表修饰

HTML有丰富的标签，这些标签被定义成不同的类型，一般被分为块标签、行标签和行块标签。
块标签

	- 以区域块方式出现。每个块标签独自占一整行或者多行，且可设置宽高。
	<div> 、<h> 、<ul> <p>等

行标签
- 按行排列。
  设置大小没有变化

	- <span> 、 <strong> 、<a>等

行块标签
- 1、按行排列，
  2、但又可以设置宽高的标签。

	- <img>、<input>、<textarea>等

标签互相转换
- display属性：用于定义建立布局时元素生成的显示框类型.

属性解析

属性名	属性说明
block	此元素指定为块元素（块元素display的默认值）
inline	此元素将显示为行元素（行内元素display的默认值）
inline-block	将对象呈现为内联元素，对象内的元素块级展示。
none	隐藏元素

列表标签默认是带有项目符号的，如果不需要显示项目符号可以将列表样式中的list-style-type属性设置为none值去除

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input{
            width: 200px;
            height: 200px;
            /* 行内块转块级 */
            display: block;
        }
        img{
            width: 200px;
            height: 200px;
            /* 隐藏元素 */
            display: none;
        }

        span{
            width: 200px;
            height: 200px;
            border: 1px solid;

            /* 转成行内块 */
            display: inline-block;
        }

        #d1{
            width: 200px;
            height: 200px;
            border: 1px solid;
            
            /* 块级转行级 */
            display: inline;
        }
    </style>
</head>
<body>
    <!--在html中所有的标签都可以找到其归属的分类、众多标签分为3类
    1、类行级元素   span、a、strong
        1、不换行
        2、设置大小没有变化
    2、类块级标签   div、p、h标签、ul
        1、换行
        2、设置大小有变化
    3、行内块元素   input、img、textarea
        1、不换行
        2、设置有形态变化  

        display：inline以行级形态展示 
                 block 以块级形态展示
                inline-block 以行内块形态展示
                none 隐藏元素
        行级转块级
        块级转行级
        行级转行内块
        块级转行内块
        行内块转行级
        行内块转块级
    -->

    <input type="text" name="username" id="">
    <input type="password" name="password" id="">

    <span>我是迪迦奥特曼</span>
    <img src="../img/1.jpg" alt="">

    <div id="d1">我是div变成行级元素</div>

    <div ></div>
</body>

</html>

list-style-image
- 指定列表前的样式为图片
  示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        ul{
            /* 去除列表样式 */
            /* list-style-type: none; */

            /* 自定义列表样式 url中为样式地址*/
            /* list-style-image: url(); */
        }
        
    </style>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>桃子</li>
        <li>芒果</li>
    </ul>
</body>
</html>

posted @ 2021-08-03 19:03 Lucky_龍阅读(78) 评论(0) 收藏举报

刷新页面返回顶部

Lucky_龍

CSS