CSS3入门与实战：从基础到高级应用-优快云博客

本文链接：https://blog.youkuaiyun.com/Zachsj/article/details/123933284

Java（CSS01）

参考视频：CSS3最新教程快速入门通俗易懂（狂神）

1. CSS的简单介绍

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

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动… …

在这里插入图片描述

1.2 CSS发展史

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

练习格式：
在这里插入图片描述

1.3 CSS的快速入门及优势

示例一：（基本入门88）

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

    <!--规范，<style> 可以编写css的代码，每一个声明，最好使用分号;结尾
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

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

规范：HTML和CSS分离
在这里插入图片描述

CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分地丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录！

1.4 三种CSS导入方式

示例一：

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

    <!--2. 内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

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

</head>
<body>

<!--优先级：行内样式>内部样式=外部样式，
        对于内外部样式来说，后出现的样式会覆盖前一个样式-->

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

</body>
</html>

**拓展：**外部样式两种写法

链接式：（HTML）

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

导入式：（@import是 CSS2.1特有的）

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

2. 三种基本选择器（重要）

作用：选择页面上的某一个或者某一类元素

2.1 基本选择器

标签选择器
- 选择一类标签
- 标签{}
类选择器 class
- 选中所有class属性一致的标签，跨标签
- .类名{}
id选择器
- 全局唯一
- #id名{}

示例一：（标签选择器）

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

    <style>
        /*标签选择器：会选择到页面上所有的这个标签的元素*/
        h1{
            color:red;
            background: #b4b4b4;
            border-radius: 20px;
        }
        p{
            font-size: 50px;
        }
    </style>

</head>
<body>

<h1>learn java</h1>
<h1>learn java</h1>
<p>listen to ks</p>

</body>
</html>

示例二：（类选择器）

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

    <style>
        /*类选择器的格式：.class的名称{}
        好处：可以多个标签归类，成为同一个class，可以复用
        */
        .zach{
            color: blueviolet;
        }
        .sj{
            color: burlywood;
        }
    </style>
</head>
<body>

<h1 class="zach">标题1</h1>
<h1 class="sj">标题2</h1>
<h1 class="zach">标题3</h1>

<p class="zach">p标签</p>

</body>
</html>

示例三：（id选择器）

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

    <style>
        /*id选择器：id全局唯一
            #id名称{}
            优先级：id选择器 > class选择器 > 标签选择器
        */
        #zach{
            color: aliceblue;
        }
        .zach{
            color: brown;
        }
        h1{
            color: cornflowerblue;
        }
    </style>
</head>
<body>

<h1 id="zach">标题1</h1>
<h1 class="zach">标题2</h1>
<h1 class="zach">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

优先级： id > class > 标签

2.2 层次选择器

后代选择器
- 在某个元素的后面：太爷爷爷爷爸爸你

        /*后代选择器*/
        body p{
            background: red;
        }

子选择器

        /*子选择器*/
        body>p{
            background: cadetblue;
        }

相邻兄弟选择器

        /*相邻（下一个）兄弟选择器*/
        .active + p{
            background: cornflowerblue;
        }

通用选择器

        /*通用（下面同级所有）兄弟选择器：*/
        .active~p{
            background: blue;
        }

示例一：

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

    <style>
        /*p{*/
        /*    background: green;*/
        /*}*/

        /*后代选择器*/
        /*body p{*/
        /*    background: red;*/
        /*}*/

        /*子选择器*/
        /*body>p{*/
        /*    background: cadetblue;*/
        /*}*/

        /*相邻（下一个）兄弟选择器*/
        /*.active + p{*/
        /*    background: cornflowerblue;*/
        /*}*/

        /*通用（下面同级所有）兄弟选择器：*/
        .active~p{
            background: blue;
        }

    </style>
</head>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>

</body>
</html>

2.3 结构伪类选择器

伪类
- 带：，加条件

示例一：

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

    <!--避免使用，class选择器，id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: green;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: red;
        }
        /* 选中p1 :定位到父元素，选择当前的第一个元素
            选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，不按照类型顺序。
        */
        p:nth-child(1){
            background: blue;
        }
        /* 选中父元素，其下的p元素的第二个，按照类型顺序选择 */
        p:nth-of-type(2){
            background: yellow;
        }


    </style>
</head>
<body>

<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

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

2.4 属性选择器（常用）

id+class，两者结合
示例一：

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

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 10px;
            font: bold 20px/50px Arial;
        }

        /*属性名，属性名=属性值（可用正则表达式）
        = 绝对等于
        *= 包含等于：包含该元素就行
        ^= 以这个开头
        $= 以这个结尾
        */

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

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

        /*class中有links的元素*/
        /*a[class*="links"]{*/
        /*    background: yellow;*/
        /*}*/

        /*选中href中以http开头的元素*/
        /*a[href^=http]{*/
        /*    background: yellow;*/
        /*}*/

        a[href$=jpg]{
            background: yellow;
        }

    </style>
</head>
<body>

<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1&emsp;</a>
    <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2&emsp;</a>
    <a href="images/123.html" class="links item">3&emsp;</a>
    <a href="images/123.png" class="links item">4&emsp;</a>
    <a href="images/123.jpg" class="links item">5&emsp;</a>
    <a href="abc" class="links item">6&emsp;</a>
    <a href="/a.pdf" class="links item">7&emsp;</a>
    <a href="/abc.pdf" class="links item">8&emsp;</a>
    <a href="abc.doc" class="links item">9&emsp;</a>
    <a href="abcd.doc" class="links item">10&emsp;</a>

