Web前端----CSS进阶教学总结

最新推荐文章于 2024-07-16 20:51:21 发布
最新推荐文章于 2024-07-16 20:51:21 发布
阅读量351 收藏 6
点赞数 1
文章标签： css 前端 学习 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70612148/article/details/126215605
版权

此文章是对CSS进行的一些基础的学习。 

 前言

随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下CSS的语法，用来对CSS进行基础的学习。

一、CSS是什么？

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、CSS进阶

1.1 emmet语法

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* font-size: ; */
            font-size: 100px;
            width: 100px;
            height: 100;
            background-color: red;
            line-height: 100px;
}
    </style>
</head>
<body>
    <div></div>
    <h1></h1>
    <!-- 生成div 带类名 -->
    <div class="box"></div>
    <div class="red"></div>
    <div id="one"></div>
    <p class="red" id="one"></p>
    <p id="box"></p>

    <ul>
        <li></li>
    </ul>
<!-- div 同级 p -->
    <div></div>
    <p></p>
<!-- 父子 -->
    <p></p>
    <div></div>
    <!-- ul里有三个li -->
    <ul>
        <li></li>
        <li></li>
    </ul>

    <!-- ul里面有三个li，li里面有文字111 {文字} -->
    ul>li*3

</body>
</html>

 代码运行结果如下：

 1.2 背景色

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* background-color: pink;  */
            /* background-color: #ccc; */
            /* 红绿蓝三原色，a是透明度0-1 */
            /* background-color: rgba(0,0,0,0.5); */
            background-color: rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

代码运行结果如下：

 1.3 背景图

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./img/04.png);
            background-repeat: repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

代码运行结果如下：

 1.3 背景图-背景平铺

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./img/04.png);
            /* background-repeat: no-repeat; */
            /* background-repeat: repeat-y; */
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat; */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

代码运行结果如下：

 1.4 背景位置

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./img/04.png);
            /* background-position: right bottom;
            background-position: center; */
            background-repeat: no-repeat;
            /* background-position: 50px 100px; */
            background-position: -50px 100px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

代码运行结果如下：

 1.5 复合属性

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            /* 不分先后顺序，背景色，背景图，背景图平铺，背景图位置
            background:pink url(./img/04.png) no-repeat center bottom 
            背景图位置如果是英文单词可以颠倒顺序*/
            /* background: pink url(./img/04.png) no-repeat center bottom; */
            /* 测试背景图位置如果是数值 不要颠倒顺序*/
            /*水平50px 垂直100px  */
            /* background: pink url(./img/04.png) no-repeat 50px 100px; */
            background: pink url(./img/04.png) no-repeat 100px 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

代码运行结果如下：

 1.6 背景图和img的区别

重要的用img，不重要的用背景图

1.7显示模块-块

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 块：独占一行；宽度默认是父级100%；添加宽度都生效 */
        div {
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 行内块 */
            display: inline-block;
            
        }
    </style>
</head>
<body>
    <div>1222000</div>
    <div>12112112121</div>
</body>
</html>

