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

【CSS】CSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )

news 2026/5/21 15:15:37

文章目录

  • 一、CSS 引入方式 - 内嵌样式
    • 1、内嵌样式语法
    • 2、内嵌样式示例
    • 3、内嵌样式完整代码示例
    • 4、内嵌样式运行效果





一、CSS 引入方式 - 内嵌样式



1、内嵌样式语法


CSS 内嵌样式 , 一般将 CSS 样式写在 HTML 的 head 标签中 ;

CSS 内嵌样式 语法如下 :

<head><style type="text/css">标签选择器 { 属性名称1: 属性值1;属性名称2: 属性值2; 属性名称3: 属性值3;}</style>
</head>

选择器 需要注明 该样式是 为哪些标签 定义的 , 可以直接写标签类型 ;


2、内嵌样式示例


内嵌样式 示例 :

  • 将页面所有的 h3 标签 的内容设置为 蓝色 , 字体 20 像素 ;
<style type="text/css">h3 { color: blue;font-size:20px; }
</style>
  • 将页面所有的 td 标签 的内容设置为 绿色 , 字体 15 像素 ;
<style type="text/css">td { color: green;font-size:15px; }
</style>
  • 将页面所有的 option 标签 的内容设置为 紫色 , 字体 15 像素 ;
<style type="text/css">option { color: purple;font-size:15px; }
</style>

3、内嵌样式完整代码示例


代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>用户注册</title><base target="_blank"/><style type="text/css">h3 { color: blue;font-size:20px; }td { color: green;font-size:15px; }option { color: purple;font-size:15px; }</style></head><body><!-- 设置表格宽度 600 像素, 表格居中 --><table width="600" align="center" border="1"><!-- 设置表格标题 --><caption><h3>用户注册信息</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>

4、内嵌样式运行效果


下面是代码的运行效果 :

  • 用户注册信息 是 h3 标签内容 , 被设置成 蓝色字体 , 20 像素大小 ;

  • 普通表格 单元格 td 标签中的文本 , 都被设置成了 绿色字体 , 15 像素大小 ;

  • option 下拉列表选项标签 中的文本 , 都被设置成了紫色 , 15 像素大小 ;

在这里插入图片描述

相关文章：

【CSS】CSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )

文章目录一、CSS 引入方式 - 内嵌样式1、内嵌样式语法2、内嵌样式示例3、内嵌样式完整代码示例4、内嵌样式运行效果一、CSS 引入方式 - 内嵌样式 1、内嵌样式语法 CSS 内嵌样式 , 一般将 CSS 样式写在 HTML 的 head 标签中 ; CSS 内嵌样式 语法如下 : <head><style …...

编程日记 2023/2/25 23:32:55

MySQL事务与索引

MySQL事务与索引 一、事务 1、事务简介 在 MySQL 中只有使用了 Innodb 数据库引擎的数据库或表才支持事务。事务处理可以用来维护数据库的完整性&#xff0c;保证成批的 SQL 语句要么全部执行&#xff0c;要么全部不执行。事务用来管理 insert,update,delete 语句 事务特性…...

编程日记 2023/2/25 23:31:49

【编程入门】应用市场（php版）

背景 前面已输出多个系列&#xff1a; 《十余种编程语言做个计算器》 《十余种编程语言写2048小游戏》 《17种编程语言10种排序算法》 《十余种编程语言写博客系统》 《十余种编程语言写云笔记》 《N种编程语言做个记事本》 目标 为编程初学者打造入门学习项目&#xff0c;使…...

编程日记 2023/2/25 23:30:37

文化：你所在的团队，有多少人敢讲真话？

你好&#xff0c;我是叶芊。 今天我们要讨论的话题是文化&#xff0c;说“文化”这个词你可能会觉得很虚&#xff0c;那我们换个词——“做事风格”&#xff0c;这就和你们团队平时的协作习惯密切相关了。 做事风格&#xff0c;往小了讲&#xff0c;会影响团队成员对开会的认知…...

编程日记 2023/2/25 23:29:29

