当前位置： 首页 > news >正文

【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )

news 2026/2/10 13:06:35

文章目录

  • 一、CSS 层叠样式表
  • 二、CSS 引入方式 - 内联样式
    • 1、内联样式语法
    • 2、内联样式缺点
    • 3、内联样式代码示例
      • ① 核心代码示例
      • ② 完整代码示例
      • ③ 执行结果





一、CSS 层叠样式表


CSS 全称 Cascading Style Sheets , 层叠样式表 ; 作用如下 :

  • 设置 HTML 页面 文本内容 的 字体 , 颜色 , 大小 , 对齐方式 , 背景 , 排版 等样式 ;
  • 设置 HTML 页面 图片内容 的 大小 , 位置 , 边框 , 边距 等样式 ;
  • 设置 HTML 布局版面 的 外观样式 ;
  • 针对不同浏览器 设置 不同样式 ;

在 HTML 中 , 只关注 内容 语义 ,

  • 做出的页面很丑 , 不能满足网页美观展示的需求 ;
  • 逐个修改 HTML 标签的属性 , 操作很繁琐 , 需要为每个标签逐个添加样式 ;
  • 操作 HTML 属性很不方便 ;

CSS 的推出 , 解决了上面的问题 , 使用 CSS 可以让页面更加美观 ,布局更加灵活 ;


HTML 只 专注于 页面结构 , 语义 , 内容 等 结构内容呈现 相关工作 , 美观的样式需要通过 CSS 进行实现 ;


结构样式分离 :

  • HTML 文件中 最好只包含 标签 ,
  • CSS 样式放在 独立的 CSS 文件中 ;




二、CSS 引入方式 - 内联样式



1、内联样式语法


CSS 的 内联样式 引入方式 , 又称为 行内样式 或 行间样式 ;

CSS 的样式 写在 标签内部 ;


CSS 内联样式 语法如下 :

  • 在标签的 style 属性中 , 可以写若干 属性名称:属性值; 组合 ;
  • 每个组合的 属性名称 和 属性值 使用冒号隔开 ;
  • 每个属性组合 使用分号结尾 ;
  • 属性值组合之间 使用空格隔开 ;
<标签 style="属性名称1:属性值1; 属性名称2:属性值2;"> 标签内容 </标签>

所有的 HTML 标签都有 style 属性 , 都可以使用 内联样式 设置 CSS 样式 ;


2、内联样式缺点


内联样式 的缺点 :

  • 只能控制当前 HTML 标签的样式 , 每个标签都要写一遍样式 , 会 造成代码冗余 ;
  • CSS 样式 和 HTML 标签 都在一个文件中 , 没有实现 样式 与 结构分离 ;

3、内联样式代码示例


① 核心代码示例

<h3 style="color:red; font-size:20px;">用户注册信息</h3>

② 完整代码示例

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>用户注册</title><base target="_blank"/></head><body><!-- 设置表格宽度 600 像素, 表格居中 --><table width="600" align="center" border="1"><!-- 设置表格标题 --><caption><h3 style="color:red; font-size:20px;">用户注册信息</h3></caption><!-- 第一行数据 --><tr><!-- 第一行第一列 --><td>性别</td><td><!-- 单选按钮 选择性别 --><input type="radio" name="sex" checked="checked" /><img src="images/man.jpg" /> 男<input type="radio" name="sex" /><img src="images/women.jpg" /> 女</td></tr><!-- 第二行数据 --><tr><!-- 第二行第一列 --><td>籍贯</td><td><!-- 下拉列表 --><!-- 省份选择 --><select><option>--请选择省--</option><option>河北省</option><option>山东省</option><option>河南省</option><option>山西省</option></select><!-- 地区选择 --><select><option>--请选择市--</option><option>衡水市</option><option>邢台市</option><option>保定市</option><option>邯郸市</option></select><!-- 县选择 --><select><option>--请选择县--</option><option>冀州区</option><option>枣强市</option><option>深州市</option><option>桃城区</option></select></td></tr><!-- 第三行数据 --><tr><td>邮箱</td><td><input type="text" value="请输入邮箱"></td></tr><!-- 第四行数据 --><tr><td>关注领域</td><td><input type="checkbox" name="like1"> 移动开发<input type="checkbox" name="like2"> 后端开发<input type="checkbox" name="like3"> 前端开发</td></tr><!-- 第五行数据 --><tr><td>个人简介</td><td><textarea cols="50" rows="5">  </textarea></td></tr><!-- 第六行数据 --><tr><td></td><td><input type="image" src="images/btn.png" /></td></tr><!-- 第七行数据 --><tr><td></td><td><a href="https://www.baidu.com/">已有账号，立即登录</a></td></tr></table></body>
</html>

③ 执行结果

