CSS

最新推荐文章于 2022-08-16 10:13:53 发布

青木小乙

最新推荐文章于 2022-08-16 10:13:53 发布

阅读量445

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/ggg_1314/article/details/112686616

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、什么是CSS？

CSS怎么用？
CSS是什么
CSS选择器

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS ：表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

1.2、快速入门

练习格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范：在<style>里面写css样式,每一个声明最好使用分号结尾
        语法:
            选择器{
                声明一;
                声明二;
                声明三;
            }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1>我是标题</h1>
</body>
</html>

等同于：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在html页面中注入css样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

h1{
     color: red;
 }

css优势：

内容和标签分离
网页结构标签统一，可以实现复用
样式十分的丰富
建议使用独立于html的css样式
利用SEO，容易被搜索引擎收录

1.3、css的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
    <!--内部样式-->
    <style>
        h1{
            color:green;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式：在标签元素中编写一个style标签-->
<!--优先级：就近原则-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

扩展：外部样式两种写法

链接式

html

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

导入式

    <style>
        @import url("css/style.css");
    </style>

2、选择器

作用：选择页面上的某一个或某一类标签

2.1、基本选择器

标签选择器:选择一类标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        /*标签选择器选中所有的标签*/
        h1{
            color: red;
            background-color: #b1ff8c;
            /*圆角边框*/
            border-radius: 10px; 
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>h1标签</h1>
<h1>h1标签</h1>
<p>p标签</p>
</body>
</html>

类选择器：class：选择所有的class属性一致的标签，可以跨标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*类选择器的名称 .class名称{}
         好处：可以多个标签归类，是同一个class
         可以复用
        */
        .he{
            color: red;
            background: pink;
        }
        .she{
            color: purple;
        }
    </style>
</head>
<body>

<h1 class="he">h1标签</h1>
<h1 class="she">h1标签</h1>
<p>p标签</p>
</body>
</html>

id 选择器：全局唯一。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*格式：
            #id名{}
        id必须保证唯一
        */
        #he{
            color: pink;
        }
    </style>
</head>
<body>

<h1 id="he">标题一</h1>
<h1>标题二</h1>
<h1>标题三</h1>
<h1>标题四</h1>
</body>
</html>

三个选择器之间的优先：
不遵循就近原则，id选择器>class选择器>标签选择器

2.2、层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p> p0</p>
<p class="p1"> p1</p>
<p> p2</p>

<ul>
    <li><p>li1</p></li>
    <li><p>li2</p></li>
    <li><p>li3</p></li>
</ul>
    
<p> p3</p>
<p> p4</p>
</body>
</html>

后代选择器选中自己所有的子孙后代

/*选中body下所有的p标签，包括li里面的p标签*/
body p{
	background: red;
}

子选择器只选择自己儿子辈的某些标签

/*选中body儿子辈中的p标签*/
body>p{
	background: red;
}

相邻兄弟选择器同辈

/*只选择 .p1同辈下面一个(弟弟)的p标签*/
.p1+p{
	background: red;
}

通用选择器

/*选择 .p1同辈下所有(弟弟)的标签*/
.p1~p{
	background: red;
}

2.3、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="#">dsafsa</a>
<p>标签一</p>
<p>标签二</p>
<p>标签三</p>
    
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
    
</body>
</html>

避免使用id选择器和class选择器

/* 选中ul的第一个li标签 */
ul li:first-child{
    background: #b1ff8c;
}

/* 选中ul下面最后一个li标签 */
ul li:last-child{
    background: #ff8aa9;
}

/* 选中标签一，定位到父元素，选择父元素的第一个元素 */
p:nth-child(1){     /* 选中p元素的父元素，选择父元素的第一个元素，且是p标签；如果不是，则失效*/
    background : #8a2dff;
}

/* 选中父元素下，标签为p的第二个元素*/
p:nth-of-type(2){
    background: blue;
}

/* a标签鼠标悬停变色 */
a:hover{
    background: yellow; /* 背景变 */
    color: #ff2cae;     /* 字体颜色变 */
}

2.4、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p class="demo">
    <a href="" id="first">1</a>
    <a href="" class="one two">2</a>
    <a href="" class="one two three">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="" id="end">8</a>
</p>
</body>
</html>

        .demo a{
            float: left;
            display: block;
            border-radius: 10px;
            height: 35px;
            width: 60px;
            line-height: 35px;
            text-decoration: none;
            background: blue;
            text-align: center;
            margin-right: 5px;
            color: lavenderblush;
        }

在这里插入图片描述

/* 属性名，属性名=属性值(正则) class
	=  绝对等于
	= 包含
*/

/* 存在id属性的元素 */
a[id]{
    background: yellow;
}

/* id为first的元素 */
a[id="first"]{
    background: red;
}

3、美化网页元素

3.1、为什么要美化

有效的传递页面信息
美化网页，页面漂亮才能吸引用户
凸显页面的主体
最高用户体验

span标签：重点要突出的字使用span标签套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            font-size: 30px;
        }
    </style>
