CSS的继承和使用方式
CSS的继承
css的继承指的是当标签具有嵌套关系时，内部标签自动拥有外部标签的不冲突的样式的性质。
在Css中有些属性不允许继承，例如，border属性没有继承性。多边框类的属性都没有继承 ，例如，padding 、 margin 、 background等。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="GB2312">
<title>css使用实例</title>
<style type="text/css" >
div{
color: red;
font-size: 10pt;
font-weight: bold;
font-family: 黑体;
border: 1px solid #000;
}
p{
color: blue;
font-size: 12pt;
font-style: italic;
}
em{
color: green;
}
</style>
</head>
<body>
<p>这是蓝色，12pt，斜体，默认宋体</p>
<div>
<p>这是蓝色，12pt，斜体加粗，黑体</p>
</div>
<br>
<div>这是红色，10pt，加粗，黑体，有边框</div><br>
<div>
这是红色，10pt，黑体<br>
<em>我是em元素的文字，绿色文字周边无边框</em>
</div> </body>
</html>
CSS的使用方式
在html页面中使用CSS主要有3种方法：内嵌方式，内部样式表，使用<link>标签链接外部样式表。
1.内嵌方式（是将CSS代码写在HTML的标签里。）
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内嵌方式</title>
</head>
<body>
<p align="center" style="color: red;">内嵌方式</p>
</body>
</html>
2.内部样式表
与行间样式表类似，都是将CSS代码写在HTML文档中； 不同的是内部样式表不是写在标签中，而且有一定的格式。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表示例</title>
<style type="text/css">
div{
width: 100px;
height: 40px;
color: yellow;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div>内部样式表</div>
</body>
</html>
3.使用<link>标签链接外部样式表
与内部样式表的相同之处在于都有一定的格式； 不同的是他的CSS代码是写在HTML文档外的.css文件中，而且使用时需要引用。
实例：
html1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>外部样式表示例</title>
<link rel="stylesheet" href="css/css1.css" />
</head>
<body>
<div>外部样式表</div>
</body>
</html>
CSS1.css
div {
width: 100px;
height: 40px;
color: yellow;
background-color: red;
text-align: center;
}
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢
CSS的继承和使用方式的更多相关文章
- CSS3学习笔记-1：CSS样式继承
自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...
- 1.写页面 2.css的继承属性有哪些 3.margin对布局的影响
1. sparent 透明的 2. placeholder 提示语 写页面 1.搞清结构层次 2. 保证模块化 让它们之间不能收到影响. (1) 元素性质 (2)标准流 浮动带来的脱离文档流撑不起父级 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 问答：怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式？
好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- css 百分比继承关系的探讨
引入:近日在回顾css基础的时候发现了一个有趣的问题,就是css在继承百分比类属性的时候是继承百分比后再根据父级宽高计算,还是继承父级根据百分比计算过后的绝对值.下面举一个简单的例子来描述这一个问题, ...
- CSS选择器与CSS的继承,层叠和特殊性
什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...
- CSS系列：CSS的继承与层叠特性
1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...
- CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...
随机推荐
- Boostnote 为程序员的开源式记事本
以前使用win10的时候,有个edairy可以使用,并且效果非常好,现在ubuntu上使用的时候,才找个这样的程序员实在太难了,找了好久,才找到一个使用比较顺手的,这里就做个备忘了,顺便做个推荐,实在 ...
- pickle模块及其API
模块:pickle 所包含API列表: pickle.dumps : 把任意对象序列化成一个bytes pickle.dump : 直接把对象序列化后写入一个file-like Object pick ...
- Python编程Day3—基本运算符、数据类型
一.基本运算符 1.算数运算 print(10/3) print(10//3) print(10%3) print(10**3) 2.比较运算 print(10==10) print(10!=10) ...
- 【翻译】JavaScript内存泄露
原文地址:http://javascript.info/tutorial/memory-leaks#tools 我们在进行JavaScript开发时,很少会考虑内存的管理.JavaScript中变量的 ...
- C#版 - 剑指offer 面试题9：斐波那契数列及其变形(跳台阶、矩形覆盖) 题解
面试题9:斐波那契数列及其变形(跳台阶.矩形覆盖) 提交网址: http://www.nowcoder.com/practice/c6c7742f5ba7442aada113136ddea0c3?tp ...
- [NewLife.XCode]数据模型文件
NewLife.XCode是一个有10多年历史的开源数据中间件,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和运行日志来进行深入分析,蕴含 ...
- PHP中的加强型接口Traits
接口是对多重继承的一种变相实现, Traits可以被视为一种加强型的接口. 先来看如下代码 trait Hello { private $name = 'chenqionghe'; public ...
- 使用3D Slicer对图像进行配准
在进行深度学习之前,我们需要图像进行一些预处理操作,其中配准是很重要的一环,以下将介绍使用软件3D Slicer来进行图像配准 3D Slicer是(1)一个软件平台,用以图像分析(包括配准和实时编辑 ...
- [PKUWC2018] Slay the spire
Description 现在有 \(n\) 张强化牌和 \(n\) 张攻击牌: 攻击牌:打出后对对方造成等于牌上的数字的伤害. 强化牌:打出后,假设该强化牌上的数字为 \(x\),则其他剩下的攻击牌的 ...
- SQLite占用资源少原因
本篇承接上篇SQLite详解的下篇,介绍SQLIte为什么占用资源少的原因?本文主要参考https://blog.csdn.net/hanyingzhong/article/details/46400 ...