代码运行结果如下：

 1.8 显示模块-行内

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 行内：宽高不生效，不换行，尺寸和内容的大小相同 */
        span {
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 行内块 */
            display: inline-block;

            /* 块 */
            /* display: block; 转换成块级元素 */
            /* display: inline-block; 转换成行内块的元素 */
            /* display: inline; 转换成行内元素的属性 */

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

代码运行结果如下：

 1.9 显示模式-行内块

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <img src="./img/04.png" alt="">
    <img src="./img/04.png" alt="">
</body>
</html>

代码运行结果如下：

 2.0 拓展-标签嵌套

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- p和h标题不能相互嵌套 -->
<!-- 
    <p>
        <h1>一级标题</h1>
    </p> -->

    <!-- p里面不能包含div -->

<p>
    <div>divdiv</div>
</p>

</body>
</html>

代码运行结果如下：

 2.1 特性-继承性

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 所有控制文字的都能继承，不是控制文字的都不能继承 */
        div {
            color: red;
            font-size: 30px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>
</html>

2.2 特性-继承性-注意

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
            font-size: 12px;
        }
        a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">超链接</a>
        <h1>一级标题</h1>
    </div>
</body>
</html>

代码运行结果如下：

 2.3 特性-层叠性

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    div {
        color: red;
        color: green;
    }
    .box {
        font-size: 30px;
    }
</style>
</head>
<body>
    <div class="box">文字</div>
</body>
</html>

代码运行结果如下：

 三、综合案例

1.1 综合案例-导航栏

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* a显示模式是行内，加宽高默认不生效，转显示模式：行内块 */
        a {
            text-decoration: none;
            width: 100px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color:white;
            line-height: 50px;
            text-align: center;
        }
        a:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- alt shift 鼠标左键 多选  选多行加内容或者删除-->
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

 1.2 综合案例-五彩导航

这个需要五彩导航的图片，我找不到那个图片

代码示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
            width: 120px;
            height: 58px;
            background-color: pink;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            color: white;
        }

        /* 每个a的背景图不同，单独找到每个a，设置不同的背景图片 */
        .one {
            background-image: url(./img/2.png);
        }

        .two {
            background-image: url(./img/2.png);
        }

        .three {
            background-image: url(./img/2.png);
        }

        .four {
            background-image: url(./img/2.png);
        }

        .one:hover {
            /* background-image: url(./img/2.png); */
            background: skyblue;
        }

        .two:hover {
            /* background-image: url(./img/2.png); */
            background: red;
        }

        .three:hover {
            /* background-image: url(./img/2.png); */
            background: greenyellow;
        }

        .four:hover {
            /* background-image: url(./img/2.png); */
            background: blueviolet;
        }
    </style>
</head>

<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
</body>

</html>

代码运行结果如下：

 总结

以上就是CSS进阶中比较重要的语法，谢谢大家的观看。

