CSS常见样式的介绍和使用（附加案例）

CSS常见样式的介绍和使用（附加案例）选择器的理解与应用常见样式附加案例

PIKapikaaaa

6702人浏览 · 2022-03-21 22:12:01

PIKapikaaaa · 2022-03-21 22:12:01 发布

CSS样式

一、css介绍

层叠样式表(英文全称：Cascading Style Sheets)

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

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

二、使用

2.1使用方式

css不可以单独使用需要内嵌到HTML中

使用方式：

方式一：行内样式:使用style属性，引入css样式 name id class 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>
    <!--方式2： 内联式 ： style标签内部引入css样式-->
    <link rel="stylesheet" href="../css/demo.css">
    <style>
        h1{
            color: aqua;
        }

        p{
            color: blue;
        }
        
    </style>
    <!--方式3：  外部样式-->
    
</head>
<body>
    <!--方式一： 行内样式:使用style属性，引入css样式   name id class style-->
    <!--优先级： 行内样式 >  外部样式-内联式(就近原则，谁离文本近谁有优先级最高)-->
    <p style="color: chartreuse;">
        人间烟火气，最抚凡人心
    </p>

    <p>
        窗前明月光，疑是地上霜
    </p>

    <p>
        举头望明月，低头思故乡
    </p>

    <h1 >
        本是天上逍遥的仙儿
    </h1>
</body>
</html>

2.2选择器

理解

选择器定位到具体修饰的标签

选择器的种类：

1、标签选择器：根据标签名定位到具体的标签

2、id选择器：根据id属性名定位到该标签【id有且唯一】

3、class选择器，根据class的值定位标签 *
class的值可以有多个：【多个标签可以有相同的class】【一个标签可以有多个class】

4、组合选择器：可以根据多种选择器类型匹配选择器定位标签【中间用逗号隔开】

5、层级选择器：由外到内一层一层的定位【空格】

6、 *选择器

7、伪类选择器：通过选择器：状态定位标签

优先级：层级选择器 > 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>选择器</title>
</head>
<style>
    /* 1、标签选择器： 根据标签的名字定位到该标签 */
    p{
        font-size: larger;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: deeppink;
    }

    /* 2、id选择器： 根据id属性名定位到该标签【id有且唯一】 */
    #p1{
        color: blue;
    }

    /* 3、class选择器，根据class的值定位标签 */
    /* class的值可以有多个：【多个标签可以有相同的class】【一个标签可以有多个class】 */
    .d1{
        font-size: x-large;
        color: aqua;
    }

    /* 4、组合选择器：可以根据多种选择器类型匹配选择器定位标签【中间用逗号隔开】  */
    #p1,.d1{
        color: gold;
    }

    /* 5、层级选择器 ： 由外到内一层一层的定位 【空格】 */
    .d2 div span{
        font-size: small;
        color: blueviolet;
    }

    /* 6、 *选择器 ：  */
    *{
        margin: 0px;
    }

    /* 7、伪类选择器：通过 选择器：状态 定位标签 */

        /* 未点击状态 */
        #a:link{
            font-size: x-large;
            color: rgb(236, 18, 164);
        }
        /* 点击后状态 */
        #a:visited{
            color: rgb(221, 41, 17);
            font-size: medium;
        }
        /* 鼠标悬停状态 */
        #a:hover{
            color: dimgrey;
            font-size: x-large;
        }
        /* 鼠标点击不松开状态 */
        #a:active{
            font-size: x-small;
            color: magenta;
        }

        /* 优先级： 层级选择器 > id选择器 > 其他选择器【就近原则】 */
</style>
<body>
    <p>
        我落人中然自在，本是天上逍遥的仙儿~
    </p>

    <p id="p1">
        哎呀我说生存呐~
    </p>

    <div class="d1">
        哎呀我说命运呐~
    </div>
    <p class="d1">
        玫瑰无原则 心动至上
    </p>

    <div>
        我如果爱你，绝不像攀援的凌霄花
    </div>

    <div class="d2">
        <div>
            <span>内部标签</span>
        </div>
    </div>
    <span>外部标签</span>
    <hr>
    <a id="a" href="https://www.baidu.com">点击跳转百度</a>
</body>
</html>

三、css的语法

格式：key:value; 键值对

样式名与样式值之间用冒号隔开

样式与样式之间用分号隔开

完整格式

选择器{
样式名：样式值；

样式名：样式值；

………………

}

