HTML+CSS基础用法三

已于 2024-10-01 14:58:08 修改
阅读量840 收藏 16
点赞数 18
文章标签： html css 前端
于 2024-09-29 21:10:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao_yi666/article/details/142633717
版权

目录：

🚘🚘🚘正片开始

CSS简单介绍

CSS的定义： 层叠样式表(Cascading Style Sheets，缩写为CSS)，是一种样式表语言，用来描述HTML 文档的呈现（美化内容）

CSS的书写位置： 我们知道在HTML中有两大类标签 头部标签：<head> 和 身体标签：<body> 学过点html的老铁们肯定知道，身体标签的内容是展示到网页中的，CSS 是美化界面的语言主要是做美化效果的，所有它的代码是不需要放在 <body> 中的，那自然只能放在 <head> 标签中了，因为CSS语言和HTML语言不同，自然不能直接把代码写在 <head> 中，需要在 <head>标签中嵌套一个 <style> 标签，在该标签中可以直接写CSS代码了

CSS引入的三种方式

  • 内部样式表(初学时使用)
    • CSS代码直接写在 <style> 标签内部，并且 <style> 标签需要写在 <head>标签内部
  • 外部样式表(开发时使用)
    • CSS代码单独写在以.css为后缀的文件中
    • 单独写开后，当然需要有方法引入到html文件中才行，此时 <link> 标签诞生了
      • <link> 标签的用法：<link rel="stylesheet" href="css文件路径">
  • 行内样式表(配合JavaScript使用)
    • 直接把CSS属性值写在style属性中：<p style="color:red;font-size:20px;">内容</p>

标签选择器

标签选择器定义规则：使用标签名作为选择器名，选择器的属性会给该标签的所有标签使用到。

标签选择器的定义语法

    <style>
    	/*定义了一个p标签选择器*/
        p{
        	color:red;
        	......
        }
    </style>

用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red; /*让颜色变为红色*/
            font-size: 30px; /*字体大小为30像素*/   
        }
    </style>
</head>
<body>
    <p>文本内容1</p>
    <p>文本内容2</p>
    <div>我是div标签，影响不到我</div>
</body>
</html>

效果展示
在这里插入图片描述
可以看见定义的p标签选择器只能影响 <p> 标签中内容属性。

注意： 标签选择器的选择器名必须是真实存在的标签，否则会无效果。

类选择器

类选择器的名字格式：必须以点开头如：.类名 ，不要用中文，尽量用英文命名，如英文单词命名，多个单词可以用 - 连接 如何 .rgb-red，见名知意即可。

类选择器定义语法

<style>
	.类名{
		color:red
		......
		}
</style>

对某个标签使用类选择器：<p class="类名"> 内容 </p> 此时该 <p> 标签的内容就会被该类选择器所美化

使用练习如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: blue; /*蓝色*/
            font-size: 32px; /*字体像素设置为32*/
        }
    </style>
</head>
<body>
    <p class="red">我使用了类选择器，快看看我的效果</p>
    <p>我没有使用类选择器。</p>
</body>
</html>

效果展示
在这里插入图片描述
可以看见使用了类选择器的 <p> 标签字体颜色变为蓝色，并且字号变为了32px像素。
没有使用类选择器的 <p> 标签没有任何变化，此时类选择器和标签选择器的对比一下就出来了，标签选择器是以某个标签命名的选择器，则该标签所有都生效，这个类标签则是谁使用谁就生效，相比之下变得更灵活了。

id选择器

应用场景：id选择器常配合JavaScript使用，很少用来设置CSS样式

id选择器命名规则：以#开头命名如：#red,#font,#rgb_blue,名字尽量不要有中文，尽量选取英文单词命名。

使用规则：在一个网页中同一个id选择器只能使用一次

id选择器的定义以及如何使用

<style>
	/*定义id选择器*/
	#red{
		color:red;
	}
<style>

/*使用id选择器*/
<div id ="red">内容</div> /*和类选择器的使用差不多，只是把class换成了id*/

id选择器的练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #red{
            color: green; /*使用绿色*/
        }
    </style>
</head>
<body>
    <p id = "red">我使用了id选择器，快观察我的效果</p>
    <p>我没有使用id选择器</p>
</body>
</html>

效果展示
在这里插入图片描述

通配符选择器

通配符选择器作用：查找页面所有标签，设置相同样式。

命名规则：以*开头命名

特点：无需调用，浏览器自动查找页面所有标签，设置相同样式

通配符选择器定义

<style>
   *{
       color: red;
    }