</head>
<body>
我要学习 <span>java</span>
</body>
</html>

3.2、字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            font-family     字体
            font-size       字体大小
            font-weight     字体粗细
            color           字体颜色
        */
        body{
            font-family: "Ink Free",楷体;
        }
        h1{
            font-size: 50px;
            color: red;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>剧情介绍：</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！
</p>
<p class="p2">
    魁拔纪元1664年，天神经过精确测算后，在第六代魁拔苏醒前一刻对其进行毁灭性打击。
</p>
<p>
When I wake up in the morning，<br>
You are all I see;<br>
When I think about you，<br>
</p>
</body>
</html>

3.3、文本样式

颜色
文本对齐方式
首行缩进
行高
装饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            color: rgba(0,255,255,0.7);     字体样式（红，绿，蓝，透明度）
            text-align      排版（居中、居左、居右）
            text-indent     首行缩进，一般为两个字（2em）
            height=line-height      可以使文本上下居中
            
            text-decoration
                line-through    中划线
                overline        上划线
                underline       下划线
        		none			a标签去下划线
         */
        h1{
            color: rgba(0,255,255,0.7);
            text-align: center;
        }
        p{
            text-indent: 2em;
            height: 100px;
            line-height: 100px;
            background: pink;
        }
        .p1{
            text-decoration: underline;
        }
        /* 文本图片样式居中 */
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<h1>剧情介绍：</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来
    巨大的灾难！即便是天界的 神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期
    重新出现。
</p>
<p class="p2">
    魁拔纪元1664年，天神经过精确测算后，在第六代魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代
    魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再
    一次成了各地热血勇士的终极目标。
</p>
<p>
    When I wake up in the morning，<br>
    You are all I see;<br>
    When I think about you，<br>
    And how happy you make me。<br>
    You're everything I wanted;<br>
    You're everything I need;<br>
    I look at you and know;<br>
    That you are all to me。
</p>
    
    <p>
        <img src="images/a.png" alt="" height="300" width="250">
        <span>3214534564</span>
    </p>
</body>
</html>

3.4、阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 设置去下划线和黑色字体 */
        a{
            text-decoration: none;
            color: #000000;
        }
        /* 鼠标悬停时状态 */
        a:hover{
            color: orange;
        }
        /* 阴影 阴影颜色 水平偏移 垂直偏移 偏移距离 */
        #price{
            text-shadow: #39c3ff 0px 0px 3px;
            color: orange;
        }
    </style>
</head>
<body>
    <p>
        <a href="#" title="桌面图片"><img src="images/a.png" alt="桌面图片"width="200" height="250"></a>
    </p>
    <p><a href="#">来自：桌面截图</a></p>
    <p><a href="#" id="price">￥99</a></p>
</body>
</html>

3.5、列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>
</body>
</html>

/* 一般我们写导航栏不用nav标签，而是用一个div标签，把 id="nav" */
#nav{
    width: 300px;
    background: rgba(83, 89,255, 0.25);
}

.title{
    width: 300px;
    height: 35px;
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
    text-align: center;
    background: red url("../images/r.png") 246px 7px  no-repeat;
}

/* ul li
    list-style:
        none        去掉圆点
        circle      空心圆
        decimal     数字
        square      正方形
*/
ul li{
    height: 30px;
    line-height: 30px;
    list-style: none;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: orange;
}

3.6、背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/d.png");
    /* 默认是全部平铺的 */
}
.div1{
    background-repeat: repeat-x;        /*水平平铺*/
}
.div2{
    background-repeat: repeat-y;        /*垂直平铺*/
}
.div3{
    background-repeat: round;           /*全部平铺*/
}
/* no-repeat 不平铺，只有一个 */

3.7、渐变

推荐一个关于做渐变的网站

网站链接：点击跳转

body{
    background-color: #00DBDE;
    background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}

在这里插入图片描述

4、盒子模型

4.1、什么是盒子模型

margin 外边距

padding 内边距

border 边框

4.2、边框

边框的颜色
粗细
样式

/* 边框粗细、样式、颜色 */
#box{
    border: 1px solid red;
}

4.3、内外边距

/* 外边距水平设置为auto时，可以做到居中 */
#box{
    margin: 0px auto;
}
/* margin
 	0 0 0 0 代表 上、左、下、右
	0 0 0   代表上 左右 下
	0 0		代表上下、左右

内边距同上
*/

4.4、圆角边框

四个角