</p>

</body>
</html>

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

3. 美化网页元素

3.1 为什么要美化网页

有效传递页面信息
有效吸引用户注意
有效凸显页面主题
有效提高用户体验
span标签：把重点要突出的字，使用span标签套起来

示例一：

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

    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>

欢迎学习<span id="title1">Java</span>

</body>
</html>

3.2 字体样式

示例一：

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

    <!--
        font-family: 字体种类
        font-size: 字体大小
        font-weight: 字体粗细
        color: 字体颜色
    -->
    <style>
        body{
            font-family: "Arial Black",楷体;
            color: brown;
        }
        h1{
            font-size:50px;
        }
        .p1{
            font-weight:bold;
        }
    </style>
</head>
<body>

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

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

<p>
    Never give up, Never lose hope. Always have faith, It allows you to cope. Trying times will pass, As they always do. Just have patience, Your dreams will come true. So put on a smile, You'll live through your pain. Know it will pass, And strength you will gain
</p>

</body>
</html>

示例二：

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

    <!--字体风格-->
    <style>
        p{
            font: oblique bolder 18px "楷体";
        }
    </style>
</head>
<body>

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

</body>
</html>

3.3 文本样式

颜色 color rgb rgba
文本对齐方式 text-align = center;
首行缩进 text-indent:2em;
行高 line-height;
装饰 text-decoration;
文本图片水平对齐 vertical-align:middle;

示例一：

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

    <!--
    颜色：
        单词      red...
        RGB     0~F
        RGBA    A：0~1

    text-align:     排版：居中...
    text-indent:2em;    段落首行缩进
    height: 100px;
    line-height: 100px;
    行高 和 块 的高度一致，就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.3);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 300px;
            line-height: 100px;
        }

        /*下划线*/
        .l1{
            text-decoration: underline red;
        }
        /*中划线（删除线）*/
        .l2{
            text-decoration: line-through red;
        }
        /*上划线*/
        .l3{
            text-decoration: overline red;
        }
        /*超链接去除下划线*/
        a{
            text-decoration: none;
        }

        /* 水平对齐 参照物 a b */
        img,span{
            vertical-align: middle;
        }
    </style>

</head>
<body>
<a href="">zach</a>

<p class="l1">1234567</p>
<p class="l2">1234567</p>
<p class="l3">1234567</p>

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

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

<p class="p3">
    Never give up, Never lose hope.
    Always have faith, It allows you to cope.
    Trying times will pass, As they always do.
    Just have patience, Your dreams will come true.
    So put on a smile, You'll live through your pain.
    Know it will pass, And strength you will gain.
</p>

<p>
    <img src="images/a.jpg" alt="">
    <span>wdnmd</span>
</p>

</body>
</html>

3.4 阴影

↓→，即，第四象限为正坐标。

        /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: skyblue 10px 10px 1px;
        }

3.5 超链接伪类

正常情况下
- a{}
- a:hover{}

示例一：

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

    <style>
        /*默认状态的颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮状态的颜色（只需要记住:hover）*/
        a:hover{
            color: brown;
            font-size: 10px;
        }
        /*鼠标按住未释放状态的颜色*/
        a:active{
            color: green;
        }
        a:visited{
            color: blue;
        }
        /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: skyblue 10px 10px 1px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/a.png" alt="码出高效">
</a>
<p>
    <a href="#">码出高效：Java开发手册</a>
</p>
<p>
    <a href="#">作者：孤尽老师</a>
</p>
<p id="price">
    $99.99
</p>

</body>
</html>

3.6 列表

示例一：
（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a>&nbsp;&nbsp;
            <a href="#">音像</a>&nbsp;&nbsp;
            <a href="#">数字商品</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="#">家用电器</a>&nbsp;&nbsp;
            <a href="#">手机</a>&nbsp;&nbsp;
            <a href="#">数码</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="#">电脑</a>&nbsp;&nbsp;
            <a href="#">办公</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="#">家居</a>&nbsp;&nbsp;
            <a href="#">家装</a>&nbsp;&nbsp;
            <a href="#">厨具</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="#">服饰鞋帽</a>&nbsp;&nbsp;
            <a href="#">个性化妆</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="#">礼品箱包</a>&nbsp;&nbsp;
            <a href="#">钟表</a>&nbsp;&nbsp;
            <a href="#">珠宝</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="#">食品饮料</a>&nbsp;&nbsp;
            <a href="#">保健食品</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="#">彩票</a>&nbsp;&nbsp;
            <a href="#">旅行</a>&nbsp;&nbsp;
            <a href="#">充值</a>&nbsp;&nbsp;
            <a href="#">票务</a>&nbsp;&nbsp;
        </li>
    </ul>
</div>



</body>
</html>

（style.css）

#nav{
    width: 300px;
    background: grey;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li*/
/*
list-style:
    none    去掉原点
    circle  空心圆
    decimal 数字
    square  正方形
*/
ul{
    background: grey;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

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

3.7 背景

背景颜色
背景图片

示例一：（背景图片）

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

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url(images/tx.jpg);
            /*默认全部平铺repeat*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
        
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

示例二：
（背景颜色：渐变色）

background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

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

    <!--径向渐变，圆形渐变-->
    <style>
        body{
            /*background-color: #8EC5FC;*/
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

        }
    </style>
</head>
<body>
    2333
</body>
</html>