Linux | 项目自动化构建工具 - make/Makefile

make / Makefile一、前言二、make/Makefile背景介绍1、Makefile是干什么的&#xff1f;2、make又是什么&#xff1f;三、demo实现【见见猪跑&#x1f416;】三、依赖关系与依赖方法1、概念理清2、感性理解【父与子】3、深层理解【程序的翻译环境 栈的原理】四、多学一招&#…...

编程日记 2023/2/25 23:28:20

Spring源码该如何阅读？十年架构师带来的Spring源码解析千万不要错过！

写在前面最近学习了一句话&#xff0c;感觉自己的世界瞬间明朗&#xff0c;不再那么紧张焦虑恐慌&#xff0c;同样推荐给大家&#xff0c;希望我们都终有所得。“如果一个人不是发自内心地想要做一件事情&#xff0c;那么&#xff0c;他是无法改变自己的人生的。” 同样这句话用…...

编程日记 2023/2/25 23:27:12

sonarqube 外部扫描器 go vet golangci-lint 无法导入问题

首先&#xff0c;请看[外部分析报告]各种语言的报告生成 go vet 2> govet-report.out#没有golangci-lint&#xff0c;我从网上找到了 golangci-lint run --out-format checkstyle ./... > golangci-lint-report.xml值得注意的是&#xff0c;貌似不支持目录&#xff0c;仅…...

编程日记 2023/2/25 23:26:07

Tesseract-OCR 控制台怎么使用

Tesseract-OCR 控制台是一个命令行工具&#xff0c;可以在 Windows、Linux、macOS 等操作系统中使用。下面是使用 Tesseract-OCR 控制台进行文字识别的基本步骤&#xff1a;安装 Tesseract-OCR&#xff1a;可以到 Tesseract-OCR 的官方网站&#xff08;https://github.com/tess…...

编程日记 2023/2/25 23:25:00

九龙证券|美股创年内最大周跌幅！美联储官员密集发声！波音重挫近5%

当地时刻2月24日&#xff0c;美股三大指数收盘明显跌落。道指跌1.02%&#xff0c;标普500指数跌1.05%&#xff0c;纳指跌1.69%。 大型科技股普跌&#xff0c;微软、亚马逊跌超2%。波音大跌4.8%&#xff0c;居道指跌幅榜首位&#xff0c;公司因机身部件有问题再次暂停向用户交付…...

编程日记 2023/2/25 23:23:50

C++014-C++字符串

文章目录C014-C字符串字符串目标char[]和stringchar[]char*string字符常量与字符串常量字符串的输入题目描述 字符串输出题目描述在线练习&#xff1a;总结C014-C字符串 在线练习&#xff1a; http://noi.openjudge.cn/ https://www.luogu.com.cn/ 字符串 目标 1、了解字符串…...

编程日记 2023/2/25 23:22:39

Android 架构 MVC MVP MVVM，这一波你应该了然于心

MVC&#xff0c;MVP和MVVM是软件比较常用的三种软件架构&#xff0c;这三种架构的目的都是分离&#xff0c;避免将过多的逻辑全部堆积在一个类中。在Android中&#xff0c;Activity中既有UI的相关处理逻辑&#xff0c;又有数据获取逻辑&#xff0c;从而导致Activity逻辑复杂不单…...

编程日记 2023/2/25 23:21:30

物联网在医疗保健领域的5大创新应用

如今&#xff0c;物联网的发展越来越迅速&#xff0c;我们无法低估物联网在当今世界的重要性。大多数人每天都会使用到物联网设备。例如&#xff0c;当你使用智能手表来跟踪你的锻炼时&#xff0c;你就间接地使用了物联网的功能。由于物联网为世界带来了很多有效的帮助&#xf…...

编程日记 2023/2/25 23:20:25

【一天一门编程语言】Haskell 语言程序设计极简教程

