CSS3

最新推荐文章于 2023-10-16 00:42:35 发布

lll919397

最新推荐文章于 2023-10-16 00:42:35 发布

阅读量186

点赞数

分类专栏：学习文章标签： css

本文链接：https://blog.csdn.net/lll919397/article/details/113795772

版权

学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS3

1 CSS3概述

# 什么是CSS3?
层叠样式表第三版，最常用的一版
# 作用？
给网页添加样式，美化页面
# 优势？
1 内容和表现分离
2 网页结构表现统一，可以实现复用
3 样式十分的丰富
4 建议使用独立于html的css文件
5 利用SEO，容易被搜索引擎收录！

2 CSS样式导入方式

2.1 行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
</head>
<body>
    <!--行内样式 -->
    <h1 style="color:orangered;">我是一个标题</h1>
</body>
</html>

2.2 内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    
    <!--内部样式 -->
    <style>
        h1{
            color: orange;
        }
    </style>
</head>
<body>
    <h1>我是一个标题</h1>
</body>
</html>

2.3 链接式外部样式

html代码

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

    <!--链接式外部样式 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>我是一个标题</h1>
</body>
</html>

css代码

h1{
    color: skyblue;
}

2.4 导入式外部样式（被淘汰）

html代码

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

    <!--导入式外部样式 -->
    <style>
        @import url(css/style.css);
    </style>
</head>
<body>
    <h1>我是一个标题</h1>
</body>
</html>

css代码

h1{
    color: skyblue;
}

2.5 三种样式优先级

# 三种样式优先级？
行内样式 > （内部样式，外部样式），先选择行内样式，没有或不冲突的情况下选择内部样式和外部样式，至于内部样式和外部样式的优先级则看link标签和style标签的顺序，在下面的先使用。符合就近原则

3 选择器

3.1 基本选择器

3.1.1 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>

    <style>
        h1{
            /*标签选择器，作用于一类标签 */
            color: orangered;
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
</body>
</html>

3.1.2 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>

    <style>
        .c1{
            /*类选择器，作用于所标识的一组选择器，可单独选择一个标签 */
            color: orangered;
        }
    </style>
</head>
<body>
    <h1 class="c1">我是标题</h1>
</body>
</html>

3.1.3 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>

    <style>
        #title{
            /*id选择器，全局唯一 */
            color: orangered;
        }
    </style>
</head>
<body>
    <h1 id="title">我是标题</h1>
</body>
</html>

3.1.4 基本选择器的优先级

# 三大基本选择器的优先级？
id选择器 > 类选择器 > 标签选择器，与就近无关

3.2 层级选择器