四、常见样式

4.1尺寸修饰

<style>
    .d1{
        width: 20%;
        height: 500px;
        background-color: coral;
        font-size: 2em;/* em : 倍数 --相对与父窗口中的内容*/
    }
</style>

<body>
    尺寸修饰
    <div class="d1">
        div的内容
    </div>
</body>

在这里插入图片描述

4.2字体修饰

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-weight 属性指定字体的粗细：

<style>
    .sp1{
        color: darkorange;
        font-size: 20px;
        font-weight: bolder;         /* bolder 字体是否加粗*/

        font-style: italic;          /* italic 字体是否倾斜*/

        font-family: "宋体";         /* 设置字体样式*/
    }

    .sp2{
        /* 简写 */
        /* 顺序不能能变：style-weigth-size-family */
        font:italic bolder  15px 宋体 ; 
        color:rgb(28, 235, 97);
    }
</style>
<body>
    <span class="sp1">
        我是个沉默不语的，靠着车窗想念你的乘客
    </span><br>
    <span class="sp2">
        当107路再次经过
    </span>
    <p>当107路再次经过</p>
</body>

在这里插入图片描述

4.3文本修饰

color: 字体颜色
text-align: center; - - 文本对齐方式
text-decoration:none; - - 文本的线
text-shadow: pink 5px 5px 2px; - - 文本的阴影【阴影颜色-水平方向的偏移量-垂直方向的偏移量-模糊距离】
line-height: - - 行高（文本在标签内所占的高度）
width:
height:
border: 1px #ffffff solid; - - 盒子边框【边框粗细-颜色-边框线样式】


    <style>
        .p{
            color: rgb(0, 255, 21);                 /* 字体颜色 */
            text-align: center;                       /* 文本对齐方式 */
            text-decoration:none;                     /* 文本的线 */
            text-shadow: pink 5px 5px 2px;          /* 文本的阴影 【阴影颜色-水平方向的偏移量-垂直方向的偏移量-模糊距离】*/
            line-height: 400px;                       /* 行高 （文本在标签内所占的高度）*/
            width: 400px;
            height: 300px;
            border: 1px rgb(76, 14, 223) solid;     /* 盒子边框【边框粗细-颜色-边框线样式】 */
        }
    </style>
</head>

<body>
    <p class="p">我不是你的先生宋东野</p>
    <a href="https://www.baidu.com"></a>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4IWqIRPk-1647871288781)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\CSS样式.assets\image-20220321213356486.png)]$

4.4背景修饰

width: 500px;
height: 1200px;
background-color: pink; - - 背景颜色
background-image: url(…/img/background.jpg); - - 背景图片
background-repeat: no-repeat; - - 背景图片是否平铺
background-position: left top; - - 指定背景图片的位置
background-attachment: fixed; - - 背景图片是否随着标签滚动【fixed-固定 scroll-滚动】

   <style>
        .d{
            width: 500px;
            height: 1200px;
            background-color: pink;                                   /* 背景颜色  */
            background-image: url(../img/background.jpg);               /* 背景图片  */
            background-repeat: no-repeat;                               /* 背景图片是否平铺  */
            background-position: left top;                              /* 指定背景图片的位置  */
            background-attachment: fixed;                               /* 背景图片是否随着标签滚动 【fixed-固定  scroll-滚动】 */
        }
    </style>
</head>
<body>
    <div class="d">

    </div>

在这里插入图片描述

4.5定位修饰

relative- -相对定位相对变迁原先的位置为起点【通过top left right bottom 来调整】

absolute- -绝对定位以页面的左上为起点【通过top left right bottom 来调整】

fixed- -固定定位【位置不会变化】

 <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .d2{
            width: 150px;
            height: 150px;
            background-color:red;
            
            position: relative;             /* 位置【  absolute-绝对定位  fixed-固定定位】*/
            top: 50px;
            left: 50px;
            /* relative-相对定位  相对变迁原先的位置为起点 通过top left right bottom 来调整 */
            /* absolute-绝对定位  以页面的左上为起点 通过top left right bottom 来调整 */
            /* fixed-固定定位 位置不会变化*/
        }
    </style>
</head>
<body>
    <div class="d1">

    </div>

    <div class="d2">

    </div>
</body>

在这里插入图片描述

4.6浮动

float ：left | right

特点：

1、一经读懂脱离文档流

2、标签将不再独占一行

