CSS

最新推荐文章于 2024-07-25 12:38:27 发布

Heroin Geng

最新推荐文章于 2024-07-25 12:38:27 发布

阅读量406

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/Gengmeina/article/details/103810658

版权

Java 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

一什么是CSS

1.1 什么是CSS

层叠样式表(Cascading Style Sheets)：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言；
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力（字体、边框、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…）

1.2 如何学习CSS

CSS是什么
CSS怎么用（快速入门）
CSS 选择器（重点 + 难点）
美化网页（文字，阴影，超链接，列表，渐变….）
盒子模型网页基础~
浮动应用~
定位
网页动画（特效效果）

1.3 发展史

1.CSS1.0
2.CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO
3. CSS2.1 浮动，定位
4. CSS3.0 圆角，阴影，动画…. 浏览器兼容性~

1.4 快速入门：三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种导入方式</title>
    
    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

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

</head>
<body>

<!--优先级：就近原则 -->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color:red;">我是标题</h1>

</body>
</html>

拓展：外部样式两种写法

链接式
html：

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

导入式
@import 是CSS 2.1 特有的！

<!--导入式-->
<style>
    @import url(“style.css");
</style>

二选择器

2.1.1 基本选择器（标签）
标签选择器：选择标签{}；会选择到页面上所有的这个标签的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器（标签）</title>
    <style>
        h1{
            color: aqua;
            background: aliceblue;
            border-radius: 24px;
        }
        h2{
            color: #06840f;
            background: #7b747b;
        }
        p{
            color: #842548;
            background: #443f44;
        }
    </style>
</head>
<body>

<h1>geng</h1>
<h2>在学习Java</h2>
<p>听狂神说</p>

</body>
</html>

2.1.2 基本选择器（类）
class选择器：.类名{}；选择所有class属性一致的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器（类）</title>
    
    <style>
        .胖虎{
            color: antiquewhite;
        }
        .二蛋{
            color: aqua;
        }
        .学习{
            color: aquamarine;
        }
    </style>

</head>
<body>

<h1 class="胖虎">胖虎</h1>
<h2 class="二蛋">二蛋</h2>
<p class="学习">一起学Java</p>

</body>
</html>

2.1.3 基本选择器（ID）
id选择器：#id名{}；全局唯一！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器（ID）</title>
   
    <style>
        p{
            color: aqua;
        }
        .二蛋{
            color: #842548;
        }
        #kuangshenshuo{
            color: cadetblue;
        }
    </style>

</head>
<body>

<h1 class="胖虎" id="kuangshenshuo">胖虎</h1>
<h2 class="二蛋">二蛋</h2>
<p class="学习">一起学Java</p>

</body>
</html>

2.2 层次选择器
2.2.1 后代选择器（在某个元素的后面）
2.2.2 子选择器（一代，儿子）
2.2.3 相邻兄弟选择器（同辈）
2.2.4 通用选择器

<title>层次选择器</title>
<style>
        /*层次选择器1：后代选择器*/
        body p{
            background: yellowgreen;
        }
        /*层次选择器2：子选择器*/
        body>p{
            background: indianred;
        }
        /*层次选择器3：相邻兄弟选择器*/
        .active+p{
            background: #cd5694;
        }
        /*层次选择器4：通用兄弟选择器*/
        .active~p{
            background: aqua;
        }
</style>

2.3 结构伪类选择器

<title>结构伪类选择器</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #842548;
        }
        /*定位到父元素，选择当前的第一个元素*/
        p:nth-child(1){
            background: #7c6284;
        }
        /*选中父元素，下的p元素的第二个，类型 */
        p:nth-of-type(1){
            background: yellow;
        }
    </style>

2.4 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aqua;
            text-align: center;
            color: #7b747b;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item " >3</a>
    <a href="images/123.png" class="links item ">4</a>
    <a href="images/123.jpg" class="links item ">5</a>
    <a href="abc" class="links item ">6</a>
    <a href="/a.pdf" class="links item ">7</a>
    <a href="/abc.pdf" class="links item ">8</a>
    <a href="abc.doc" class="links item ">9</a>
    <a href="abcd.doc" class="links item ">10</a>
</p>
</body>
</html>

运行结果：
在这里插入图片描述

三美化网页元素

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
    <style>
        #title{
            font-size:40px;
        }
    </style>
</head>
<body>
   欢迎学习<span id="title">Java</span>
</body>
</html>

3.2 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        body{
            font-family: "Arial",楷体;/*字体*/
            color: #629755;/*颜色*/
        }
        h1{
            font-size: 50px;/*大小*/
        }
        .content{
            color: #b7cd1c;
            font-weight: bold;/*粗细*/
        }
    </style>