3.2.1 后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>

    <style>
        /*后代选择器，选择指定的所有后代 */
        body p{
            color: orangered;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <ul>
        <li><p>p3</p></li>
        <li><p>p4</p></li>
    </ul>
    <p>p5</p>
    <p>p6</p>
</body>
</html>

3.2.2 子选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>

    <style>
        /*子选择器，选择指定的后代，只有一代 */
        body>p{
            color: orangered;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <ul>
        <li><p>p3</p></li>
        <li><p>p4</p></li>
    </ul>
    <p>p5</p>
    <p>p6</p>
</body>
</html>

3.2.3 相邻兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>

    <style>
        /*相邻兄弟选择器，选择下面的邻居，只有一个 */
        .p2+p{
            color: orangered;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p class="p2">p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
    </ul>
    <p>p6</p>
    <p>p7</p>
</body>
</html>

3.2.4 通用兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>

    <style>
        /*通用兄弟选择器，选择下面所有的邻居 */
        .p2~p{
            color: orangered;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p class="p2">p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
    </ul>
    <p>p6</p>
    <p>p7</p>
</body>
</html>

3.3 结构伪类选择器

简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <!--
		a标签伪类
		a:hover - 鼠标悬停
		a:active - 鼠标按下不放
		a:link - 未访问
		a:visited - 已访问
	-->

    <style>
        /*找到ul的第一个元素 */
        ul li:first-child{
            color: orangered;
        }

        /*找到ul的最后一个元素 */
        ul li:last-child{
            color: orange;
        }

        /*根据p标签找到body标签的第二个元素，该元素必须是p标签才会显示 */
        p:nth-child(2){
            color: red;
        }

        /*根据p标签找到body标签的第二个p元素 */
        p:nth-of-type(2){
            color: greenyellow;
        }
    </style>
</head>
<body>
    <h1>h1</h1>
    <p>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>
</body>
</html>

3.4 属性选择器

简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <style>
        body a{
            /*浮动 */
            float: left;
            /*行内元素改成块级元素 */
            display: block;
            /*背景颜色 */
            background: skyblue;
            /*大小 */
            width: 50px;
            height: 50px;
            /*圆角 */
            border-radius: 5px;
            /*外间距 */
            margin-right: 5px;
            /*文本居中 */
            text-align: center;
            /*行高 */
            line-height: 50px;
            /*字体颜色 */
            color: gray;
            /*字体大小 */
            font-size: 20px;
            /*字体样式 */
            font-weight: bold;
            /*文本描述 */
            text-decoration: none;
        }

        /*1 找到id是first */
        body a[id=first]{
            background: yellow;
        }

        /*2 找到class是link */
        body a[class*=link]{
            background: orangered;
        }

        /*3 找到href结尾是com的 */
        body a[href$=com]{
            background: greenyellow;
        }
    </style>
</head>
<body>
    <a id="first">1</a>
    <a class="link item">2</a>
    <a href="https://www.baidu.com">3</a>
    <a href="https://www.taobao.com">4</a>
</body>
</html>

4 常用样式

4.1 块级元素和行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级标签和行内标签</title>
    <!--
        span - 行内标签，通常是文本标题
        div - 块级标签，通常是一个模块
     -->

    <style>
        body span{
            font-size: 20px;
            font-width: 600;
        }

        body div{
            width: 50px;
            height: 50px;
            background: orangered;
            border-radius: 5px;
            text-align: center;
            font: oblique bold 16px/50px Arial;
        }
    </style>
</head>
<body>
    <span>开始</span>
    <div>1</div>
</body>
</html>

4.2 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <!--
        font-family - 字体样式，可添加多个
        font-size - 字体大小
        font-weight - 字体粗细
        color - 字体颜色
        font - 字体风格 字体粗细 字体大小/行高 字体样式
     -->

    <style>
        body{
            font-family: "Arial Black", "新宋体";
            font-size: 16px;
        }

        body h1{
            font-family: "楷体";
        }

        p:nth-of-type(1){
            font-size: 20px;
            font-weight: bold;
            color: gray;
        }

        p:nth-of-type(2){
            font: oblique bold 20px "新宋体";
        }
    </style>
</head>
<body>
    <h1>故事</h1>
    <p>窗前明月光&nbsp;&nbsp;&nbsp;疑是地上霜</p>
    <p>举头望明月&nbsp;&nbsp;&nbsp;低头思故乡</p>
    <p>
        If you were a teardrop In my eye，For fear of losing you，I would never cry。<br/>
        And if the golden sun，Should cease to shine its light，Just one smile from you，<br/>
        Would make my whole world bright</p>
</body>
</html>

4.3 文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <!--
        color - 文本颜色，rgba(158, 41, 41, 0.9)可设置透明度
        text-align - 文本对齐
        line-height - 行高
        text-indent - 缩进
        vertical-align - 图片文字对齐
        text-decoration - 文本装饰（underline下划线，line-through删除线，overline上划线，none无）
		text-shadom - 文本阴影，black 5px 5px 5px，颜色 横向偏移 垂直偏移 模糊半径
     -->

    <style>
        h1{
            color: rgba(158, 41, 41, 0.9);
            text-align: center;
        }

        p:nth-of-type(1){
            text-indent: 2em;
        }

        div{
            width: 50px;
            height: 50px;
            background: orangered;
            text-align: center;
            line-height: 50px;
        }

        img,span{
            vertical-align: middle;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>故事</h1>
    <p>窗前明月光&nbsp;&nbsp;&nbsp;疑是地上霜</p>
    <p>举头望明月&nbsp;&nbsp;&nbsp;低头思故乡</p>
    <p>
        If you were a teardrop In my eye，For fear of losing you，I would never cry。<br/>
        And if the golden sun，Should cease to shine its light，Just one smile from you，<br/>
        Would make my whole world bright</p>
    <div>1</div>
    <img src="../../resources/image/touxiang.png" alt="找不到该图片">
    <span>abcdefg</span>
</body>
</html>

4.4 列表样式 list-style

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="nav">
        <h1 class="my-title">全部商品分类</h1>
        <ul>
            <li><a href="https://www.baidu.com">图书</a>&nbsp;&nbsp;&nbsp;<a href="https://www.baidu.com">音乐</a></li>
            <li><a href="https://www.baidu.com">游戏</a>&nbsp;&nbsp;&nbsp;<a href="https://www.baidu.com">视频</a></li>
        </ul>
    </div>
</body>
</html>

css代码

body div[id=nav]{
    width: 150px;
    height: 100px;
    background: #bfb9b9;
}

div h1[class=my-title]{
    font-size: 18px;
    line-height: 30px;
    text-indent: 1em;
    font-family: 楷体;
    font-weight: bold;
}

ul li{
    /*list-style - 列表样式：none,square,circle */
    list-style: none;
}

a{
    font-size: 16px;
    color: #000;
    text-decoration: none;
    font-family: 新宋体;
}

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

4.5 背景

4.5.1 背景颜色

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

    <style>
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 16px;

            /*background - 背景颜色 */
            background: orange;
        }
    </style>
</head>
<body>
    <div>1</div>
</body>
</html>

4.5.2 背景图片

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

    <style>
        div:nth-of-type(1){
            width: 1000px;
            height: 800px;
            border: 1px solid red;

            /*
                background-image - 背景图片
                background-repeat - 平铺方式，repeat（铺满，默认），no-repeat（单张），repeat-x（横向铺满），repeat-y（垂直铺满）
                background-position - 图片位置
                background: red url("../../resources/image/touxiang.png") 10px 10px no-repeat;

                渐变：https://www.grabient.com开源，可直接copy渐变样式
                background-color: #4158D0;
                background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
            */
            background-image: url("../../resources/image/touxiang.png");
            background-repeat: no-repeat;
            background-position: 100px 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5 盒子模型

5.1 边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <!--
        border - 边框，1px solid red，粗细 样式 颜色
        border-radius - 圆角
     -->

    <style>
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5.2 内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <!--
        margin - 外边距，1个数代表上下左右，2个数代表上下 左右，3个数代表上 右 下 左
        padding - 内边距
		box-shadom - 盒子阴影，5px 5px 5px red
     -->

    <style>
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 10px;

            margin: 0 auto;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>1</div>
</body>
</html>

6 浮动

6.1 display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <!--
        display - 展示
            block: 改变成块级元素
            inline: 改变成行内元素
            inline-block: 改成行内块元素
			none: 无
     -->

    <style>
        span:nth-of-type(1){
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
    <span>1</span>
</body>
</html>

6.2 float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <!--
        float - 浮动
            left: 左浮动
            right: 右浮动
     -->

    <style>
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
        }

        div:nth-of-type(2){
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: right;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
</body>
</html>

6.3 解决浮动时父元素塌陷问题

6.3.1 增加父元素高度

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

    <style>
        #father{
            border: 1px solid red;
            height: 500px;
        }

        #father div:nth-of-type(1){
            width: 400px;
            height: 400px;
            background: skyblue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="father">
        <div>1</div>
    </div>
</body>
</html>

6.3.2 在父级元素下级添加一个空div，清除两边浮动

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

    <style>
        #father{
            border: 1px solid red;
        }

        #father div:nth-of-type(1){
            width: 400px;
            height: 400px;
            background: skyblue;
            float: left;
        }

        div[class=clear]{
            clear: both;
        }
    </style>
</head>
<body>
    <div id="father">
        <div>1</div>
        <div class="clear"></div>
    </div>
</body>
</html>

6.3.3 在父元素样式中添加overflow属性

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

    <style>
        #father{
            border: 1px solid red;
            /*
                overflow - 溢出
                    hidden: 隐藏
                    sroll: 滚动
            */
            overflow: hidden;
        }

        #father div:nth-of-type(1){
            width: 400px;
            height: 400px;
            background: skyblue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="father">
        <div>1</div>
    </div>
</body>
</html>

6.3.4 在父元素上添加伪类after（推荐）

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

    <style>
        #father{
            border: 1px solid red;
        }

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

        #father div:nth-of-type(1){
            width: 400px;
            height: 400px;
            background: skyblue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="father">
        <div>1</div>
    </div>
</body>
</html>

7 定位

7.1 相对定位

相对定位，相对于父元素自身定位，不脱离标准文档流，保留原先位置

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

    <style>
        #father{
            border: 1px solid red;
            width: 300px;
            height: 300px;
            padding: 10px;
            margin: 0 auto;
        }

        #father div:nth-of-type(1){
            width: 300px;
            height: 100px;
            background: pink;
            font-size: 16px;
            text-align: center;
            line-height: 100px;
        }

        #father div:nth-of-type(2){
            width: 300px;
            height: 100px;
            background: skyblue;
            font-size: 16px;
            text-align: center;
            line-height: 100px;

            /*position - relative 相对定位 */
            position: relative;
            top: 10px;
            right: 20px;
        }

        #father div:nth-of-type(3){
            width: 300px;
            height: 100px;
            background: #75f18b;
            font-size: 16px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