执行结果 : 表格的标题 , 用户注册信息 , 就是添加了 CSS 样式后的效果 , 使用的是 内联样式 引入的 ;

在这里插入图片描述

相关文章：

【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )

文章目录一、CSS 层叠样式表二、CSS 引入方式 - 内联样式1、内联样式语法2、内联样式缺点3、内联样式代码示例① 核心代码示例② 完整代码示例③ 执行结果一、CSS 层叠样式表 CSS 全称 Cascading Style Sheets , 层叠样式表 ; 作用如下 : 设置 HTML 页面 文本内容 的 字体 , 颜…...

编程日记 2023/5/6 2:28:54

12.STM32系统定时器-SysTick

目录 1.系统定时器-SysTick 2.SysTick定时时间的计算 3.SysTick结构体 4.SysTick固件库函数 5.SysTick中断优先级 1.系统定时器-SysTick SysTick:24位系统定时器&#xff0c;只能递减&#xff0c;存在于内核嵌套在NVIC中。所有的Cortex-M中都有这个系统定时器。 重装载值…...

编程日记 2023/5/7 13:39:30

28张图讲解支付系统的通用设计，漂亮！

支付永远是一个公司的核心领域&#xff0c;因为这是一个有交易属性公司的命脉。那么&#xff0c;支付系统到底长什么样&#xff0c;又是怎么运行交互的呢&#xff1f;抛开带有支付牌照的金融公司的支付架构&#xff0c;下述链路和系统组成基本上符合绝大多数支付场景。其实整体…...

编程日记 2023/3/17 21:30:31

【5】linux命令每日分享——touch创建文件

大家好&#xff0c;这里是sdust-vrlab&#xff0c;Linux是一种免费使用和自由传播的类UNIX操作系统&#xff0c;Linux的基本思想有两点&#xff1a;一切都是文件&#xff1b;每个文件都有确定的用途&#xff1b;linux涉及到IT行业的方方面面&#xff0c;在我们日常的学习中&…...

编程日记 2023/5/4 12:05:58

TypeScript快速上手语法+结合vue3用法

TypeScript快速上手语法结合vue3用法 前言&#xff1a; 本篇内容不涉及TypeScript安装以及配置&#xff0c;具体安装及配置篇可以看下面目录&#xff0c;本篇只涉及TypeScript语法相关内容&#xff0c;及结合vue3的用法。不讲废话&#xff0c;简单直接直接开撸。 目录 Type…...

编程日记 2023/5/1 0:15:15

一，下载iPerf3最新源代码

本文目录普通下载方式&#xff1a;git下载方式&#xff1a;普通下载方式&#xff1a; 如果你只是要阅读源代码&#xff0c;不涉及到编译安装修改源代码&#xff0c;那么可以简单的通过此方式下载代码。如果你希望编译安装修改源代码&#xff0c;那么建议通过git来进行源代码的…...

编程日记 2023/5/5 14:05:16

keithley6487/吉时利6487皮安表

产品概览 5-1/2 位 Keithley 6487 皮安表/电压源改进了屡获殊荣的 Keithley 6485 皮安表的测量能力&#xff0c;并增加了高分辨率 500V 电源。它提供更高的精度和更快的上升时间&#xff0c;以及与电容设备一起使用的阻尼功能。这款经济高效的仪器具有八个电流测量范围和高速自…...

编程日记 2023/5/9 15:02:03

sql命令大全

一&#xff1a;基本命令 1.数据库连接 mysql -h 主机名 -u root -p2.添加用户 insert into user (host,user,password,select_priv,insert_priv,update_priv) values (localhost,guest,password(guest123),Y,Y,Y);3.创建用户 create user usernamehost identified by passw…...

编程日记 2023/5/6 10:45:01

Ubuntu 定时执行脚本

一、关于crontab cron是一个Linux定时执行工具&#xff0c;可以在无需人工干预的情况下运行作业。在Ubuntu中&#xff0c;cron是被默认安装并启动的。 二、例子 直接上例子&#xff0c;来看看怎么用。 需求&#xff1a;定时每天8点&#xff0c;自动执行保存在/root目录下he…...

编程日记 2023/4/30 4:03:52

Python带你制作一个属于自己的多功能音乐播放器

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 就是用Python做一个简易的音乐播放器&#xff0c;废话不多说&#xff0c;咱们直接开干 当然&#xff0c;今天做这个肯定不是最简单的&#xff0c;最简单的音乐播放器&#xff0c;9行代码足以 完整源码等直接在文末名片领…...

编程日记 2023/4/24 9:40:24

Redis 被问麻了...

Redis是面试中绕不过的槛&#xff0c;只要在简历中写了用过Redis&#xff0c;肯定逃不过。今天我们就来模拟一下面试官在Redis这个话题上是如何一步一步深入&#xff0c;全面考察候选人对于Redis的掌握情况。 小张&#xff1a; 面试官&#xff0c;你好。我是来参加面试的。 …...