Haskell 语言程序设计极简教程 一、什么是 Haskell Haskell 是一种纯函数式编程语言&#xff0c;它把程序设计抽象化到一个更高的层次&#xff0c;简化程序开发工作量&#xff0c;能够更快更容易地完成任务。 它是一种函数式编程语言&#xff0c;它采用函数式编程方法&#…...

编程日记 2023/2/25 23:19:16

getStaticPaths函数 以及 fallback参数

getStaticPaths是Next.js的一个静态生成API&#xff0c;它用于在构建时确定哪些页面需要被预渲染。它需要返回一个包含params属性的对象数组&#xff0c;其中每个对象都代表一个路径参数集合&#xff0c;可以被预渲染为一个静态页面。如果所有参数都已知&#xff0c;它们将被硬…...

编程日记 2023/2/25 23:18:06

msys2+minGW方案编译ffmpeg的最佳实践

一、Win10 64bit编译环境的建立1&#xff09;从http://www.msys2.org/下载 msys2-x86_64-xxx.exe2&#xff09; 安装msys2到默认路径 C:\msys64\3&#xff09; 运行MSYS2 w644&#xff09;执行 pacman -Syu 更新系统当出现提示时&#xff0c;选择y5) 当窗口关闭时&#xff0c;重…...

编程日记 2023/2/25 23:16:58

理解redis的数据结构

redis为什么快&#xff1f; 首先可以想到内存读写数据本来就快&#xff0c;然后IO复用快&#xff0c;单线程没有静态消耗和锁机制快。 还有就是数据结构的设计快。这是因为&#xff0c;键值对是按一定的数据结构来组织的&#xff0c;操作键值对最终就是对数据结构进行增删改查操…...

编程日记 2023/2/25 23:15:43

Lecture6 逻辑斯蒂回归(Logistic Regression)

目录 1 常用数据集 1.1 MNIST数据集 1.2 CIFAR-10数据集 2 课堂内容 2.1 回归任务和分类任务的区别 2.2 为什么使用逻辑斯蒂回归 2.3 什么是逻辑斯蒂回归 2.4 Sigmoid函数和饱和函数的概念 2.5 逻辑斯蒂回归模型 2.6 逻辑斯蒂回归损失函数 2.6.1 二分类损失函数 2.…...

编程日记 2023/2/25 23:14:33

File类及IO流说明

目录 1.File类说明 (1)构造方法创建文件 (2)创建功能 (3)File类的判断和获取功能 (4)文件删除功能 2.I/O流说明 (1).分类 3.字节流写数据 (1)说明 (2)字节流写数据的三种方式 (3)写入时实现换行和追加写入 (4)异常处理中加入finally实现资源的释放 4.字节流读数据 …...

编程日记 2023/2/25 23:13:19

优秀的网络安全工程师应该有哪些能力？

网络安全工程师是一个各行各业都需要的职业&#xff0c;工作内容属性决定了它不会只在某一方面专精&#xff0c;需要掌握网络维护、设计、部署、运维、网络安全等技能。目前稍有经验的薪资在10K-30K之间&#xff0c;全国的网络安全工程师还处于一个供不应求的状态&#xff0c;因…...

编程日记 2023/2/25 23:12:06

[C++11] auto初始值类型推导

背景&#xff1a;旧标准的auto 在旧标准中&#xff0c;auto代表“具有自动存储期的 局部变量” auto int i 0; //具有自动存储期的局部变量 //C98/03&#xff0c;可以默认写成int i0; static int j 0; //静态类型的定义方法实际上&#xff0c;我们很少使用auto&#xff0c…...

编程日记 2023/2/25 23:10:51

Honey Select 2中文汉化补丁终极指南：一键安装完整中文体验

Honey Select 2中文汉化补丁终极指南&#xff1a;一键安装完整中文体验 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 还在为Honey Select 2的日语界面而烦恼吗…...

编程新知 2026/5/21 14:53:28

美国签证预约神器：3步告别熬夜抢号，智能锁定更早面试时间