</style>

通配符选择器的练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
   <p>我是p标签</p>
   <h2>我是标题标签</h2>
   <div>我是div标签</div> 
</body>
</html>

效果展示
在这里插入图片描述
可以看见所有标签都变为红色了。

画盒子

首先先了解CSS中的三个属性

属性名作用
width设置标签的宽度
height设置标签的高度
background-color设置标签的背景颜色

学了这三个属性之后可以开始画盒子了

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color1{
            width: 250px;
            height: 250px;
            background-color:rgb(157, 36, 217);
        }
        .color2{
            width: 250px;
            height: 250px;
            background-color:rgb(15, 31, 113);
        }
    </style>
</head>
<body>
    <div class="color1"></div>
    <br><br>
    <div class="color2"></div>
</body>
</html>

效果展示
在这里插入图片描述

CSS中文字大小/粗细/倾斜属性介绍

表格介绍

属性名属性值作用
font-size像素值 如（10px,20px,15px…）设置字体大小
font-weight不加粗：400/normal
加粗：700/bold		设置字体粗细
font-style不倾斜：normal
倾斜：italic		设置文字是否倾斜

行高

什么是行高？我粗略的画了张图，请大家不要嫌弃哈，画工虽然差，但为了能更快的理解行，本博主也是拼了
如下图所示
在这里插入图片描述
从上图可以看出来行高=上间距+字体高度+下间距。

行高的属性是：line-height

属性值有两种写法：

  • 数字+px(高度像素值)
  • 只写数字（最终行高是数字✖字体大小）

接下来使用一下这两种属性值的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*该类选择器测试赋值数字+px*/
        .line_height1{
            line-height: 32px;
        }
         /*该类选择器测试只赋值数字*/
        .line_height2{
            line-height: 2;
        }
    </style>
</head>
<body>
    测试赋值(数字+px):
    <br>
    <p class="line_height1">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
    <p class="line_height1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p class="line_height1">嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡</p>
    测试只赋值数字:
    <br>
    <p class="line_height1">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
    <p class="line_height1">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <p class="line_height1">嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡嗡</p>
</body>
</html>

观察代码我使用了两个类选择器，分别把这两种赋值情况都使用了遍接下来我们看看它们的行高效果

在这里插入图片描述
聪明的你们应该已经发现了这两种赋值既然最终行高效果是一样的，这是为什么呢？
我给 类选择器.line_height2里面行高属性赋值的是2，那么最终行高应该是2✖字体大小，
我给大家分享个小知识，在谷歌浏览器中网页中默认字体大小是16px像素，也就是说在 类选择器.line_height2里面行高最终被赋值的属性是2✖16px=32px,和 类选择器.line_height1里面行高的赋值一样了，所以才会看见上面的效果

接下来我们看看让文字垂直居中的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 100px;
            line-height: 100px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div>我要居中</div>
</body>
</html>

效果展示
在这里插入图片描述
发现该文字已经垂直居中了，这是怎么做到的呢？在上面代码中我们把 <div> 标签的高度尺寸设置为了100px像素，并且文字行高也设置成了100px,就达到了垂直居中的效果，当行高为100px,我们以在谷歌浏览器中举例，谷歌浏览器字体大小默认是16px,那么还剩下84px，上下间距各自一半像素，这不就达到让文字垂直居中的效果了嘛。

CSS中缩进/对齐/修饰线

三个属性表格介绍如下

属性名属性值作用
text-indent数字+px/数字+em(1em等于当前标签的字号大小)
例如：2em则表示缩进两个字的大小		段落缩进
text-alignleft：左对齐，center：居中对齐，right：右对齐文本对齐
text-decorationnone：取消下划线，underline:增加下划线，line-through:删除线，overline：上划线文本修饰线

接下来逐一对下面属性进行使用

  1. text-indent属性的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       p{
        text-indent: 2em;
       } 
    </style>
</head>
<body>
    <p>CSS（层叠样式表）是一种用于表现HTML或XML等文件样式的计算机语言‌，
    它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页元素进行格式化。‌
    12CSS的应用方式主要有四种：链入外部样式表文件、使用STYLE属性、
    使用STYLE标签和使用LINK标签。这些方法使得CSS样式可以灵活地应用于网页中，
    实现样式的统一管理和应用。CSS具有丰富的样式定义能力，可以提供文本和背景属性的设置，
    允许创建边框和距离设置，改变文本大小写和修饰方式等。
    此外，CSS还具有易于使用和修改的特点，可以将样式声明统一存放和管理，实现多页面样式的统一应用。
    </p>
