CSS-使用CSS样式的方式
1.HTML<!DOCTYPE>声明标签
（1）定义和用法
- <!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。
- <!DOCTYPE>声明不是HTML标签；它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。
- 在HTNL4.01中，<!DOCTYPE>声明引用DTD，因为HTML4.01基于SGML。
- DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。
- HTML5不基于SGML，所以不需要引用DTD。
（2）各版本的声明
HTML5
<!DOCTYPE html>
<meta charset="UTF-8">
HTML4.01
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素（比如font）。不允许框架集（framesets）。
注意的规则：
1.单标记必须闭合，比如<br>,<input>必须写为<br/>，<input/>
2.单属性必须添加属性值，<input type="radio" checked>必须写为<input type="radio" checked="checked">
3.标记和属性必须使用小写，<Body><BODY>是错的必须写为<body>
4.属性的属性值必须使用" "，在HTML4.01之前可以使用<body bgcolor=red>必须写为<body bgcolor="red">
2.内链样式表
<body style="background-color:green;margin:0;padding:0">
</body>
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内链样式表</title>
</head>
<body style="background-color: green">
<h1 style="color:white">CSS的使用方式</h1>
<p style="color:blue;font-size:60px">CSS的使用方式</p>
</body>
</html>
效果展示：
3.嵌入式样式表
需要将样式放在<head></head>中
<style type="text/css">
</style>
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内链样式表</title>
<style type="text/css">
body{
background-color: green;
color:red;
}
p{
background-color: red;
color:blue;
}
</style>
</head>
<body>
<h1>CSS的使用方式</h1>
<p>CSS的使用方式</p>
</body>
</html>
效果展示：
4.引入式样式表
<link rel="stylesheet" type="text/css" href="style..css">
代码示例：
demo.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内链样式表</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS的使用方式</h1>
<p>CSS的使用方式</p>
</body>
</html>
style.css:
body{
background-color: red;
}
p{
background-color: green;
}
效果展示：
CSS-使用CSS样式的方式的更多相关文章
- CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
- css样式引入方式，及常用设置标签样式
一. 三种样式引入方式 1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- css的三种使用方式:行内样式,内嵌样式,外部引用样式
三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.
最近在做Lodop打印功能: 思路是: 用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是: 在打印的JS文件中, 引 ...
- #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...
- CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...
- CSS 层叠及样式表来源
Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
随机推荐
- xmake v2.3.1 发布, 无缝对接其他构建系统
最近对xmake内部做了不少的重构来改进,并且新增了不少实用的新特性,欢迎来体验. 项目源码 官方文档 一些新特性: 一键编译其他构建系统维护的项目,实现无缝对接,并且支持交叉编译(比如autotoo ...
- .NET面试题整理（持续更新）
1.已知值类型保存在线程栈中,引用类型保存在堆中 struct Point{ public int x,y; } public sealed class program{ public static ...
- 使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解（新手必学）
为大家介绍下Python爬虫库BeautifulSoup遍历文档树并对标签进行操作的详细方法与函数下面就是使用Python爬虫库BeautifulSoup对文档树进行遍历并对标签进行操作的实例,都是最 ...
- Android布局管理器-使用FrameLayout帧布局管理器显示层叠的正方形以及前景照片
场景 Android布局管理器-使用LinearLayout实现简单的登录窗口布局: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details ...
- kernel定制，编译内核
定制kernel,就需要手动编译内核 一,准备开发环境 1,包组:Development Tools,Server Platform Development 2,包:ncurses和ncurses-d ...
- mybatis实体为什么要提供一个无参的构造函数
提问:Mybatis查询结果映射到实体类的时候,实体类为什么必须有一个空的构造函数? 类中如果没有构造函数,隐藏是无参构造函数,方便实体类需要通过Mybatis进行动态反射生成.如果实体类中一旦声明构 ...
- sqlserver 批量修改数据库表主键名称为PK_表名
1.我们在创建sqlserver得数据表的主键的时候,有时会出现,后面加一串随机字符串的情况,如图所示: 2.如果你有强迫症的话,可以使用以下sql脚本进行修改,将主键的名称修改为PK_表名. --将 ...
- 解决BitLocker反复提示恢复密钥正确而无法进入系统的问题
前一阵电脑因为装了grub,引导策略被改了.开Windows要求输入恢复密钥以进行恢复.我登陆过Microsoft账户所以在官网上找到了密钥并恢复了驱动器.但是进去提示"恢复密钥正确&quo ...
- BUGFIX 09 - 记一次Java中String的split正则表达式匹配 - 引发`OutOfMemoryError: Java heap space`的oom异常 排查及解决 -Java根据指定分隔符分割字符串,忽略在引号里面的分隔符
问题简述 说白了,Java根据指定分隔符分割字符串,忽略在引号(单引号和双引号)里面的分隔符; oom压测的时候,正则匹配"(?=(?:[^\"]*\"[^\" ...
- 解决jQuery中input 失去焦点之后，不能再获取到焦点
//编辑过敏史 if(iToolbar == 'editGMS'){ lstype="gms"; var gms=""; if(gmstype=="0 ...