编程日记 2023/5/6 18:57:01

使用JavaScript+Selenium玩转Web应用自动化测试

自动化测试 在软件开发过程中, 测试是功能验收的必要过程, 这个过程往往有测试人员参与, 提前编写测试用例, 然后再手动对测试用例进行测试, 测试用例都通过之后则可以认为该功能通过验收. 但是软件中多个功能之间往往存在关联或依赖关系, 某一个功能的新增或修改可能或影响到…...

编程日记 2023/5/7 17:00:40

[架构之路-119]-《软考-系统架构设计师》-计算机体系结构 -1- 基本原理（体系结构、指令系统与流水线、层次存储）

第9章 计算机体系结构9.1 什么是计算机体系结构计算机系统结构&#xff08;Computer Architecture&#xff09;也称为计算机体系结构&#xff0c;它是由计算机结构外特性&#xff0c;内特性&#xff0c;微外特性组成的。经典的计算机系统结构的定义是指计算机系统多级层次结构中…...

编程日记 2023/5/7 3:33:36

【离线数仓-8-数据仓库开发DWD层-交易域相关事实表】

离线数仓-8-数据仓库开发DWD层-交易域相关事实表离线数仓-8-数据仓库开发DWD层-交易域相关事实表一、DWD层设计要点二、交易域相关事实表1.交易域加购事务事实表1.加购事务事实表 前期梳理2.加购事务事实表 DDL表设计分析3.加购事务事实表 加载数据分析1.首日全量加购的数据加载…...

编程日记 2023/5/10 0:47:04

你知道Java架构师学习路线该怎么走吗?你所缺少的是学习方法以及完整规划！

怎么成为一名Java架构师&#xff1f;都需要掌握哪些技术&#xff1f;Java架构师&#xff0c;首先要是一个高级Java攻城狮&#xff0c;熟练使用各种框架&#xff0c;并知道它们实现的原理。jvm虚拟机原理、调优&#xff0c;懂得jvm能让你写出性能更好的代码;池技术&#xff0c;什…...

编程日记 2023/5/9 15:03:33

华为OD机试用Python实现 -【查找树中的元素 or 查找二叉树节点】(2023-Q1 新题)

华为OD机试题 华为OD机试300题大纲查找树中的元素 or 查找二叉树节点题目描述输入描述输出描述说明示例一输入输出示例二输入输出Python 代码实现代码编写思路华为OD机试300题大纲 参加华为od机试，一定要注意不要完全背诵代码，需要理解之后模仿写出，通过率才会高。 华为 O…...

编程日记 2023/5/7 22:40:11

MyBatis——创建与使用

概念 当我们使用传统的jdbc进行数据库与程序的连接时&#xff0c;每一个操作都需要写一条sql语句&#xff0c;并且没法调试和修改 jdbc连接数据库流程&#xff1a; 创建数据库连接池DataSource获取数据库连接Connection执行带占位符的sql语句通过Connection创建操作对象Stat…...

编程日记 2023/5/10 6:32:01

【涨薪技术】0到1学会性能测试 —— 参数化关联

前言 上一次推文我们分享了性能测试工作原理、事务、检查点&#xff01;今天给大家带来性能测试参数化&#xff0c;检查点知识&#xff01;后续文章都会系统分享干货&#xff0c;带大家从0到1学会性能测试&#xff0c;另外还有教程等同步资料&#xff0c;文末免费获取~ 01、性…...

编程日记 2023/5/4 5:09:26

go进阶(2) -深入理解Channel实现原理

Go的并发模型已经在https://guisu.blog.csdn.net/article/details/129107148 详细说明。 1、channel使用详解 1、channel概述 Go的CSP并发模型&#xff0c;是通过goroutine和channel来实现的。 channel是Go语言中各个并发结构体(goroutine)之前的通信机制。 通俗的讲&#xf…...

编程日记 2023/5/3 7:03:48

数组（二）-- LeetCode[303][304] 区域和检索 - 数组不可变

1 区域和检索 - 数组不可变 1.1 题目描述 题目链接&#xff1a;https://leetcode.cn/problems/range-sum-query-immutable/ 1.2 思路分析 最朴素的想法是存储数组 nums 的值&#xff0c;每次调用 sumRange 时&#xff0c;通过循环的方法计算数组 nums 从下标 iii 到下标 jjj …...

编程日记 2023/5/8 20:37:17

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/2/8 4:37:17

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2026/2/1 19:08:45

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2026/1/28 8:25:28

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2026/1/29 3:25:02

第八部分：阶段项目 6：构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

编程新知 2025/9/21 1:58:01