</body>
</html>

效果展示
在这里插入图片描述

2.text-align属性的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .center{
            text-align: center;
        }
        .right{
            text-align: right;
        }
    </style>
</head>
<body>
    <p class="center">我要居中对齐</p>
    <p class="right">我要右对齐</p>
</body>
</html>

效果展示
在这里插入图片描述

  1. text-decoration属性的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none; /*取消下划线*/
        }
        p{
            text-decoration: underline; /*增加下划线*/
        }
        div{
            text-decoration:line-through; /*添加删除线*/
        }
    </style>
</head>
<body>
    <a href="#">我是超链接，我有下划线</a>
    <p>我是p标签，请给我加下划线</p>
    <div>我是div标签请给我加删除线</div>
</body>
</html>

效果展示
在这里插入图片描述

CSS中的color属性

表格如下

颜色表示方式属性值说明使用场景
颜色关键字颜色英文单词red,green,blue…学习测试
rgb表示法rgb(r,g,b)r,g,b表示红绿蓝三原色，取值：0-255了解
rgb表示法rgba(r,g,b,a)a表示透明度，取值：0-1(a越接近1越不透明)开发使用，实现透明色
十六进制表示法#RRGGBB#000000,#ffcc00,简写：#000，#fc0开发使用

综合案例：新闻消息