</head>
<body>
    <h1 class="title">偶然</h1>
    <em>现代</em> &nbsp;&nbsp;&nbsp; <strong>徐志摩</strong> <br/>
    <hr/>
    <p class="content">
        我是天空里的一片云，<br/>
        偶尔投影在你的波心，<br/>
        你不必讶异，<br/>
        更无须欢喜，<br/>
        在转瞬间消灭了踪影。<br/>
        你我相逢在黑夜的海上，<br/>
        你有你的，我有我的，方向；<br/>
        你记得也好，<br/>
        最好你忘掉，<br/>
        在这交会时互放的光亮！<br/>
    </p>
</body>
</html>

3.3 文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        h1{
            color: #2bedfe;
            text-align: center;/*居中*/
        }
        .p1{
            text-indent: 2em;/*段落首行缩进*/
            text-decoration: underline;/*下划线*/
            vertical-align: middle;/*水平对齐~参照物 a，b*/
        }
        .p3{
            background: #f2ff98;
            height: 300px;
            line-height: 300px;/*行高和块的高度一致，就可以上下居中*/

        }

    </style>
</head>
<body>
<h1>故事介绍</h1>

<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

<p class="p3">
    Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>

</body>
</html>

3.4 阴影

<title>阴影</title>
    <style>
        .content{
            text-shadow: #3cc7f5 20px -20px 4px;/*阴影颜色，水平偏移，垂直偏移，阴影半径*/
        }
    </style>

3.5 超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超伪类链接</title>
    <style>
        a{/*默认的颜色*/
            text-decoration: none;
            color:#000;
        }
        a:hover{/*鼠标悬浮的状态（只需要记住 :hover）*/
            color: #b7cd1c;
            font-size: 60px;
        }
    </style>
</head>
<body>
<a href="http://baidu.com">111</a>
</body>
</html>

3.6 列表

<title>列表</title>
    <style>
        ul{
            background: #2bedfe;
        }
        ul li{
            height: 30px;
            list-style: circle;
            text-indent: 1em;
        }
    </style>

3.7 背景

<style>
div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/tx.jpg");
    /*默认是全部平铺的 repeat*/
}
.div1{
    background-repeat: repeat-x;/*repeat-x 设置只有水平方向重复*
}
.div2{
    background-repeat: repeat-y;/*repeat-y 设置只有垂直方向重复*/
}/
.div3{
    background-repeat: no-repeat;
}
</style>

3.8 渐变

background-color: #FFFFFF;
background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)

四盒子模型

4.1 什么是盒子模型
在这里插入图片描述
1.根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。
2.页面上每个元素都符合盒子模型的定义，所以它非常重要。我们使用一些新的CSS属性来来熟悉它。
3.使用盒子模型：每个元素都是一个长方形盒子，有几个属性能确定这个盒子的大小。盒子的核心属性是元素的宽高，这两个值可能是由元素的display属性、元素的内容或具体的width，height属性值生成的。内边距padding和边框border拓展了元素的高宽。最后是我们定义的在边框外的外边距margin。
4.盒子模型对应的CSS属性为:width，height，padding，border，margin。

4.2 边框
粗细、样式、颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        #box{
            width: 300px; 
            border: 1px solid red;
        }
        h2{
            font-size: 20px;
            background-color: #2bedfe;
            line-height: 40px;
            color: #ffff0f;
        }
        div:nth-of-type(1) input{
            border: 3px solid #ed1cff;
        }
        div:nth-of-type(2) input{
            border: 4px dashed black;
        }
        div:nth-of-type(3) input{
            border: 6px dashed #37cc13;
        }

    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

4.3 内外边框
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

1.margin:10px 5px 15px 20px;（上边距是 10px；右边距是 5px；下边距是 15px；左边距是 20px）

2.margin:10px 5px 15px;（上边距是 10px；右边距和左边距是 5px；下边距是 15px）

3.margin:10px 5px; （上边距和下边距是 10px；右边距和左边距是 5px）

4.margin:10px; （所有四个边距都是 10px）

<title>内外边框</title>
    <style>
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto; /*外边距：居中元素margin: 0 auto*/
        }
        h2{
            font-size: 20px;
            background-color: #2bedfe;
            line-height: 40px;
            color: #ffff0f;
            margin: 0 1px 2px 3px;
        }
        input{
            border: 1px solid #d920ff;
        }
        form{
            background-color: #629755;a
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>

4.4 圆角边框

<title>圆角边框</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid yellow;
            border-radius: 10px;
        }
    </style>

4.5 盒子阴影

<title>盒子阴影</title>
    <style>
        #box{
            border-radius: 50px;
            box-shadow: 10px 10px 100px #2cffff;
        }
    </style>

