2.CSS3详解

最新推荐文章于 2023-11-28 10:52:28 发布

仙谢郭嘉

最新推荐文章于 2023-11-28 10:52:28 发布

阅读量262

点赞数

分类专栏： 2.第二阶段:前端基础

本文链接：https://blog.csdn.net/weixin_45809838/article/details/115564116

版权

2.第二阶段:前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了CSS3，包括其发展历史、基本概念、选择器、盒子模型、定位、浮动、层叠、动画等核心内容，帮助读者快速掌握CSS3的使用技巧。

摘要由CSDN通过智能技术生成

css组装工具

1.CSS的简单介绍

HTML + CSS + JavaScript
结构 + 表现 + 交互
在这里插入图片描述
菜鸟教程,里面有很多样表的模板

2.什么是CSS和发展史

在这里插入图片描述

3.CSS的快速入门及优势

style
基本入门

<!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>

建议使用这种规范
在这里插入图片描述

4.四种css导入方式

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

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

    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<!--优先级:就近原则-->

<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1>我是标题</h1>

</body>
</html>

拓展:外部样式的两种写法

链接式:

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

导入式
CSS2.1特有的

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

两者不同:
在这里插入图片描述

5.三种基本选择器-重要

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

基本选择器
1. 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器,会选择到页面上所有的这个标签的元素*/
        h1{
            color: red;
            background: blue;
            border-radius: 19px;
        }
        p{
            font-size: 50px ;
        }

    </style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>

2. 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式   .class的名称{}
            好处,可以多个标签归类,是同一个class,可以复用
        */
        .qingjiang{
            color: green;
        }

        .kuangshen{
            color: #c018a5;
        }
    </style>
</head>
<body>
<h1 class="qingjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1 class="qingjiang">标题3</h1>
<p class="qingjiang">标题4</p>
</body>
</html>

3. Id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器:id必须保证全剧唯一!
        #id名称{}
        不遵循就近原则,固定的
        id选择器>class选择器>标签选择器
        */
        #qinjiang{
            color: #ff1418;
        }
        .style1{
            color: #7eff4b;
        }
        h1{
            color: #3234ff;
        }
    </style>
</head>
<body>
<h1 class="style1" id="qinjiang">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

6.层次选择器

在这里插入图片描述

1. 后代选择器:在某个元素的后面  祖爷爷 爷爷 爸爸 你

body p{
            background: #ff1418;
        }

2. 子选择器:一代 儿子

/*子选择器*/
        body>p{
            background: #3234ff;
        }

3. 相邻兄弟选择器: 同辈

 /*相邻兄弟选择器:  只有一个,相邻(向下)*/
        .active + p{
            background: red;
        }

4. 通用选择器

/*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background: #c018a5;
        }

7.结构伪类选择器

伪类: 指定条件

<!--    定位ul的第一个子类元素和最后一个子类元素-->
    <style>
        ul li:first-child{
            background: #7eff4b;
        }

        ul li:last-child{
            background: red;
        }
    </style>

留个印象,不需要深记

8.属性选择器(常用重要)

将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: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*存在id属性的元素*   a[]{}/
         */
        /*a[id]{
            background:yellow ;
        }*/
        /*属性名=属性值(正则)
        =绝对等于
        *=包含等于
        ^=以这个开头
        $=以这个结尾
        */
        /*class中有links的元素
        a[class*="links"]{
            background: yellow;
        }*/

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

        /*选中以doc结尾的元素*/
        a[href$=doc]{
            background: yellow;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" 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 last">10</a>


</p>

</body>
</html>

在这里插入图片描述

9.CSS的作用及字体样式

在这里插入图片描述
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>

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
font-family:字体
font-size:字体大小
font-weight:字体粗细
-->
    <style>
        body{
            font-family: 楷体,"Arial Black";
            color: blueviolet;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p>　　My fancies are fireflies,——
    　　specks of living light
    　　twinkling in the dark</p>
</body>
</html>

10.文本样式

颜色 color rgb rgba
2. 文本对齐方式 text-align = center
3. 首行缩进 text-align :2em
行高 line-height 单行文字上下居中! line-height=height
装饰 text-decoration
文本图片水平对齐 vertical-align:middle

11.文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态 只需要记住hover*/
        a:hover{
            color: orange;
            font-size: 50px;
        }
        /*鼠标按住未释放的颜色*/
        a.active{
            color: green;
        }
        text-shadow 阴影颜色,水平偏移,垂直偏移,阴影半径
        #price{
            text-shadow:#3234ff 10px 10px 2px;
        }

    </style>
</head>
<body>
<a href="#">
    <img src="images/a.jpg" alt="">
</a>
<p>
    <a href="#">码出高效:Java开发手册</a>
</p>
<p>
    <a href="#">作者:孤尽老师</a>
</p>
<p id="price">¥99</p>
</body>
</html>

12.列表样式练习

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

ul li{
    height:30px;
    list-style: none;
    text-indent: 1em;
}

13.背景图像应用及渐变

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.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></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅游</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">商务</a></li>
    </ul>
</div>

</body>
</html>

#nav{
    width: 300px;
    background: antiquewhite;

}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: crimson;
    /*颜色,图片,图片位置,平铺方式*/
    background: red url("../images/d.gif") 270px 10px no-repeat;
}
/*ul li*/
/*
list-style:
           none:去掉圆点
           circle:空心圆
           decimal::数字
           square:正方形
*/
ul{
    /*background: antiquewhite;*/
}