坚持与努力的星星
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Css进阶＞＞Css3让你玩的开心哦。
qq_56248592的博客
11-15 353
Css3的一些属性： <style type="text/css"> *{ text-align: center; /*这种方法自己参考*/ /* background-image: linear-gradient(0deg, white, whitesmoke);*/ /*颜色写法的模式*/ /*方法一color+颜色单词*/ .
CSS学习总结
weixin_45148589的博客
03-13 3156
目录一、学习收获通过上次课的学习，对CSS有了如下的了解和收获：1.对CSS的背景的了解2.CSS的基本概念的学习3.对CSS的一些语法的掌握4.对于CSS的样式及生效的具体深入学习外部样式表内部样式表内联样式级联的优先级5.对CSS中颜色、尺寸、对齐等概念的学习6.CSS的盒子模型的学习7.对CSS的边框边距设置的学习8.对CSS中的定位概念的学习9.对CSS中溢出功能的学习10.对CSS中浮动的学习11.CSS中不透明度的调节学习12.对于CSS中组合选择器的学习13.最后的伪类伪元素的学习二、总结 一
WEB前端进阶之路——CSS基础笔记 01
酸奶`的博客
05-12 271
WEB前端—CSS基础笔记 01CSS简介CSS基础选择器选择器作用：基础选择器分类：基础选择器总结字体属性：字体属性总结文本颜色文本对齐方式装饰文本文本缩进行间距文本属性总结CSS引入方式Chrome调试工具做个好人 ~ 爱我所爱 ~ 开开心心 ~ 多赚点钱 ~ just do it ~ CSS简介 CSS基础选择器 CSS字体属性 CSS文本属性 CSS引入方式 综合案例 Chrome调试工具 CSS简介       层叠样式表(英文全称：
Web技术之css篇进阶（个人详细总结）
weixin_45680700的博客
03-14 319
Web技术之css篇进阶（个人详细总结）一：前言（何为css？）二：css语法1：元素选择器2：id选择器3：class选择器三：让css生效1：外部样式表2：内部样式表3：内联样式四：颜色, 尺寸, 对齐1：颜色篇2：尺寸篇3：对齐篇五：深入探讨----边框与边距 一：前言（何为css？） 撰写本文目的是为了记录笔者自己的一些学习收获，或者说是学习过程吧。仅仅只是个人的见解和理解，因为笔者自己也是刚入门，所有可能多有疏漏、错误，还请海涵。 好的，让我们言归正传。学习关于css的内容。 CSS是级联样式表（
CSS进阶之Sass
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-06 996
文章目录前言导航一、基本使用二、变量设置三、嵌套、拆分文件与引入四、@mixin与@include配合使用五、媒体查询与Mixin的使用 前言 本篇博客是关于CSS的进阶语法Sass，若文章中出现相关问题，请指出！ 所有博客文件目录索引：博客目录索引(持续更新) 导航 Sass官网 vscode安装插件：Live Sass Compiler 启动： 一、基本使用 可使用scss或sass文件来进行编写，一般使用scss因为其使用的{}来进行分层。 借助vscode插件来进行实时编译！通过{}分层形式可以达到
CSS进阶
qq_69401634的博客
07-26 296
内容包括一下CSS的进阶知识,包括但不限于盒子模型,溢出,透明度和手势,最大最小宽高,默认样式及重置,浮动...
前端基础总结-CSS
前端知识点总结
07-14 1696
1.初识CSS 概念： ​ CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 作用： 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式 2. 引入CSS样式表 2.1 行内式 概念： ​ 称为行内样式、行间样式、内联样式 ​ 是通
03web前端进阶教程-移动端
07-04
"03web前端进阶教程-移动端"是一个专门针对移动设备优化的前端学习资源，旨在帮助开发者掌握移动端的前端开发技能。 【移动端前端开发的重要性】 移动设备的普及使得移动端前端开发成为不可或缺的技能。移动设备的...
WEB前端-案例汇总
11-08
在“WEB前端-案例汇总”这个资源包中，包含了丰富的前端开发实例，旨在帮助初学者逐步进阶，全面掌握前端开发的各项技能。这个资源大汇总几乎涵盖了前端开发的所有领域，对于想要深入学习和理解Web前端技术的人来说...
WEB前端开发-案例汇总(81例).zip
05-08
《WEB前端开发-案例汇总(81例)》是一个丰富的前端学习资源库，包含了81个不同的实战案例，旨在帮助初学者逐步进阶，并为有经验的开发者提供设计和参考。这个压缩包中的每个文件代表一个独立的项目，涵盖了前端开发的...
Web-前端html+css从入门到精通 126. 表格扩展学习.zip
05-23
本课程“Web-前端html+css从入门到精通 126. 表格扩展学习”旨在帮助初学者深入理解如何使用HTML表格进行更高级的布局和设计，并通过CSS对表格进行美化和增强功能。以下将详细阐述HTML表格的基本结构、CSS对表格的...
Web-前端html+css从入门到精通 158. textshadow文字阴影.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基石。HTML负责定义网页的结构，而CSS则用于美化这些结构，让网页看起来更加丰富多彩。今天我们要深入探讨的是一个CSS中的特效属性——`text-shadow`，它能为网页的文字添加...
CSS 进阶
Hello_super的博客
02-17 808
CSS 变形 transform 1、translateX/Y **变形（transform）： ** 就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局。使用transform标签来设置元素的变形效果。 平移： 平移元素，百分比是相对于自身来计算的。 translateX()，沿着x轴方向平移； translateY()，沿着y轴方向平移； translateZ()，沿着z轴方向平移； transform: translateX() translateY(); /*变形的多个值之间使用
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 1047
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 750
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 407
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 431
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
css画半圆&&画圆弧
M1512415的博客
07-12 232
【代码】css画半圆&&画圆弧。
相对定位语法：css+xpath基础语法使用-定位页面元素
最新发布
m0_69119792的博客
07-16 539
介绍css和xpath，设置相对定位的基础使用
2020求知讲堂web前端（html5+css3）(Day1).pdf
03-14
2020求知讲堂web前端（html5+css3）(Day1)课程内容涵盖了web前端开发的基础和进阶学习，适合初学者和希望提升技能的专业人士。课程大纲分为基础阶段和深度学习阶段，分别聚焦于HTML5与CSS3技术。 在基础阶段，学员...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值