HTML样式- CSS——WEB开发系列08

news2024/12/23 4:03:41

一、HTML 基础概述

HTML 用于创建网页的结构。网页的所有内容，例如文本、图像、链接、表单等，都是通过 HTML 标签来定义的。以下是一个简单的 HTML 文档结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 和 CSS 基础知识</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到 HTML 和 CSS 的世界</h1>
    </header>
    <main>
        <section>
            <h2>学习 HTML 和 CSS</h2>
            <p>在本篇博客中，我们将探讨 HTML 和 CSS 的基础知识。</p>
        </section>
    </main>
    <footer>
        <p>版权 © 2024</p>
    </footer>
</body>
</html>

二、CSS 样式的应用

CSS 从 HTML 4 开始引入，旨在提升 HTML 元素的渲染效果。

CSS 可以通过以下三种方式应用于 HTML：

  1. 内联样式 - 直接在 HTML 元素中使用 ​​style​​ 属性。
  2. 内部样式表 - 在 HTML 文档的 ​​<head>​​ 部分使用 ​​<style>​​ 元素来包含 CSS。
  3. 外部样式表 - 通过引用外部的 CSS 文件来应用样式。

在这三种方法中，推荐使用外部样式表，因为它有助于更好地组织和维护 CSS 代码。

2.1 内联样式

当需要将特殊样式应用于个别元素时，可以使用内联样式。这种方法是通过在相关标签中直接使用 ​​style​​ 属性来实现的。​​style​​​​ 属性允许包含任何 CSS 属性，从而对该元素进行特定的样式设置。这种方法适合在单个元素上快速应用样式，但不推荐在大型项目中使用，因为它会使 HTML 代码变得混乱，并且不易于维护。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联样式示例</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">这是一个内联样式的标题</h1>
    <p style="background-color: yellow; font-size: 20px;">这是一个带有背景颜色和字体大小的段落。</p>
</body>
</html>

解释：

  • ​​style="color: blue;"​​：设置 ​​<h1>​​ 元素的文本颜色为蓝色。
  • ​​style="text-align: center;"​​：将 ​​<h1>​​ 元素的文本对齐方式设置为居中。
  • ​​style="background-color: yellow; font-size: 20px;"​​：设置 ​​<p>​​​ 元素的背景颜色为黄色，并将字体大小设置为 20 像素。

2.2 内部样式表

内部样式表将 CSS 代码直接嵌入到 HTML 文档的 ​​<head>​​ 部分的 ​​<style>​​​ 标签中。这种方法适合在一个文档中应用样式，并且可以避免使用内联样式造成的混乱。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            background-color: #fff;
            padding: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>这是一个使用内部样式表的标题</h1>
    <p>这是一个使用内部样式表的段落。</p>
</body>
</html>

解释：

  • ​​body​​ 选择器设置了页面的字体、背景颜色以及内外边距。
  • ​​h1​​ 选择器设置了标题的颜色和对齐方式。
  • ​​p​​​ 选择器设置了段落的背景颜色、内边距和字体大小。

2.3 外部样式表

外部样式表将 CSS 代码放在一个单独的 ​​.css​​ 文件中，通过 ​​<link>​​​ 标签将其引入到 HTML 文档中。这种方法适合大型项目，可以使样式与 HTML 结构分离，方便维护和重用。

示例：

styles.css:

body {
    font-family: 'Verdana', sans-serif;
    background-color: #e0e0e0;
    margin: 0;
    padding: 0;
}

h1 {
    color: #4CAF50;
    text-align: center;
}

