学好CSS优化HTML【进阶版】

已于 2024-06-30 20:27:43 修改
阅读量814 收藏 28
点赞数 14
分类专栏： HTML 文章标签： css html 学习
于 2024-05-20 17:10:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65450681/article/details/138941597
版权

目录

一、概述

二、背景图的设置

1.背景图

a.代码展示

b.运行结果展示

c.小节

2.背景图平铺

a.属性background-repeat:

b.运行结果

c.小节

3.背景图位置background-position

a.代码展示

b.运行结果

c.小节

4.背景图大小属性background-size:

a.代码

b.运行结果

5.背景图的固定background-attachment

a.代码展示

b.运行结果

6.背景图的综合属性

a.代码

b.运行结果

c.小节

7.显示模式

8.显示模式转化

a.代码展示

b.运行结果

c.小节

三、伪类结构选择器

1.属性用法解释

2. 运行结果

3.小节

四、伪元素选择器

1.代码展示

 2.结果展示

五、盒模型

1 .属性介绍

a.内边距

b.外边距

2.代码示例

3.结果展示

六、盒模型的组成

1.属性介绍及代码示例

2.运行结果展示

3.盒模型介绍

七、总节

一、概述

今天我们主要来学习背景图的设置、显示模式、伪类结构，伪元素、盒模型等，这些是我们学习css的重要部分。那么接下来让我们一起学习吧~

二、背景图的设置

1.背景图

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
   
           .box{
            width: 500px;
            height: 300px;
            border: 1px solid greenyellow;
            background-image: url('./images/1.webp');

           }
        p{
           
            background-color: pink;
            padding: 50px;
            margin: 100px;
        }
    </style>
    
</head>
<body>
    <div class="box"></div>
    <p>苔花如米小，也学牡丹开。</p>
</body>
</html>

b.运行结果展示

c.小节

background-img 属性设置了一个元素的背景图片

background-color 背景色 值可以是rgb/单词/16进制数

background-color: rgb(125, 0, 0);

background-color: #f90;

background-color:颜色的英文单词

2.背景图平铺

a.属性background-repeat:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid greenyellow;
            /* 设置一个图像的背景图 */
            background-image: url('./images/1.webp');
            /* background-repeat: repeat;平铺  属性 设置背景图是否平铺（重复） */
            /* background-repeat: repeat-x; 水平平铺*/
            /* background-repeat: repeat-y ; 垂直平铺 */
            background-repeat: no-repeat;
            /* 不平铺 */
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p></p>
</body>

</html>

b.运行结果

c.小节

repeat;平铺  属性 设置背景图是否平铺（重复）

repeat-x; 水平平铺

repeat-y ; 垂直平铺

 no-repeat;不平铺

3.背景图位置background-position

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid greenyellow;
            /* 设置一个图像的背景图 */
            background-image: url('./images/1.webp');
            /* background-repeat: repeat;平铺  属性 设置背景图是否平铺（重复） */
            /* background-repeat: repeat-x; 水平平铺*/
            /* background-repeat: repeat-y ; 垂直平铺 */
            background-repeat: no-repeat;
            /* 不平铺 */
            background-position: center;
            /* background-position属性 设置背景图的位置 background：水平垂直 
            水平：left/center/right
            垂直：top/center/bottom
            像素值
            百分比
         */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

b.运行结果

c.小节

1）background-position属性 设置背景图的位置 background：水平 垂直（先写水平值后写垂直 ，如果都是center就可以只写一个）

2）属性值还可以是像素值、百分比

4.背景图大小属性background-size:

a.代码

background-size: 100px 100px;

b.运行结果

可以明显看到图片变小了

5.背景图的固定background-attachment