7.2 绝对定位

绝对定位，父元素没有定位的情况下，相对于浏览器定位；父元素有定位的情况下，相对于父元素定位；不脱离于文档流，不保留原先位置

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

    <style>
        #father{
            border: 1px solid red;
            width: 300px;
            height: 300px;
            padding: 10px;
            margin: 0 auto;

            position: relative;
        }

        #father div:nth-of-type(1){
            width: 300px;
            height: 100px;
            background: pink;
            font-size: 16px;
            text-align: center;
            line-height: 100px;
        }

        #father div:nth-of-type(2){
            width: 300px;
            height: 100px;
            background: skyblue;
            font-size: 16px;
            text-align: center;
            line-height: 100px;

            /*position - absolute 绝对定位 */
            position: absolute;
            top: 10px;
            right: 20px;
        }

        #father div:nth-of-type(3){
            width: 300px;
            height: 100px;
            background: #75f18b;
            font-size: 16px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

7.3 固定定位

固定定位，相对于浏览器定位，脱离标准文档流，不保留原先位置

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

    <style>
        #father{
            border: 1px solid red;
            width: 300px;
            height: 300px;
            padding: 10px;
            margin: 0 auto;
        }

        #father div:nth-of-type(1){
            width: 300px;
            height: 100px;
            background: pink;
            font-size: 16px;
            text-align: center;
            line-height: 100px;
        }

        #father div:nth-of-type(2){
            width: 300px;
            height: 100px;
            background: skyblue;
            font-size: 16px;
            text-align: center;
            line-height: 100px;

            /*position - fixed 固定定位 */
            position: fixed;
            top: 10px;
            right: 20px;
        }

        #father div:nth-of-type(3){
            width: 300px;
            height: 100px;
            background: #75f18b;
            font-size: 16px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

7.4 z-index

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

    <style>
        ul,li{
            margin: 0;
            padding: 0;
            width: 400px;
            list-style: none;
            font-size: 12px;
            line-height: 25px;

            position: relative;
        }

        li:nth-of-type(1) div{
            width: 400px;
            height: 300px;
            background: skyblue;
        }

        li:nth-of-type(2),li:nth-of-type(3){
            height: 25px;
            position: absolute;
            bottom: 0;
        }

        li:nth-of-type(2){
            color: white;
            /*z-index 层级高度 */
            z-index: 999;
        }

        li:nth-of-type(3){
            background: #000;
            /*透明度 */
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
    </style>
</head>
<body>
    <ul>
        <li><div></div></li>
        <li>你好</li>
        <li></li>
    </ul>
</body>
</html>

lll919397

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS3

CSS31 CSS3概述# 什么是CSS3?层叠样式表第三版，最常用的一版# 作用？给网页添加样式，美化页面# 优势？1 内容和表现分离2 网页结构表现统一，可以实现复用3 样式十分的丰富4 建议使用独立于html的css文件5 利用SEO，容易被搜索引擎收录！2 CSS样式导入方式2.1 行内样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