p {
    background-color: #fff;
    padding: 15px;
    font-size: 16px;
    color: #333;
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>这是一个使用外部样式表的标题</h1>
    <p>这是一个使用外部样式表的段落。</p>
</body>
</html>

解释：

  • ​​styles.css​​ 文件中定义了 ​​body​​、​​h1​​ 和 ​​p​​ 元素的样式。
  • 在 ​​index.html​​ 文件中，通过 ​​<link>​​​ 标签引入了外部样式表。

三、HTML 和 CSS 样式实例

3.1 背景颜色

背景颜色是网页设计中常用的样式属性，可以为页面的不同部分设置背景色。

HTML 和 CSS 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色示例</title>
    <style>
        .section {
            background-color: #ffcccb;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="section">
        <h2>背景颜色示例</h2>
        <p>这是一个背景颜色为浅红色的区域。</p>
    </div>
</body>
</html>

解释：

  • ​​.section​​ 类选择器设置了背景颜色为浅红色（​​#ffcccb​​​），内边距为 20 像素，外边距为 10 像素。

3.2 字体、字体颜色和字体大小

字体样式对于网页的可读性和视觉效果非常重要。通过 CSS，可以设置字体、颜色和大小。

HTML 和 CSS 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式示例</title>
    <style>
        .text-style {
            font-family: 'Georgia', serif;
            font-size: 24px;
            color: #333;
        }
    </style>
</head>
<body>
    <p class="text-style">这是一个自定义字体、字体大小和颜色的段落。</p>
</body>
</html>

解释：

  • ​​.text-style​​ 类选择器设置了字体为 Georgia，字体大小为 24 像素，颜色为深灰色（​​#333​​​）。

3.3 文本对齐方式

文本对齐方式决定了文本在其容器中的对齐位置，包括左对齐、右对齐、居中对齐等。

HTML 和 CSS 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐示例</title>
    <style>
        .left-align {
            text-align: left;
        }
        .center-align {
            text-align: center;
        }
        .right-align {
            text-align: right;
        }
    </style>
</head>
<body>
    <p class="left-align">这是左对齐的文本。</p>
    <p class="center-align">这是居中对齐的文本。</p>
    <p class="right-align">这是右对齐的文本。</p>
</body>
</html>

解释：

  • ​​.left-align​​​ 类将文本对齐

以下是两道关于HTML和CSS样式的练习题，内容涵盖了内联样式、背景颜色、字体、字体颜色、字体大小、文本对齐方式、内部样式表和外部样式表的运用。

练习题 1：创建个人简介页面

要求：

  1. 创建一个简单的个人简介页面，使用内联CSS样式设置背景颜色、字体颜色和字体大小。
  2. 内容包括姓名、年龄和爱好。
  3. 设置文本为居中对齐。

示例代码结构：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简介</title>
</head>
<body style="background-color: lightblue;">
<h1 style="color: darkblue; font-size: 24px; text-align: center;">姓名：张三</h1>
<p style="color: black; font-size: 18px; text-align: center;">年龄：25岁</p>
<p style="color: black; font-size: 18px; text-align: center;">爱好：阅读、旅行、摄影</p>
</body>
</html>

练习题 2：创建一个简单的产品展示页面

要求：

  1. 使用内部样式表，定义页面的背景颜色、字体样式、字体颜色和文本对齐方式。
  2. 在页面中添加一个产品的名称、描述和价格。
  3. 使用外部样式表，设置产品图片的宽度和边框样式。

示例代码结构：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品展示</title>
<link rel="stylesheet" href="styles.css"> <!-- 外部样式表 -->
<style>
body {
background-color: #f8f8f8;
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: green;
font-size: 28px;
}
p {
color: gray;
font-size: 20px;
}
</style>
</head>
<body>
<h1>智能手机</h1>
<img src="phone.jpg" alt="智能手机" class="product-image">
<p>描述：这是一个高性能的智能手机，具有强大的功能。</p>
<p>价格：￥3999</p>
</body>
</html>

styles.css 文件内容:

.product-image {
width: 300px; /* 设置图片宽度 */
border: 2px solid #000; /* 添加黑色边框 */
border-radius: 5px; /* 圆角边框 */
}

注意：

​CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。

对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。

实例：

<a href="#" style="color:red;" rel="nofollow ugc">只能使用"内联"方式</a>

扩展：

在 CSS 中，引入外部样式表的方式有两种：

使用 ​​<link>​​ 标签：

<link rel="stylesheet" href="样式表路径">

这种方式是最常用且稳定的。​​<link>​​ 标签在页面加载时会同时加载 CSS 文件。

使用 ​​@import​​ 语法：

<style>
@import url("样式表路径");
</style>

​​@import​​ 语法允许在 ​​<style>​​ 标签中导入外部样式表。

​​<link>​​ 和 ​​@import​​ 之间的区别：

本质差别：

  • ​​<link>​​ 是 HTML 标签的一部分，用于引入外部 CSS 文件。
  • ​​@import​​ 是 CSS 语法的一部分，用于在 CSS 文件中引入其他 CSS 文件。

加载顺序：

  • ​​<link>​​ 引用的 CSS 文件会在页面加载时立即加载。
  • ​​@import​​ 引用的 CSS 文件会在页面完全加载后才开始加载，这可能导致样式延迟应用或出现闪烁现象，尤其在网络较慢时更为明显。

兼容性：

  • ​​@import​​ 是 CSS2.1 规范中引入的，早期的浏览器（特别是 IE5 之前的版本）可能不支持。
  • ​​<link>​​ 标签被广泛支持，不受浏览器版本的限制。

DOM 操作：

  • 当使用 JavaScript 操控 DOM 来动态改变样式时，通常只能通过 ​​<link>​​ 标签实现，因为 ​​@import​​​ 无法通过 DOM 操作直接控制。

​如有表述错误及欠缺之处敬请批评指正。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2036682.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

matlab 音频音量处理（音量大小按照dB调节）

matlab 音频音量处理（音量大小按照dB调节）

1 音量（声压级）以分贝（dB）表示的计算公式为： 2 % 已知的 x 值 x = 0:-1:-127; % 在这里填入 x 的具体值% 计算 y %y = 10
阅读更多...
浅谈php://filter的妙用

浅谈php://filter的妙用

文章目录 分析源码巧用编码与解码利用字符串操作方法 分析源码 <?php $content <?php exit; ?>; $content . $_POST[txt]; file_put_contents($_POST[filename], $content);首先&#xff0c;先分析一下这段代码。 首先他定义了content为’<?php exit;?>‘…
阅读更多...
计算机网络17——IM聊天系统——客户端核心处理类框架搭建

计算机网络17——IM聊天系统——客户端核心处理类框架搭建

目的 拆开客户端和服务端&#xff0c;使用Qt实现客户端&#xff0c;VS实现服务端 Qt创建项目 Qt文件类型 .pro文件&#xff1a;配置文件&#xff0c;决定了哪些文件参与编译&#xff0c;怎样参与编译 .h .cpp .ui&#xff1a;画图文件 Qt编码方式 Qt使用utf-8作为编码方…
阅读更多...
服务器被ddos攻击多久能恢复？具体怎么操作

服务器被ddos攻击多久能恢复？具体怎么操作

服务器被ddos攻击多久能恢复&#xff1f;如果防御措施得当&#xff0c;可能几分钟至几小时内就能缓解&#xff1b;若未采取预防措施或攻击特别猛烈&#xff0c;则可能需要几小时甚至几天才能完全恢复。服务器被DDoS攻击的恢复时间取决于攻击的规模和强度、服务器的配置和性能以…
阅读更多...
【C++】类与对象（中）_7.const成员函数

【C++】类与对象（中）_7.const成员函数

7.const成员 7.1 const修饰类的成员函数 将const修饰的类成员函数称之为const成员函数&#xff0c;const修饰类成员函数&#xff0c;实际修饰该成员函数隐含的this指针&#xff0c;表明在该成员函数中不能对类的任何成员进行修改。 我们来看看下面的代码 #define _CRT_SECU…
阅读更多...
【ARM CoreLink 系列 5.1 -- CI-700 各种 Node 组件详细介绍】

【ARM CoreLink 系列 5.1 -- CI-700 各种 Node 组件详细介绍】

请阅读【ARM CoreLink 文章专栏导读】 文章目录 CI-700 组件(Components)RN-I( I/O-coherent Request Node) 和 RN-D(I/O coherent Request Node with DVM)HN-F（Fully coherent Home Node）IO coherent Home Node (HN-I)IO coherent Home Node with Debug Trace Controller (H…
阅读更多...
JSON与Jsoncpp库：数据交换的灵活选择

JSON与Jsoncpp库：数据交换的灵活选择

目录 引言 一.JSON简介 二. Jsoncpp库概述 三. Jsoncpp核心类介绍 3.1 Json::Value类 3.2 序列化与反序列化类 四. 实现序列化 五. 实现反序列化 结语 引言 在现代软件开发中&#xff0c;数据交换格式扮演着至关重要的角色。JSON&#xff08;JavaScript Object Notati…
阅读更多...
鸿蒙（API 12 Beta3版）【媒体会话提供方】本地媒体会话

鸿蒙（API 12 Beta3版）【媒体会话提供方】本地媒体会话

音视频应用在实现音视频功能的同时&#xff0c;需要作为媒体会话提供方接入媒体会话&#xff0c;在媒体会话控制方&#xff08;例如播控中心&#xff09;中展示媒体相关信息&#xff0c;及响应媒体会话控制方下发的播控命令。 基本概念 媒体会话元数据&#xff08;AVMetadata…
阅读更多...
WordPress原创插件：Download-block-plugin下载按钮图标美化

WordPress原创插件：Download-block-plugin下载按钮图标美化

WordPress原创插件&#xff1a;Download-block-plugin下载按钮图标美化 https://download.csdn.net/download/huayula/89632743
阅读更多...
Mapreduce_csv_averageCSV文件计算平均值

Mapreduce_csv_averageCSV文件计算平均值

csv文件求某个平均数据 查询每个部门的平均工资&#xff0c;最后输出 数据处理过程 employee_noheader.csv&#xff08;没做关于首行的处理&#xff0c;运行时请自行删除&#xff09; EmployeeID,EmployeeName,DepartmentID,Salary 1,ZhangSan,101,5000 2,LiSi,102,6000…
阅读更多...
疫情下图书馆管理系统

疫情下图书馆管理系统

TOC springboot126疫情下图书馆管理系统 系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管…
阅读更多...
mock.js的简单使用~

mock.js的简单使用~

1、什么是mock? mock.js:是一款模拟数据生成器&#xff0c;可以生成随机数据&#xff0c;拦截 Ajax 请求. 2、mock的作用。 可以通过mock来模拟后端接口&#xff0c;可随机生成所需数据&#xff0c;模拟对数据的增删改查。并且截Ajax请求不需要修改既有代码就可以拦截&…
阅读更多...
RCE-eval长度限制突破技巧

RCE-eval长度限制突破技巧

目录 一、长度17的限制绕过 1、最简单的绕过 &#xff08;一&#xff09;绕过 &#xff08;二&#xff09;编写一句话木马 2、文件包含的利用 &#xff08;一&#xff09;远程文件包含的利用 &#xff08;二&#xff09;本地文件包含的利用 3、usort绕过 &#xff08…
阅读更多...
BGP路由优选（五）

BGP路由优选（五）

当到达同一个目的网段存在多条路由时&#xff0c;BGP通过如下的次序进行路由优选&#xff1a; 丢弃下一跳不可达的路由。 优选Preferred-Value属性值最大的路由。优选Local_Preference属性值最大的路由。本地始发的BGP路由优于从其他对等体学习到的路由&#xff0c;本地始发的路…
阅读更多...
使用腾讯云存储桶COS来实现上传和下载图片功能

使用腾讯云存储桶COS来实现上传和下载图片功能

有个需求&#xff0c;需要上传和下载图片&#xff0c;我决定使用腾讯云存储桶来做服务器存储目录&#xff0c;供程序上传和下载使用。 1、首先打开对应网站&#xff1a;云产品免费体验馆_云产品免费试用_个人云产品试用-腾讯云&#xff0c;点击左边的"存储"项&#x…
阅读更多...
proxy负载均衡

proxy负载均衡

endpoint &#xff1a; 终点、终端 看service服务器的ip kubectl get ep backend -> real server &#xff1a;真正提供web服务的服务器 负载均衡器 load balancer --》LB USER -->LB --->BACKEND(real server) nginx SERVICE --->很多的endpoint--》po…
阅读更多...
报名表EXCEL图片批量下载源码-CyberWinApp-SAAS 本地化及未来之窗行业应用跨平台架构

报名表EXCEL图片批量下载源码-CyberWinApp-SAAS 本地化及未来之窗行业应用跨平台架构

每次报名表都会包含大量照片&#xff0c;一张一张下载很慢 可以通过未来之窗开源平台架构 开开excel批量下载 实现代码也很简单 function 未来之窗下载(){ let 未来之窗地址 document.getElementById("batchurl").value; let 保存路径 document.getElementById(…
阅读更多...
GD32 MCU如何使用双ADC内核提高ADC采样率？

GD32 MCU如何使用双ADC内核提高ADC采样率？

如下图所示&#xff0c;GD32F303系列MCU在不同的ADC位宽情况下均具有对应的最高采样率&#xff0c;那这个最高采样率还可以提高吗&#xff1f; 答案是可以的。GD32F30X系列MCU可以支持双ADC内核&#xff0c;分别为ADC0和ADC1&#xff0c;且双ADC可以支持同步模式&#xff0c;同…
阅读更多...
力扣热题100_链表_206_反转链表

力扣热题100_链表_206_反转链表

文章目录 题目链接解题思路解题代码 题目链接 206. 反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 示例 2&#xff1a; 输入&#xf…
阅读更多...
Leetcode面试经典150题-146.LRU缓存

Leetcode面试经典150题-146.LRU缓存

解法都在代码里&#xff0c;不懂就留言或者私信&#xff0c;这个题大概率不会让你直接写代码&#xff0c;而是说以下思路&#xff0c;如果写代码这个题写出来基本就过了 class LRUCache {/**首先我们得有缓存&#xff0c;get和put都是O(1)时间复杂度&#xff0c;我们常用的数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023