五浮动

5.1 标准文档流

块级元素：独占一行

h1~h6   p  div   列表...

行内元素：不独占一行

span  a  img  strong....

行内元素可以被包含在块级元素中，反之，则不可以~

5.2 display
这个也是一种实现行内元素排列的方式，但是我们很多情况都是用 float

<title>display</title>
    <style>
        div{
            width: 10px;
            height: 100px;
            border: 1px solid red;
            display: none;
        }
        span{
            width: 10px;
            height: 100px;
            border: 1px solid yellowgreen;
            display: inline-block;
        }
    </style>

5.3 float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div{
            margin: 10px;
            padding: 10px;
        }
        #father{
            border: 6px #3cc7f5 solid;

        }
        .layer1{
            border: 2px #842548 dashed;
            display: inline-block;
            float: right;
        }
        .layer2{
            border: 2px #842548 dashed;
            display: inline-block;
            float: right;
        }
        .layer3{
            border: 2px #842548 dashed;
            display: inline-block;
            float: left;
        }
        .layer4{
            border: 2px #842548 dashed;
            font-size: 16px;
            line-height: 23px;
            display: inline-block;
            float: left;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="layer1"><img src="images/1.jpg" alt=""></div>
    <div class="layer2"><img src="images/2.jpg" alt=""></div>
    <div class="layer3"><img src="images/3.jpg" alt=""></div>
    <div class="layer4">朝暮与年岁并往，与你一起共志光年</div>
</div>
</body>
</html>

5.4 父级边框塌陷问题

clear：
clear：right; 右侧不允许有浮动元素；
clear：left;  左侧不允许有浮动元素；
clear：both;  两侧不允许有浮动元素；
clear：none;

解决方案：
1.增加父级边框的高度：

 #father{
            border: 6px #3cc7f5 solid;
            height: 600px;
        }

2.增加一个空的div标签，清除浮动：

<div class="clear"></div>

.clear{
            clear: both;
            margin: 0;
            padding: 0;
        }

3.overflow：

  #father{
            border: 6px #3cc7f5 solid;
            /*height: 600px;*/
            overflow: hidden;
        }

4.父类增加一个伪类：after：（推荐使用）

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

5.5 对比

浮动元素后面增加空div

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

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

简单，下拉的一些场景避免使用
父类添加一个伪类：after（推荐）

写法稍微复杂一点，但是没有副作用，推荐使用！

六定位

6.1 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        #box{
            width: 600px;
            height: 600px;
            padding: 20px;
            border: 10px #2bedfe dashed;
        }
        a{
            width: 200px;
            height: 200px;
            text-decoration: none;
            background-color: #cd5694;
            line-height: 200px;
            text-align: center;
            color: #f2ff98;
            display: block;
        }
        a:hover{
            background-color: #06ff93;
        }
        .a2,.a4{
            position: relative;
            left: 400px;
            top: -200px;
        }
        .a5{
            position: relative;/*定位：相对定位*/
            left: 200px;
            top: -600px;
        }
    </style>
</head>
<body>
<div id="box">
    <a class="a1" href="#">1</a>
    <a class="a2" href="#">2</a>
    <a class="a3" href="#">3</a>
    <a class="a4" href="#">4</a>
    <a class="a5" href="#">5</a>
</div>
</body>
</html>

6.2 绝对定位

 <title>绝对定位</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 2px #2bedfe dashed;
            padding: 0;
            position: relative;
        }
        #first{
            border: 2px #a9fe29 dashed;
            background-color: #ff2783;
        }
        #second{
            border: 2px #25fe88 dashed;
            background-color: #ffa439;
            position: absolute;
            left: 100px;
        }
        #third{
            border: 2px #912dfe dashed;
            background-color: #ff6810;
        }
    </style>

6.3 固定定位

<title>固定定位</title>
    <style>
        body{
            height: 5000px;
        }
        div:nth-of-type(1){/*绝对定位*/
            width: 600px;
            height: 600px;
            background-color: #cd5694;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*固定定位*/
            width: 300px;
            height: 300px;
            background-color: #46cd5d;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

6.4 z-index
z-index：默认是0，最高无限~ 999

<title>z-index</title>
    <style>
        #content{
            width: 380px;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px #000 solid;
        }
        ul,li{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        /*父级元素相对定位*/
        #content ul{
            position: relative;
        }
        .tipText, .tipBg{
            position: absolute;
            width: 380px;
            height: 25px;
            top: 216px;
        }
        .tipText{
            color: white;
            z-index:50;
        }
        .tipBg{
            background: #000;
            opacity: 0.5; /*背景透明度*/
            filter: Alpha(opacity=50);
        }
    </style>