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

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

news 2026/2/10 14:12:37

文章目录

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

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2026/1/26 10:00:16

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2026/2/1 6:30:04

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2026/2/6 1:00:00

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24