3、顶部对齐

注意：

浮动会影响后面的标签布局，因此使用了浮动之后需要清除浮动
清除浮动
div style=“clear: both;”></div

 <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: right;
        }

        .d2{
            width: 50px;
            height: 50px;
            background-color: rgb(115, 255, 0);
            float: left;                    /* 浮动 【会影响页面布局，需要清除标签】 */
        }

        .d3{
            width: 150px;
            height: 150px;
            background-color: rgb(255, 0, 242);
            float: left;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <!-- 清除浮动 -->
    <div style="clear: both;">

    </div>
> 概述：是一个双列集合，属于map集合的实现类。
* 集合中的key值是唯一的，元素是无序的
* HashMap集合去重原理和无序原理和HashSet集合原理一致
* 通过比较key的哈希值和equals的结果来实现去重
* HashSet集合底层就是使用HashMap来实现的
### LinkedHashMap集合
 概述：是一个双列集合，是HashMap集合的子类
**特点：** 本类没有特殊的方法，只能使用父类中继承的 集合中元素有序 集合中的key值唯一
### 【笔试题】HashMap集合和HashTable集合的区别相同点：**两个集合都是Map接口的实现类，都属于双列集合
两个集合底层是使用哈希表来存储数据
* 两个集合中的方法大致相同
**不同点：** 版本不同：HashMap是jdk1.2出现的，HashTable是jdk1.0出现
* 线程安全性不同：HashMap是线程不安全的，HashTable线程安全的
* 存储的值不同：HashMap可以存储null键null值，HashTable不可以存储null
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ywj72qxG-1647871288784)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\CSS样式.assets\image-20220321214316996.png)]$

4.7display

特点：

1、可以实现底部对齐

2、可以实现块标签、行标签以及行内块的转换

3、隐藏标签

块标签：独占一行可以设置宽高

行标签：不独占一行不可以设置宽高

行内块：不独占一行可以设置宽高

<style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            display: inline-block;  /* 转为行内块  ：可以设置宽高、但不独占一行 */
        }

        .d2{
            width: 50px;
            height: 50px;
            background-color: rgb(115, 255, 0); 
            display: inline-block;  /* 转为行内块 */                  
        }

        .d3{
            width: 150px;
            height: 150px;
            background-color: rgb(255, 0, 242);
            display: inline-block;  /* 转为行内块 */
        }
        .sp1{
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: coral;
        }
        .sp2{
            display: block;
            width: 50px;
            height: 50px;
            background-color: rgb(2, 62, 228);
        }
        h2{
            display: none;    /* 隐藏标签 */
        }
    </style>
</head>
<body>
    <h2>display的使用</h2>
    <div class="d1"></div>

    <div class="d2"></div>

    <div class="d3"></div>
    <span class="sp1">span1内容</span>
    <span class="sp2">span2内容</span>
    body
</body>

在这里插入图片描述

4.8盒子模型

为页面提供了一种思路

边框： border

内边距：padding—-盒子中的内容与盒子边框的距离

外边距：margin——盒子中的内容与盒子边框的距离

注意：

盒子总大小： width / height + 边框×2 + margin×2 + padding×2

 <style>
         .d1{
        width:100%;
        height:30px;
        background-color: #e3e4e5;
        }

        .d2{
            width: 100%;
            height: 140px;
            background-color: #ffffff;
        }

        .d3{
            width: 100%;
            height: 1000px;
            background-color: #f4f4f4;
        }

    </style>
</head>
<body>
    <div class="d1">

    </div>
    <div class="d2">

    </div>
    <div class="d3">

    </div>
</body>

在这里插入图片描述

案例

案例一、京东头部

<!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>
<style>
    *{
        margin: 0px;
        padding: auto;
    }

    .dd{
        width: 100%;
        height: 40px;
        background-color: #e3e4e5;
    }

    
    ul{
        /* 去除ul列表前的圆点 */
        list-style-type: none;
        margin-left: 700px;
        font-size: 12px;
        color: #999999;
    }
    ul li{
        float: left;
        /* li标签间隔 */
        margin-left: 15px;
        /* 垂直方向居中 */
        line-height: 40px;
    }
