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样式的方式的更多相关文章

  1. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  2. css样式引入方式，及常用设置标签样式

    一. 三种样式引入方式   1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Micro ...

  3. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  4. css的三种使用方式:行内样式,内嵌样式,外部引用样式

    三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  5. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  6. [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  7. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  8. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  9. CSS 层叠及样式表来源

    Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...

  10. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

随机推荐

  1. 关键两步+6个要点，让Windows应用程序享有K8S的绝佳优势

    本文来自Rancher Labs 前  言 实际上,没有一个迁移路径能够适用于将所有传统应用程序迁移到云.这些应用程序通常在物理机.虚拟机或本地.虽然一般情况下是重新设计应用程序架构以适用云原生服务, ...

  2. Go语言基础之面向对象编程中

    1 Golang面向对象编程基本介绍 Golang仍然有面向对象编程的继承,封装和多态的特性,只是实现的方式和其它OPP语言不一样,随后分别介绍Golang对面向对象编程的三大特性是如何实现的. 2 ...

  3. C# 一个帮您理解回调函数的例子（新手必看）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 回调函数 ...

  4. Dynamics 365 marketing中添加自定义渠道磁贴

    Dynamics 365 marketing中默认的渠道只有Marketing Email和Marketing Activity,想要添加其他渠道必须自定义磁贴,自定义磁贴的步骤如下: 1.创建实体 ...

  5. mysql数据库技术1——基本的增删查改的sql语句

    1.数据库语言的分类 DDL:数据库定义语言 data Definition language 用于创建.修改.和删除数据库内的数据结构,如: 1:创建和删除数据库(CREATE DATABASE | ...

  6. DolphinScheduler1.2.1源码分析

    DolphinScheduler在2020年2月24日发布了新版本1.2.1,从版本号就可以看出,这是一个小版本.主要涉及BUG修复.功能增强.新特性三个方面,我们会根据其发布内容,做简要的源码分析. ...

  7. Apache Solr JMX服务远程代码执行漏洞复现

    0x00 漏洞介绍 该漏洞源于默认配置文件solr.in.sh中的ENABLE_REMOTE_JMX_OPTS配置选项存在安全风险. Apache Solr的8.1.1和8.2.0版本的自带配置文件s ...

  8. 利用Bellman-Ford算法（有向图） 判断负环

    // 根据Bellman-Ford算法的原理 // 判断负环(算法的最大更新次数,应该是顶点数-1次) // 而如果存在负环,算法会一直更新下去 // 我们根据循环进行的次数,来判断负环 #inclu ...

  9. Hystrix压测

    背景介绍 JSF(京东服务框架,类似dubbo)默认配置了可伸缩的最大到200的工作线程池,每一个向外提供的服务都在其中运行(这里我们是服务端),这些服务内部调用外部依赖时(这里我们是客户端)一般是同 ...

  10. MySQL数据库的两种连接方式：TCP/IP和Socket

    Linux平台环境下主要有两种连接方式,一种是TCP/IP连接方式,另一种就是socket连接. 在Windows平台下,有name pipe和share memory(不考虑)两种. TCP/IP连 ...