【CSS】CSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )
文章目录
- 一、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="data:images/man.jpg" /> 男<input type="radio" name="sex" /><img src="data: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="data: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】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
文章目录 一.CSS 层叠样式表 二.CSS 引入方式 - 内联样式 1.内联样式语法 2.内联样式缺点 3.内联样式代码示例 ① 核心代码示例 ② 完整代码示例 ③ 执行结果 一.CSS 层叠样式表 ...
- H5 css引入方式 内联样式表
内联样式表 通过style标签进行设置 <html> <head> <meta charset="utf-8"> <title>引入 ...
- css的三种引入方式 1211
引入方式 行内式 <标签名 style="属性:值;属性名:值"> 引入方式 内嵌式 <style>选择器{属性名:属性值;属性名:属性值;}</st ...
- css引入样式-行内样式、内嵌样式和外链样式
css初识及引入样式 概念:css通常称为css样式表或层叠样式表 作用: - 主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局和外观 ...
- “高级”CSS样式一般应用于控制网页内容的外观。附加样式表分为内嵌样式表和外部样式表两种方式。
"高级"CSS样式一般应用于控制网页内容的外观.附加样式表分为内嵌样式表和外部样式表两种方式.
- CSS的三种引入方式:外部样式、内部样式和行内样式
CSS的三种引入方式:外部样式.内部样式和行内样式 外部样式 链接式:link标签 导入式:@import 链接式与导入式的区别 内部样式 行内样式 样式优先级 外部样式 即CSS代码保存在外部,HT ...
- html5引入外联样式的优先级,CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便. ...
- CSS的基础概念、行内样式(内嵌样式)、内部样式(内联样式)、外部样式(外联样式)、字体相关属性及相关练习的案例
CSS学习笔记 CSS的基本概念 Cascading Style Sheet层叠样式表 标签:<p> <div>-之类的标签 使用方式:直接输入标签名 类(class):cla ...
- CSS基础 外部样式表 内嵌样式表 行内样式表
CSS简述:css是Cascading Style Sheet的缩写,直译过来为层叠样式表或级联样式表,简称样式表.利用css样式表定义页面样式,将会大大减少设计工作量.一些好的css样式表的建立,可 ...
最新文章
- mysql 从零开始_MySQL从零开始:01 数据库简介
- 打开摄像头,2D插画实时变动画,中国程序媛出品,Demo在线可玩
- STM32接口FSMC/FMC难点详解
- Gson简要使用笔记
- win10 64 + VS2010 + Opencv 2.4.9 + HIKVISION(海康)
- 9.1定时器 小时分秒
- api商品分享源码_SSM框架高并发和商品秒杀项目高并发秒杀API源码免费分享
- 从400+节点ElasticSearch集群的运维中,我们总结了这些经验
- [转]技术路线的选择重要但不具有决定性
- 比 CMD 更强大的命令行:WMIC 后渗透利用(系统命令)
- lhdc协议是什么_无线耳机标注的编码是什么意思?看懂了会少很多坑
- hitool java_第三章:使用HiTool下载程序
- 烽火HG680-KA_310_免费升级刷机固件包及教程
- 关键词、词库、关键词词库
- 阿里IOT 应用托管部署 (2020/12/02)
- 如何编写python函数_编写高质量的Python代码系列(二)之函数
- Luminati动态住宅IP使用教程_AdsPower防关联浏览器软件教程(二)
- 《Photoshop修色圣典——PPW专业照片修正流程与技巧》—第1章PPW流程
- 花老湿学习OpenCV:直方图、直方图的计算、均衡化、对比、反向投影
- Android彩信数据库分析