美国签证预约神器&#xff1a;3步告别熬夜抢号&#xff0c;智能锁定更早面试时间 【免费下载链接】us-visa-bot US Visa Bot 项目地址: https://gitcode.com/gh_mirrors/us/us-visa-bot 还在为美国签证预约的漫长等待而焦虑吗&#xff1f;每天手动刷新页面却总是错过最佳…...

编程新知 2026/5/21 14:02:12

实战避坑：C语言结构体定义时，那个‘名字’到底能不能省？

C语言结构体命名策略&#xff1a;从语法细节到工程实践的深度思考 在嵌入式开发中&#xff0c;我遇到过这样一个场景&#xff1a;团队为了快速实现通信协议解析&#xff0c;大量使用了匿名结构体。初期开发效率确实很高&#xff0c;但三个月后需求变更时&#xff0c;没人能说清…...

编程新知 2026/5/21 13:45:06

yolo11红外光伏板图像识别 光伏板缺陷检测系统

YOLOv11光伏板热缺陷检测系统是一种利用先进的YOLOv11算法进行太阳能光伏板缺陷识别的解决方案。这种系统通常会包含以下几个关键部分&#xff1a; 安装教程 1.安装minconda 2.pycharm 3.安装cuda&#xff08;11.0&#xff09;&#xff08;下载链接&#xff1a;https://develop…...

编程新知 2026/5/21 11:53:47

通过Taotoken用量看板清晰掌握各模型调用成本与消耗趋势

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Taotoken用量看板清晰掌握各模型调用成本与消耗趋势 在将大模型能力集成到实际项目时&#xff0c;除了关注功能实现&#xff0…...

编程新知 2026/5/21 11:09:22

把闲置NAS变成数据中枢：Docker部署MySQL全流程与Python连接实战

把闲置NAS变成数据中枢&#xff1a;Docker部署MySQL全流程与Python连接实战 家里那台吃灰的NAS&#xff0c;除了存电影和备份照片&#xff0c;还能干点更有技术含量的事吗&#xff1f;当然可以&#xff01;今天我们就来彻底激活它的潜力&#xff0c;将它打造成家庭数据处理的&q…...

编程新知 2026/5/21 8:44:03

GaussDB密码安全实战：从默认配置到企业级加固的完整操作指南

GaussDB密码安全实战&#xff1a;从默认配置到企业级加固的完整操作指南 接手一套新的GaussDB生产环境时&#xff0c;密码安全往往是DBA最容易忽视却又最致命的薄弱环节。去年某金融企业数据泄露事件的根源&#xff0c;正是由于沿用默认的MD5加密算法导致数万客户凭证被彩虹表破…...

编程新知 2026/5/21 7:43:44

BEP-20代币全解析：从原理到实战，赋能Web3开发

BEP-20代币全解析&#xff1a;从原理到实战&#xff0c;赋能Web3开发 引言 在百花齐放的区块链世界中&#xff0c;币安智能链&#xff08;BNB Chain&#xff09; 凭借其低廉的手续费与闪电般的交易速度&#xff0c;迅速成为众多开发者和项目方的热土。而这一切繁荣生态的基石…...

编程新知 2026/5/21 7:39:17

基于Fog Project的系统无人值守部署(一)Fog Project安装

安装部署 官网下载安装包进行安装 https://fogproject.org/download.php 安装 以下安装基于Debian 13系统进行部署。 rootdebian:~# ls FOGProject-fogproject-1.5.10.1673-0-g8af159d.tar.gz rootdebian:~# tar -xzvf FOGProject-fogproject-1.5.10.1673-0-g8af159d.tar.…...

编程新知 2026/5/21 6:58:16

AI插件深度对比 | Copilot、Tabnine、Codeium谁是王者

Copilot 的代码补全能力确实厉害&#xff0c;我试过在写 Python 函数的时候&#xff0c;只要输入注释&#xff0c;它就能自动生成函数体。比如写 “# 计算斐波那契数列”&#xff0c;它能直接给出递归和迭代两种实现方式。不过有时候生成的代码有点冗长&#xff0c;需要手动精简…...

编程新知 2026/5/21 5:33:30