额，这个东西是可以做一个圆得

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* border-radius ： 左上、右上、右下、左下 */
        /* 一个正方形，长宽都是300px，4个角都设置为圆角 */
        #div01{
            width: 300px;
            height: 300px;
            background: red;
            border-radius:300px;
        }
    </style>
</head>
<body>
<div id="div01"></div>
</body>
</html>

4.5、阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            box-shadow: 1px 1px 100px yellow;
            border-radius: 100px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div><img src="images/d.png" alt=""></div>

</body>
</html>

在这里插入图片描述

5、浮动

标准文档流

5.1、display和float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		/*  float 浮动（左、右） 会使元素脱离标准文档流
        	display none 使标签呢内容隐形
        			inline-block 是块元素，但可以在一行
        			inline  行内元素
        			block   块元素
        */
        #div01
            float: left;
        }
        span{
            display: none;
            float: left;
            background: blue;
        }
    </style>
</head>
<body>
<span id="span">fdsfdsopajfaosdf</span>
<div id="div01"><img class="img" src="images/a.png" alt=""></div>
<div></div>
</body>
</html>

5.2、父级边框塌陷问题

增加父级边框的height

#fa{
    border: 3px solid black;
    height: 800px;
}

增加一个空的div清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*clear		left	左侧不能有浮动
        			right	右侧
        			both	两侧
        			none    默认*/
        #fa{
            border: 3px solid black;
            height: 800px;
        }
        #div01{
            float: left;
        }
        #div02{
            float: left;
        }
        #div03{
            float: left;
        }
        span{
            /*display: none;*/
            float: left;
            background: blue;
        }
        #clear{
            clear: both;
        }
    </style>
</head>
<body>
<div id="fa">
    <span id="span">fdsfdsopajfaosdf</span>

    <div id="div01"><img class="img" src="images/a.png" alt=""></div>
    <div id="div02"><img src="images/d.png" alt=""></div>
    <div id="div03"><img src="images/r.png" alt=""></div>
    <div id="clear"></div>
</div>
</body>
</html>

overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*overflow
        	hidden  多出的部分隐藏
        	scroll  显示滚动条*/
        div{
            height: 200px;
            width: 300px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div>
    <img src="images/d.png" alt="">
    <p>“正能量”指的是一种健康乐观、积极向上的动力和情感，是社会生活中积极向上的行为</p>
</div>
</body>
</html>

当div设置的边框宽高不能足里面图片的宽高时，div的宽高就会被图片撑开，这时我们可以设置一个overflow属性；

父类添加一个伪类

#father:after{
    content: "";
    display: block;
    clear: both;
}

小结：

浮动元素后面增加空的div

简单、代码中尽量避免空div
设置父元素的高度

元素假设有了固定的高度，就会被限制
overflow

滚动条，会看起来很诡异，不好看
在父类添加伪类 (建议使用)：after

写法稍微复杂，但是没有副作用

5.3、对比

display

方向不考研控制
float

浮动起来的话会脱离标准文档流，要解决父级边框塌陷问题

6、定位

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*  相对定位：相对于自己原来的位置进行偏移 */
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
            padding: 0px;
        }
        #first{
            border: 1px solid black;
            background-color: #00DBDE;
            position: relative;/* 相对定位,上下左右 */
            top: 20px;
            ringt: 20px;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

相对定位后，仍然在标准文档流，原来的位置会被保留

6.2、绝对定位和固定定位

绝对定位（absolute）：基于xxx定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
如果父级元素存在定位，我们通常会相对于父级元素进行偏移。
在父级元素范围内移动

附：绝对定位后脱离标准文档流

#second{
border: 1px dashed black;
background-color: #00aaDE;
position: absolute;  /*绝对定位，随着浏览器滚动条的移动会错位 */
top: 300px;
left: 20px;
right: 30px;
}

#third{
    border: 1px solid black;
    background-color: #00DB66;
    position: fixed;/* 绝对定位，在右下角，“返回顶部”样式 */
    bottom: 0;
    right: 0;
}

6.3、z-index

z-index，图层，最小0，最大无穷

opacity: 透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            margin: 0 auto;
            width: 300px;
            height: 300px;
            position: relative;
        }
        .conBg,.conText{
            position: absolute;
            top: 150px;
        }
        .conBg{
            background-color: black;
            width: 150px;
            height: 20px;
            opacity: 0.6; /* 透明度 */
        }
        .conText{
            color: rgba(237, 255, 170, 0.87);
            font-size: 12px;
            line-height: 25px;
            z-index: 100;
            height: 25px;
            position: absolute;
            left: 10px;
        }
    </style>
</head>
<body>
<div id="father">
    <div><img src="images/d.png" alt=""></div>
    <div class="conText">大家好，我是小傻瓜</div>
    <div class="conBg"></div>
</div>
</body>
</html>