</style>
<body>
    <div class="dd">
        <ul>
            <li>您好，请登录</li>
            <li>|</li>
            <li>我的订单</li>
            <li>|</li>
            <li>我的京东</li>
            <li>|</li>
            <li>京东会员</li>
            <li>|</li>
            <li>企业采购</li>
            <li>|</li>
            <li>客户服务</li>
            <li>|</li>
        </ul>
    </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>
        *{
            margin: 0px;
            padding: auto;
        }
        .header{
            /* border: 1px solid black; */
            width: 100%;
            height: 80px;
        }
        .header img{
            float: left;
            margin-left: 465px;
            margin-top: 8px;
        }
        .header font{
            font-size: 24px;
            line-height: 80px;
            color: #484e53;
            float: left;
            margin-top: 5px;
            margin-left: 24px;

        }
        .dd img{
            margin-top: 12px;
            position: absolute;
            line-height: 40px;
            margin-left:490px ;
        }
        .dd p{
            /* float: left; */
            margin-left:510px ;
            line-height: 40px;
        }
        .dd{
            position: absolute;
            width: 100%;
            height: 40px;
            background-color: antiquewhite;           
        }
        
        .body{
            /* border: 1px solid rgb(11, 220, 235); */
            width: 100%;
            height: 475px;
            background-color: #8ABFE9;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            /* background-image: url(img/body.jpg); */
            margin-top: 40px;
        }

        .login{
            /* border: 1px solid rgb(11, 220, 235); */
            position: absolute;
            width: 347px;
            height: 370px;
            background-color: #ffffff;
            margin-left: 1108px;
            margin-top:-440px;
            position: absolute;
            float: left;
        }
        
        .body .login p font {
            position: absolute;
            color: #b5b5b6;
            margin-left: 50px;
            margin-top: 30px;
            font-size:large;
            
        }
       
        .body .login p font1{
            position: absolute;
            font-size:large;
            color: #fa0909;
            margin-top: 30px;
            margin-left: 222px;
            margin-bottom: 5px;
        }

        .body .login font2{
            position: absolute;
            margin-top: 63px;
            color: #b5b5b6;
            font-size: small;
            
        }

        .body .login p .um{
            
            width: 40px;
            height: 40px;
            border: 1px solid #c3c3c3;
            background-image: url(img/ren.jpg);
            
            background-size: 100% 100%;
            float: left;
            margin-top: 19px;
            margin-left: 20px;
        }

        .body .login p input{
            width: 266px;
            height: 38px ;
            float: left;
            border: none;
            margin-top: 19px;
            border: 1px solid #c3c3c3;

        }
        .body .login p1 .sm{
            width: 40px;
            height: 40px;
            border: 1px solid #c3c3c3;
            background-image: url(img/锁.jpg);
            
            background-size: 100% 100%;
            float: left;
            margin-top: 12px;
            margin-left: 20px;
        }
        .body .login p1 input{
            width: 266px;
            height: 38px ;
            float: left;
            border: none;
            margin-top: 12px;
            border: 1px solid #c3c3c3;

        }
        #pp{
            position: absolute;
            margin-top: 200px;
        }
        #button{
            position: absolute;
            float: left;
            width: 314px;
            height: 40px;
            background-color: #df0a17;
            margin-top: 160px;
            margin-left: -314px;
            text-align: center;
            font-size:x-large;
            line-height: 40px;
            color: #ffffff;
            text-decoration: none;
            
        }

        #forget{
            position: absolute;
            color: rgb(63, 62, 62);
            margin-top: 130px;
            margin-left: -50px;
        }
        #login-footer{
            width: 347px;
            height: 50px;
            background-color: #f3ecec88;
            margin-left: 1108px;
            margin-top:-120px;
            position: absolute;
            float: left;
        }
        #qq{
            position: absolute;
            margin-top: 20px;
            margin-left: 20px;
        }
        #wei{
            position: absolute;
            margin-top: 20px;
            margin-left: 90px;
        }
        #reg{
            position: absolute;
            margin-top: 20px;
            margin-left: 250px;
        }
        .QQ{
            position: absolute;
            color: rgb(63, 62, 62);
            margin-top: 18px;
            margin-left: 43px; 
        }
        .weixin{
            position: absolute;
            color: rgb(63, 62, 62);
            margin-top: 18px;
            margin-left: 113px; 
        }
        .REG{
            position: absolute;
            color: rgb(63, 62, 62);
            margin-top: 18px;
            margin-left: 273px; 
        }

        .footer{
        width: 100%;
        height: 40px;
        background-color: #FFFFFF;
    }

        ul{
        /* 去除ul列表前的圆点 */
        list-style-type: none;
        margin-left: 480px;
        font-size: 12px;
        color: #999999;
    }
    ul li{
        float: left;
        /* li标签间隔 */
        margin-left: 13px;
        /* 垂直方向居中 */
        line-height: 40px;
    }
    #footword{
        position: absolute;
        color: #999999; 
        font-size: 12px;
        margin-top: 40px;
        margin-left: 830px;
    }
    #tip{
        position: absolute;
        margin-top: 50px;
        margin-left: 1108px;
        z-index: 99;
        background-color: antiquewhite;
        text-align: center;
        font-size: small;
        line-height: 40px;
        color: #858282;
        width: 347px;
        height: 40px;
    }
    #chat{
        margin-top: 55px;
    }
    #page{
        position: absolute;
        color: rgb(109, 107, 107);
        font-size: small;
        margin-left: 610px;
        margin-top: 20px;
    }
    #img{
        z-index: -1;
        margin-left: 470px;
        font-size: 100% 100%;
    }
    </style>
