【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
文章目录
- 一、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="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>
③ 执行结果
执行结果 : 表格的标题 , 用户注册信息 , 就是添加了 CSS 样式后的效果 , 使用的是 内联样式 引入的 ;
【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )相关推荐
- html之CSS设计(四种引入方式、各种选择器)
文章目录 一.CSS简介 二.四种引入方式 三.CSS选择器 四.练习代码 本文主要介绍一下CSS的基本操作,四中引入方式和选择器.属性选择器的使用 一.CSS简介 1.介绍: 也叫层叠样式表,用来控 ...
- css就近原则_CSS的引入方式和优先级
1.CSS的引入方式 CSS一共有四种引入方式,内联样式.内部样式表.外部样式表和@import引入. 1.1 内联样式 使用style属性引入样式. 123 缺点:HTML页面不纯净,文件体积大,不 ...
- CSS day1 |选择器字体文本引入方式
目录 1 css简介 1.1 html局限性 1.2 CSS-网页的美容师 1.3 css语法规范 1.4 css代码风格 2 CSS选择器 2.1 css选择器的作用 2.2 标签选择器 2.3 类 ...
- 【HTML/CSS】CSS权重、继承及引入方式
1 CSS权重 1.1 权重规则 CSS匹配的选择器中每一种选择器类型的数组决定了选择器的权重,CSS的优先级规则: 权重高的样式会被应用到元素上. 如果权重相同则使用最后声明的样式. 属性后加上!i ...
- CSS文件的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例: <h1 style="color:red;">s ...
- JavaScript简介及其引入方式
#博学谷IT学习技术支持# 目录 #博学谷IT学习技术支持# 1.JavaScript简介 2.JavaScript 引入方式 1内部脚本:将 JS代码定义在HTML页面中 2. 外部脚本:将 JS代 ...
- css层叠引入方式有,前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...
- css层叠样式表基础学习笔记--第一章 css简介及引入
第一章 css简介及引入 1-01 css简介 1-02 css优缺点 1-03 css书写格式 1-04 css引入格式 行内样式 内部样式 外部样式 导入样式 1-05 css注释 1-01 cs ...
- CSS(简介、基础选择器、字体属性、文本属性、引入方式)
文章目录 1.CSS简介 1.1HTML的局限性 1.2CSS-网页美容师 1.3CSS语法规范 2.CSS基础选择器 2.1选择器的作用 2.2选择器的分类 2.3标签选择器 2.4类选择器 2.5 ...
最新文章
- 特征工程学习,19项实践Tips!代码已开源!
- opencv ocr字符识别_OCR深度实践系列:图像预处理
- boseqc35能不能连电脑_连win7都用不了?轻量级LXLE系统,只要10分钟,旧电脑也能运行如飞!...
- WinForm下的键盘事件(KeyPress、KeyDown)及如何处理不响应键盘事件
- 【GoLang】GoLang 错误处理 -- 异常处理思路示例
- 取消对 null 指针“l”的引用。_C语言编程笔记丨C 语言指针 5 分钟教程
- chrome 69 免安装_ElasticSearch安装elasticsearch-head插件
- 宿主机为linux、windows分别实现VMware三种方式上网(转)
- java private是什么_java private 干什么用
- 小米笔记本12.5java_小米12.5笔记本系统
- plsql使用方法(主要是sql语句)
- Java —— 学生成绩分析程序Demo(附源代码)
- 我的个人网站:红色石头的机器学习之路
- Len()、Lenw()与Lenb()函数间的区别
- lcd1602引脚功能
- 任意多边形的面积公式
- Cocos2d-x面试题看一下
- PIXHAWK2.4.8飞控如果做双罗盘校准
- word忘记密码处理
- react项目中在线预览附件