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

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

news 2026/2/10 13:34:30

文章目录

  • 一、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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/11/19 22:56:53

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02