</head>
<body>
    <div class="header">

        <img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" >
        <font id="page">登录页面，调查问卷</font>
        <font>欢迎登录</font>
        <img id="chat" src="https://misc.360buyimg.com/user/passport/1.0.0/css/i/q-icon.png">
    </div>
    <div id="tip">
        <img src="https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png">
        <font>京东不会以任何理由要求您转账汇款，谨防诈骗。</font>
    </div>
    <div class="dd">
        <img src="https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png" >
        <p style="color: #858282; font-size:x-small; ">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</p>
    </div>

    <div class="body">
        <img id="img" src="img/body.jpg" alt="">
        <div class="login">
            <p>
                <font>扫码登陆</font>
                <font1>账户登录</font1>
            </p>
            <font2>——————————————————————————</font>
            <p>
                <span class="um"></span>
                <input type="text" name="username" placeholder="邮箱/用户名/手机号">
            </p>
            <p1>
                <span class="sm"></span>
                <input type="password" name="username" placeholder="请输入密码">
                
            </p>

            <!-- <span >登&nbsp;&nbsp;录</span> -->
            <a id="button" href="https://www.baidu.com/">登&nbsp;&nbsp;录</a>
                <span id="forget" ">忘记密码</span>         
        </div>
        <div id="login-footer">
            <p id="qq">
                <img src="img/QQ.jpg" >
            </p>
            <font class="QQ">QQ</font>
            <p1 id="wei">
                <img src="img/WEchart.jpg">
            </p1>
            <font class="weixin">微信</font>

            <p2 id="reg">
                <img src="img/注册.jpg" >
            </p2>
            <font class="REG">立即注册</font>
        </div>       
    </div>
    
    <div class="footer">
            <ul>
                <li>关系我们</li>
                <li>|</li>
                <li>联系我们</li>
                <li>|</li>
                <li>人才招聘</li>
                <li>|</li>
                <li>商家入驻</li>
                <li>|</li>
                <li>广告服务</li>
                <li>|</li>
                <li>手机京东</li>
                <li>|</li>
                <li>友情链接</li>
                <li>|</li>
                <li>销售联盟</li>
                <li>|</li>
                <li>京东社区</li>
                <li>|</li>
                <li>京东公益</li>
                <li>|</li>
                <li>English Site</li>
                <li>|</li>
            </ul>

            <div id="footword">Copyright © 2004-2022  京东JD.com 版权所有</div>
    </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uElRu829-1647871288788)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\CSS样式.assets\image-20220321215455055.png)]

        </p2>
        <font class="REG">立即注册</font>
    </div>       
</div>

<div class="footer">
        <ul>
            <li>关系我们</li>
            <li>|</li>
            <li>联系我们</li>
            <li>|</li>
            <li>人才招聘</li>
            <li>|</li>
            <li>商家入驻</li>
            <li>|</li>
            <li>广告服务</li>
            <li>|</li>
            <li>手机京东</li>
            <li>|</li>
            <li>友情链接</li>
            <li>|</li>
            <li>销售联盟</li>
            <li>|</li>
            <li>京东社区</li>
            <li>|</li>
            <li>京东公益</li>
            <li>|</li>
            <li>English Site</li>
            <li>|</li>
        </ul>

        <div id="footword">Copyright © 2004-2022  京东JD.com 版权所有</div>
</div>

```

在这里插入图片描述