CSS样式表与HTML结合的方法
从此王子和公主幸福的生活在了一起:)
层叠样式表(英文全称：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结合的方法的更多相关文章
- 漂亮的表格样式(使用CSS样式表控制表格样式)
根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...
- 在网页中插入CSS样式表的几种方法
1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- DOM与CSS样式表
在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...
- CSS样式表优先级
使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- JavaScript对css样式表操作
CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...
- CSS样式表初始化代码
CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...
- CSS样式表的写作规范
推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...
随机推荐
- 【Data Structure】-NO.117.DS.1 -【Tree-23树】
[Data Structure]-NO.117.DS.1 -[Tree-23树] Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total ...
- Java读取resource文件/路径的几种方式
方式一: String fileName = this.getClass().getClassLoader().getResource("文件名").getPath();//获取文 ...
- React 添加对 Less 的支持, 使用 create-react-app 脚手架
---恢复内容开始--- 参考博客与我自己的当前版本有一点出入, 所以就将 参考博客写到文章后面去了. 我的电脑: 系统: Ubuntu16.04, 1, 安装脚手架: create-react-a ...
- 实验：Oracle单节点RAC添加节点
环境:RHEL 6.5 + Oracle 11.2.0.4 单节点RAC 需求:单节点RAC添加新节点 1.添加节点前的准备工作 2.正式添加节点 3.其他配置工作 1.添加节点前的准备工作 参考Or ...
- windows程序设计 加载位图图片
现在网上随便下个jpg图片,用windows自带的画图工具打开,点击画图工具左上角,文件->另存为->选择bmp,点击保存,保存好后,就得到一张位图了. 得到的位图,位图的内存比原图片jp ...
- Oracle expdp impdp中 exclude/include 的使用
exclude和include参数能够在使用expdp或impdp是对特定的对象或对象类型进行筛选或过滤.比如因工作的需要导出特定的表或不导出特定的表.视图以及存储过程.索引.约束.授权统计信息等等. ...
- python 第四阶段 学习记录之----异步
异步: 知识情况: 1.多线程, 多线程使用场景 1.IO操作不占CPU,读写数据(网络中.系统中) 2.计算占CPU, 3.上下文切换不占CPU.它消耗资源 python多线程 不适合CPU密集型的 ...
- Python 两个星号（**）的 参数
将参数以字典的形式导入
- 2015全国大学生数学建模B题浅谈
题目请自主上网获取. 分析下思路.第一问,不同时空的出租车的“供求匹配”程度. 也就是说要选取的数据要有时间和地理两个维度.实体对象是出租车.关键的问题就是地点怎么选? 选择的城市具备如下经济较发达, ...
- K8S学习笔记之kubernetes 日志架构
0x00 概述 应用程序和系统日志可以帮助我们了解集群内部的运行情况,日志对于我们调试问题和监视集群情况也是非常有用的.而且大部分的应用都会有日志记录,对于传统的应用大部分都会写入到本地的日志文件之中 ...