源码如下 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农耕新闻</title>
    <style>
        h1{
            text-align: center;
            font-size:30px;
            color: #333;
            font-weight: 400;
        }
        div{
            color: #999;
            font-size: 14px;
        }
        p{
            font-size: 18px;
            color: #333;
            text-indent: 2em;
        }

        .div-img{
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>在希望的田野上|湖北秋收开镰 各地多举措保增产增收</h1>
    <div>来源 央视网|2222年12月12日 12:12:12</div>
    <p><strong>央视网消息：</strong>眼下湖北省秋收开镰已有一周多。水稻收割已经超过四成，玉米收割七成。
        湖北省通过推广新品种水稻高标准农田等一系列措施，为求粮稳产提供有力支撑。</p>
    <p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万中稻已经收割四成以上。</p>
    <div class="div-img"> <img src="https://t10.baidu.com/it/u=892333483,198314090&fm=30&app=106&f=JPEG?w=640&h=427&s=11E26EFBBE9A5BCC38299A7403008074"></div>
   
    <p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示
        范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广
        确保来年增产增收</p>
    <p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收
        割中，预计10月中旬收割完毕。</p>
</body>
</html>

展示效果
在这里插入图片描述

完结🎉🎉🎉

小亦苦学编程
关注
黑马基础学习html+css课程笔记和案例
06-29
学习CSS，你需要掌握选择器的用法，如元素选择器、类选择器、ID选择器等，以及如何使用属性来定义样式，如`color`改变文本颜色，`font-size`调整字体大小，`margin`和`padding`设置内外边距，`display`控制元素显示...
前端零基础学习html+css基础用法和常用语法
03-31
自己对html和css的一点点小总结，归纳出了我自己对html的理解，以及对我自己常用css样式 的结合
《HTML5+CSS3网站设计基础教程》源代码+补充案例+动手实践
01-11
《HTML5+CSS3网站设计基础教程》是一本旨在教授读者如何使用现代Web技术构建交互式、响应式网站的教材。源代码、补充案例和动手实践环节是学习过程中的重要组成部分，它们帮助理论知识与实际操作相结合，使学习更加...
css常用代码大全(html+css代码).pdf
07-13
在“CSS常用代码大全(html+css代码).pdf”中，我们可以看到一系列常用的CSS代码及其用法。 首先，关于文本设置，`font-size`用于定义文本的字号，`font-style`可以设置文本的斜体，如`italic`或`normal`，`font-...
HTML+CSS+JavaScript基础
06-11
学习HTML+CSS+JavaScript基础，首先需要掌握HTML的各种标签及其用法，理解HTML5的新特性并能实际应用。接着，深入学习CSS的选择器、盒模型、定位、浮动以及媒体查询等核心概念，以便创建美观且响应式的布局。最后，...
【ONE·Web || HTML】
上士闻道，勤而行之。觉纷扰则静坐，觉懒看书则且看书 ♪(´▽｀)
10-05 1094
主要内容：HTML基本知识入门，主要介绍了常见的一些标签使用，以及简单案例演示。
如何通过js加载css和html
wangnanofspirit的博客
10-05 470
加载CSS：可以通过创建<link>标签或使用fetchAPI 来实现。加载HTML：推荐使用fetchAPI，因为它更现代且易于使用。如果需要支持旧浏览器，可以使用。这些方法可以帮助你在运行时动态地加载和应用CSS和HTML资源，从而提高用户体验和页面性能。希望这些示例对你有所帮助！
好玩的水表电表
lulei5153的博客
10-01 2036
【代码】好玩的水表电表。
HTML ASCII：Web 开发中的字符编码基础
wjs2024的博客
10-05 566
ASCII，全称为美国信息交换标准代码（American Standard Code for Information Interchange），是一种用于电子通信的字符编码标准。它最初于1963年提出，用于在不同的计算机系统之间传输文本数据。ASCII码使用7位二进制数来表示128个不同的字符，包括大小写字母、数字、标点符号和控制字符。在HTML（超文本标记语言）中，ASCII编码扮演着重要的角色，因为它为网页内容的显示提供了基础。
HTML流光爱心
兔子王
09-29 3980
HTML语言实现红蓝色流光爱心效果的完整代码。
学习 CSS 新的属性 conic-gradient 实现环形进度条
m0_73035846的博客
10-04 379
我们在工作中用到环形进度条的时候，一般都是使用组件库提供的，那么你有没有想过这是怎么实现的呢？
CSS画出三角形的做法
mingangel的博客
10-01 539
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS相关属性和显示模式
探索软件工程的奥秘
10-04 1256
例：background : pink url(./cat.png) no-repeat right center/cover;属性值：block（块级）、inline（行内）、inline-block（行内块）值：no-repeat、repeat（默认）、repeat-x、repeat-y。例2：background-position : 50px -100px;rgba表示法：rgba(r,g,b,a)，a表示透明度（0-1）例：background-repeat : no-repeat。
CSS浮动
最新发布
2401_82561004的博客
10-06 482
浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。另外，在浮动元素之后定义的文本或者行内元素都将环绕在浮动元素的一侧，从而可以实现文字环绕的效果，类似于Word 中图文混排。注意：浮动（float）属性仅对非绝对定位的元素有效，跟随浮动元素的文本或行内元素将围绕在浮动元素的另一侧，例如向左浮动的话其它元素将围绕在浮动元素的右侧。运行结果如下图所示：图：float 属性演示。
深入浅出 CSS 定位：全面解析与实战指南
2301_79175212的博客
10-04 1603
在当今互联网时代，网页设计不仅需要具备美观的视觉效果，还需确保用户体验的流畅与便捷。而实现这一目标的关键，往往隐藏在细节之中。CSS（层叠样式表）作为前端开发的重要组成部分，其定位（Positioning）机制在布局设计中扮演着至关重要的角色。无论你是初涉前端世界的新手，还是希望提升技能的开发者，掌握 CSS 定位的各种技巧与应用，无疑会为你的网页设计增色不少。本文将以通俗易懂的语言，详细解析 CSS 定位的各类属性，并通过实际案例，助你轻松驾驭这一强大工具。CSS 定位允许你控制 HTML 元素在页面上的
CSS 布局——清除浮动 （二）
m0_74012211的博客
10-06 393
CSS 布局——清除浮动
前端编程艺术（2）----CSS
lys20221113242的博客
10-02 1501
1.CSSCSS，全称为层叠样式表（Cascading Style Sheets），是一种用来控制网页布局和样式的标记语言。它与HTML结合使用，通过为HTML元素应用样式来美化和格式化网页。使用CSS，可以将网页的布局、颜色、字体、背景、边框等各个方面进行精确控制，从而使网页呈现出专业、统一和美观的外观。CSS通过选择器和声明来定义样式，选择器用于选中要应用样式的HTML元素，声明则定义元素的样式属性和值。2.CSS引入在HTML文件中引入CSS有三种方式：内部样式表、外部样式表和行内样式。
CSS中严格模型/混杂模式
hexadecimal_001的博客
10-05 460
严格模式定义：严格模式是指浏览器按照W3C标准对网页进行解析和渲染的模式。工作原理：在严格模式下，浏览器会遵循标准的CSS规范和行为，如标准的盒模型、布局规则等。混杂模式定义：混杂模式是指浏览器尝试向后兼容旧版本的浏览器渲染方式的模式。工作原理：在混杂模式下，浏览器可能会采用一些非标准的解析和渲染方式，以兼容旧版本的CSS和HTML代码。
css 边框流光效果
qq_43086723的博客
09-30 540
css 边框流光效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值