a.代码展示

 /*  background-attachment 背景图的固定 */

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100px;
            height: 100vh;
            background-image: url(./images/1.webp);
            background-repeat: no-repeat;
            background-position: center;
            /*  background-attachment 背景图的固定 */
            background-attachment: fixed;
        }

        .box {
            width: 500px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

b.运行结果

6.背景图的综合属性

a.代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .box{

            width: 500px;
            height: 300px;
            border: 2px solid green;
            /* background :background-color bg-img repeat position */
            background: pink url(./images/1.webp) no-repeat center;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

b.运行结果

c.小节

顺序为background-color bg-img repeat position（颜色 背景图 背景图平铺 位置）

background :background-color bg-img repeat position

7.显示模式

块元素: 独占一行 可以设置宽高

行内元素：共处一行 不可设置宽高

行内块元素： 共处一行 可以设置宽高

（这里不做过多解释，下一节会单独总结所有元素）

8.显示模式转化

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: red;
            width: 100px;
            height: 50px;
            /* 转化为行内元素 */
            display: inline;
            /*  转化为行内块元素:display:inline-block; */
            /* display:inline-block; */

        }

        p {
            background-color: green;
            width: 100px;
            height: 50px;
            /* 转化为行内元素 */
            /* display:inline; */
            /*  转化为行内块元素:display:inline-block; */
            display: inline-block;
        }

        span {
            background-color: #f90;
            width: 100px;
            height: 50px;
        }

        a {
            background-color: aquamarine;

        }

        input {
            background-color: #fff;
            width: 100px;
            height: 50px;
        }

        img {
            background-color: pink;
            width: 200px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div>div是块元素 </div>
    <p>p标签是块元素</p>  
    <span>span标签</span>
    <a href="#"> a标签</a>
    <br>
    <input type="text" name="" id="">
    <img src="./images/1.webp" alt="">
</body>

</html>

b.运行结果

这里我们可以很清楚的看到div标签和标签在同一行，而不是在不同两行。这里就是把块元素转换为了行内块元素。

c.小节

转化为行内元素display:block;

 转化为行内元素：display：inline；

 转化为行内块元素:display:inline-block;

三、伪类结构选择器

1.属性用法解释

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  
    .list li:first-child {
      color: red;
    }

    .list li:last-child {
      color: aqua;
    }

    .list li:nth-child(3) {
      color: chartreuse;
    }

    .list>li:nth-child(2n) {
      color: darkmagenta;
    }

    .list>li:nth-child(2n+1) {
      background-color: blue;
    }


    .list>li:nth-child(n+2) {
      background-color: #9ff;
    }
  </style>
</head>

<body>
  <ul class="list">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
  </ul>
</body>

</html>

2. 运行结果

3.小节

.list li:first-child 第一行改变属性

.list li:last-child 最后一行改变属性

.list li:nth-child(n) 第n行改变属性

.list>li:nth-child(2n)  改变所有的偶数行

.list>li:nth-child(2n+1) 选中所有的奇数行

.list>li:nth-child(n+2) 选中第二行及以后

四、伪元素选择器

1.代码展示

伪元素：只能是前伪元素（作为第一个子元素），后者伪元素（作为最后一个子元素）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 伪元素选择器 */
        .box::before {
            /* 内容为空 */
            content: ' ';
            /* 转为块元素 */
            display: block;
            width: 300px;
            height: 2px;
            background-color: chartreuse;
        }

        .box::after {
            content: ' ';
            display: block;
            width: 300px;
            height: 2px;
            background-color: chartreuse;
            /* 绝对定位  （父元素上需要写一个相对定位） */
            position: absolute;
            bottom: 0;
        }

        /* 在左面 */
        /* .box::after{
            content: ' ';
            display: block;
            width: 2px;
            height: 80px;
            background-color: chartreuse;
            position: absolute;
            left: 0;
            bottom: 0;
        }    */
        .box {
            background-color: pink;
            width: 300px;
            height: 80px;
            /* 相对定位 */
            position: relative;
        }
    </style>
</head>

<body>
    <div class="box">
        不想上课好麻烦
    </div>
</body>

</html>

 2.结果展示

五、盒模型

1 .属性介绍

a.内边距

padding 内边距 padding-left padding-right padding-top padding-bottom

padding：20px;上下左右都是20px

padding：10px 20px;上下为10 左右20

padding：10px 20px 30px ;上10 左右20 下30

 padding：10px 20px 30px 40px;上10 右20 下30 左40

b.外边距

外边距margin-left(左) margin-right（右） margin-top(上)     margin-bottom（下）

（数值对应与内边距相同）

margin：20px;

margin：20px 50px;

margin：20px 60px 30px;

 margin：20px 60px 30px 40px;

 margin：0 auto;  (上下为0左右自适应)

2.代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .box{
            background-color: rgb(255, 72, 133);
            padding: 20px;
        }
        .box2{
            width: 500px;
            height: 50px;
            background-color: rgb(237, 85, 251);
           
            margin: 10px;
        }
        .box3{
            height: 50px;
            width: 300px;
            background-color: rgb(90, 0, 234);
            
        }

    </style>
</head>
<body>
    <div class="box">不想学习，不想学习，不想学习。</div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

3.结果展示

六、盒模型的组成

1.属性介绍及代码示例


            border- width： 5px;
            border-style:solid ;
            可用属性有：
            dotted：定义点状边框。在大多数浏览器中呈现为实线。
            dashed：定义虚线边框。
            solid：定义实线边框。
            double：定义双线边框。两条单线与其间的空白组合的宽度等于指定的border-width值。
            groove：定义3D凹槽边框。其效果取决于边框的颜色值。
            ridge：定义3D垄状边框。其效果取决于边框的颜色值。
            inset：定义3D凹边边框。其效果取决于边框的颜色值。
            outset：定义3D凸边边框。其效果取决于边框的颜色值。
            none：定义无边框。
            hidden：与none相同。对于表，hidden用于解决边框冲突。
            border-color:red;

            可以整合为：
            border：5px solid red;
            顺序是：border:border-width  border-style border-color

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
           
            border: 5px solid greenyellow;
            padding: 10px;
            margin: 20px;
            /* 标准盒模型转化为怪异盒模型 */
            box-sizing: border-box;
            /* 怪异盒模型转化为标准盒模型 */
            /* box-sizing: content-box; */
        }
    </style>
</head>

<body>
  
    <div class="box"></div>
</body>

</html>

2.运行结果展示

3.盒模型介绍


        盒模型：
        标准盒模型
        宽度=width
        怪异盒模型（IE模型）
        宽度=content+左右的内边距+左右的边框宽度

七、总节

这一节主要学习了背景图的相关属性以及伪元素选择器，还有我们的盒模型，之后我们会用到这些属性~ 那么下一章节我们就要开始学习浮动与flex  布局方便我们制作网页，让我们的网页更加精致。那么我们下期再见~           see you~

辛-夷
关注
  • 14
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
学好css优化HTML【基础版】
weixin_65450681的博客
05-14 1047
a:link 未被访问过，访问之前的状态a:visited 访问过后的状态、a:hover 鼠标滑过的状态a:active 鼠标按下时的状态字体颜色 color：颜色；字体大小 font-size：值px;字体 font-family ：字体样式；字体加粗 font-weight：100-900（整百值）字体倾斜 font-style：italic;
怎么学好html5和css3,如何提高你的CSS水平
weixin_39615419的博客
06-17 312
在今天的文章中，我将要聊聊我在一年半的实践中，总结出来的css经验。首先让我提醒你，css是极其简单的一门语言，简单到可以用三个词概括：选择器，属性以及属性的值。这也是一些人不喜欢css的原因：他们觉得写css像孩子玩乐高玩具一样简单。是这样的。。如果你给一个9岁的孩子介绍css的基本原理，他就会搭建一个网站。不过这个网站不会很复杂，也就是一些包含头部，链接，内容图片的页面而已。事实上，css是一...
尚硅谷前端入门html+css学习笔记——HTML4
qq_62237063的博客
08-04 729
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频网页（淘宝、京东）、小程序（支付宝、抖音）、数据可视化（智慧工地可视化大数据展示平台）、服务器、客户端全称：HyperText Markup Language 译为： 超文本标记语言1996年W3C制定HTML规范，2014年HTML5由W3C正式发布。
html css语言简介,CSS 介绍
weixin_39802132的博客
05-31 483
CSS 介绍CSS代表级联样式表( Cascading Style Sheets)。CSS是一种标准样式表语言，用于描述网页的表示形式(即布局和格式)。在CSS之前，HTML文档的几乎所有表示形式属性都包含在HTML标记内(特别是在HTML标签内)。所有字体颜色，背景样式，元素对齐方式，边框和大小都必须在HTML中明确描述。这样做产生的后果，就是由于样式信息被重复地添加到网站的每个页面中，因此大型...
前端基础CSS+html篇 2w字吐血总结
chengxuyuanlee的博客
12-30 1904
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。
HTML和CSS的学习
小王的博客
09-16 411
html的学习
必学的web前端三大核心:JavaScript css3 HTML5
cpythonsz的博客
07-30 902
对于前端的学习和提高，我的基本思路是这样的。首先，前端的三个最基本的东西 HTML5、CSS3 和 JavaScript（ES6）是必须要学好的。这其中有很多很多的技术，比如，CSS3 引申出来的 Canvas（位图）、SVG（矢量图） 和 WebGL（3D 图），以及 CSS 的各种图形变换可以让你做出非常丰富的渲染效果和动画效果。ES6 简直就是把 JavaScript 带到了一个新的台阶，JavaScript 语言的强大，大大释放了前端开发人员的生产力，让前端得以开发更为复杂的代码和程序，于是像 Re
学好WEB前端之HTML 规范
Java高级教程、Java架构师、Java进阶教程
06-29 175
摘要 优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护 HTML 规范 缩进 统一两个空格缩进 命名规范 class 应以功能或内容命名，不以表现形式命名； class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔； 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class； DOC...
学好前端开发之HTML规范
软件开发-前端开发-IT
07-24 155
摘要 优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护 HTML 规范 缩进 统一两个空格缩进 命名规范 class 应以功能或内容命名，不以表现形式命名； class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔； 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class； DOC...
学好html+css基础
09-25
### 学好HTML+CSS基础 #### 一、HTML+CSS概述 HTML（HyperText Markup Language，超文本标记语言）和CSS（Cascading Style Sheets，层叠样式表）是Web开发的基础技术之一，用于构建网页的基本框架和设计网页的表现...
html+css入门学习笔记
01-24
记住，理论知识与实践相结合是学好HTML+CSS的关键。 总之，HTML+CSS的学习是一段充满创造性和乐趣的旅程，只要你用心投入，一定能够打造出独具特色的网页作品。不断探索，持续学习，你将在网页设计的世界里游刃有余...
css 学好的口诀
09-12
学好CSS对于解决网站bug、提高网站美观度及用户体验至关重要。以下根据提供的文件信息，整理出一些关键的学习口诀及相关的知识点。 #### 一、理解CSS的基本原理 - **选择器**：CSS通过选择器来定位HTML元素，并...
css全攻略，轻松学好css
11-29
"css全攻略，轻松学好css"这个资源集合了丰富的CSS样式示例，旨在帮助学习者全面理解并掌握CSS的核心概念和实用技巧。 1. **CSS基本语法** CSS使用选择器来定位HTML或XML文档中的元素，然后应用样式规则。例如，`p...
五天学好CSS---任务量详细，每天按任务完成，五天精通CSS
07-27
本教程“五天学好CSS”旨在帮助初学者在短短五天内掌握这一关键技术，通过每日设定的任务量，确保学习进度与理解深度。 **第一天：CSS基础** 1. **CSS简介**：了解CSS的起源、作用和基本语法，包括选择器、属性和值...
CSS的重绘和重排是什么？
最新发布
沐爸的博客
08-12 764
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
css实现水滴效果图
yinge0508的博客
08-12 444
【代码】css实现水滴效果图。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 743
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
CSS（层叠样式表）
Chujun123528的博客
08-09 1195
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
HTML+CSS入门：打造首个网页，理解基础标签与结构
在"学好HTML+CSS基础"的教程中，本文主要介绍了Web前端开发的基础知识点，尤其是HTML和CSS这两个核心技术。HTML (HyperText Markup Language) 被誉为网页内容的语言，负责构建网页的结构和内容，包括文本、图像、...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值