从此王子和公主幸福的生活在了一起:)

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

一、外部样式表(常用)

  通过 <link />标签引入样式表:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外联样式</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<!--在link标记中rel和href属性是必须的,type属性和media属性可省略-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>

注意:1)在link标记中rel和href属性是必须的,type属性和media属性可省略;

     2)样式表中不能包含HTML标记语言,只能有CSS规则和CSS注释,否则导致在该标记后面的CSS样式将无法被识别。

二、内联样式表

  1、通过 <style></style>标签引入样式表:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式</title>
<style>
body{
background-color: blue;
}
</style>
</head>
<body>
</body>
</html>

  2、通过@import指令引入样式表:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>@import</title>
<style>
/*将@import放置在CSS规则前*/
@import url(style.css);
body {
background-color: blue;
}
</style>
</head>
<body>
</body>
</html>

注意:1)将@import url(style.css);写在<style>标签内;

     2)@import放置在CSS规则之后将不起使用。

三、行间样式

  写在某个元素自身的样式,使用HTML的style属性实现。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行间样式</title>
</head>
<body>
<div style="background-color: red; width:100px;height:100px;" style="background-color: yellow;"></div>
</body>
</html>

注意:行间样式若存在多个style属性,只能识别第一个。

CSS样式表与HTML结合的方法的更多相关文章

  1. 漂亮的表格样式(使用CSS样式表控制表格样式)

    根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...

  2. 在网页中插入CSS样式表的几种方法

    1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...

  3. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  4. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  5. CSS样式表优先级

    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...

  6. 美丽的表格样式(使用CSS样式表控制表格样式)

    按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...

  7. JavaScript对css样式表操作

    CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...

  8. CSS样式表初始化代码

    CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...

  9. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

随机推荐

  1. stellar.js 视差滚动

    1.引入包 <script src="js/jquery.min.js"></script> <script src="js/jquery. ...

  2. python框架之Django(16)-接入Redis

    准备 安装Redis 参考 Ubuntu 中 Redis 的安装与使用. 在python中使用Redis 参考 python 中使用 Redis . 安装依赖包 在 Django 中接入 Redis ...

  3. AWK编程

    1.awk的概述 文本处理工具,由于功能的强大,也可以当做是一种数据操作语言,非常适合结构化数据的处理和格式化报表的生成,awk可以进行样式装入.流控制.数学运算符.甚至于内置的变量和函数.它具备了一 ...

  4. PowerBI更新 - 解决方案架构 - PowerBI Solution Architecture(一图胜万字!)

    2019/04更新 参见这里 今天发福利啦!发福利啦!发福利啦! 企业的各种数据整合到PowerBI显示,浏览器,移动端显示关键指标. 一个很好的PowerBI解决方案的图!一图胜万字!你所需要知道的 ...

  5. Deeplab v3+的结构的理解,图像分割最新成果

    Deeplab v3+ 结构的精髓: 1.继续使用ASPP结构, SPP 利用对多种比例(rates)和多种有效感受野的不同分辨率特征处理,来挖掘多尺度的上下文内容信息. 解编码结构逐步重构空间信息来 ...

  6. 59.phpstudy升级Mysql的正确姿势

    phpstudy升级Mysql的正确姿势 phpstudy很糟心,不能选择mysql的版本,所以就强制升级. 下载mysql 首先要到官网上去下载你想要的mysql版本. 下载网址:Mysql官网地址 ...

  7. 《linux就该这么学》第六节,计划任务和用户身份管理!

    课本笔记:          case条件测试语句 4.4:计划任务服务 at 设置一次性计划任务 at  时间    //设置执行的任务                              a ...

  8. java求最大公约数,和最小公倍数

    import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner sc = ...

  9. OpenStack-Neutron-VPNaaS-API

    1 命令 1.1 IKE策略 vpn-ikepolicy-create Create an IKEPolicy vpn-ikepolicy-delete Delete a given IKE Poli ...

  10. PTA第三个编程题总结

    7-1 抓老鼠啊~亏了还是赚了? (20 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块 ...