ul li{
    height:30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/r.gif");
    background-repeat: no-repeat;
    background-position: 236px 2px;

}

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

a:hover{
    color: orange;
    text-decoration: underline;
}

在这里插入图片描述
渐变:渐变的快捷代码网站

background-color: #4158D0;
background-image: linear-gradient(89deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

11.盒子模型及边框使用(重要)

在这里插入图片描述
margin:外边距
padding:内边距
border:边框

边框
1. 边框的粗细
2. 边框的样式
3. 边框的颜色

15.内外边距及div居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外边距的妙用:居中元素
margin: 0 auto;
外边距和内边距都一样  margin/paddin 0(上) 0(下) 0(左) 0(右)
-->
    <style>

        #box{
            width: 300px;
            border: 1px solid red;/*边框粗细 样式 颜色*/
            margin: 0 auto;
        }

        h2{
            font-size: 16px;
            background: #227d93;
            line-height: 30px;
        }

        form{
            background: cadetblue;
        }
        input{
            border: 1px solid black;
        }
    </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>

在这里插入图片描述

16.圆角边框及阴影和经验分享

4个角
盒子阴影
(模版之家\飞冰\Element)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 100px yellow ;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

17.display和浮动

标准文档流
在这里插入图片描述
块级元素:独占一行

h1~h6   p   div    列表

行内元素:不独占一行

span   a   img    strong.......

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

display和浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
  block 块元素
  inline 行内元素
  inline-block 是块元素,但是可以内联,在一行!
  none 消失
  -->

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;
            float: right;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

18.overflow及父级边框塌陷问题

在这里插入图片描述
解决方案:

小结:
对比:

19.相对定位的使用及练习

相对定位:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  相对定位
相对于自己原来的位置进行偏移
  -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            /*background: #61ffc0;*/
            border: 1px solid #170202;
            padding: 0;
        }
        #first{
            background: #303aff;
            border: 1px dashed #3fff14;/*相对定位:上下左右*/
            position: relative;
            top: -10px;
            left: 20px;
        }
        #second{
            background: #ff9851;
            border: 1px dashed #ff8a14;
        }
        #third{
            background: #ff4da4;
            border: 1px dashed #a617c9;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

在这里插入图片描述

20.方块定位练习讲解

题目:
在这里插入图片描述
代码:

在这里插入图片描述

21.绝对定位和固定定位

绝对定位
在这里插入图片描述

固定定位fixed

是相对于浏览器的,始终在页面的某一个位置

22.z-index及透明度

index
在这里插入图片描述

注意:只有浮起来才有层级和定位

23.动画及视野拓展

卡巴斯基网络威胁实时地图

24.总结

在这里插入图片描述

仙谢郭嘉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2.CSS3详解

1.CSS的简单介绍HTML + CSS + JavaScript结构 + 表现 + 交互菜鸟教程,里面有很多样表的模板2.什么是CSS和发展史3.CSS的快速入门及优势style基本入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 规范,<style&
复制链接

扫一扫