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的继承和使用方式的更多相关文章

  1. CSS3学习笔记-1：CSS样式继承

    自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...

  2. 1.写页面 2.css的继承属性有哪些 3.margin对布局的影响

    1. sparent 透明的 2. placeholder 提示语 写页面 1.搞清结构层次 2. 保证模块化 让它们之间不能收到影响. (1) 元素性质 (2)标准流 浮动带来的脱离文档流撑不起父级 ...

  3. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  4. 问答：怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式？

    好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...

  5. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  6. css 百分比继承关系的探讨

    引入:近日在回顾css基础的时候发现了一个有趣的问题,就是css在继承百分比类属性的时候是继承百分比后再根据父级宽高计算,还是继承父级根据百分比计算过后的绝对值.下面举一个简单的例子来描述这一个问题, ...

  7. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

  8. CSS系列：CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

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

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

随机推荐

  1. java常见面试题及部分答案

    1.Redis常见的存储数据类型 list(列表类型) set(集合类型) zset(有序集合类型) string(字符串类型) hash(散装类型) 2.log4j的级别 debug:日志的最低级别 ...

  2. 解决 Chrome 下载不了东西 失败 - 已屏蔽 的问题

    或许你怎么也想不到是IE的问题 由于IE的安全设定问题 但是这个锅 确实不应该是IE来背. 因为我IE下载都没出现这个问题. 解决方法是这样的: IE>Internet选项>安全>自 ...

  3. 【转载】app测试的过程和重点关注内容

    针对 app测试的过程和重点关注内容,做以下梳理和总结:   1 . 首先是测试资源确认及准备 ( 1 ) 产品需求文档.产品原型图.接口说明文档以及设计说明文档等应齐全: ( 2 ) 测试设备及工具 ...

  4. Ubuntu 16.04 安装 VMware Tools（解决windows和Ubuntu之间不能互相复制粘贴文件的问题）

    Ubuntu 16.04安装虚拟工具VMware Tools,指的是在虚拟机VMWare安装Ubuntu 16.04后再安装VMware Tools的过程.很多人接触Linux都是从虚拟机开始,而安装 ...

  5. Pandas数据去重和对重复数据分类、求和，得到未重复和重复（求和后）的数据

    人的理想志向往往和他的能力成正比. —— 约翰逊 其实整个需求呢,就是题目.2018-08-16 需求的结构图: 涉及的包有:pandas.numpy 1.导入包: import pandas as ...

  6. Java核心技术 对象与类

    对象与对象变量: 要想使用对象,就必须首先构造对象,并指定其初始状态,然后,对对象应用方法. 在Java中,使用构造器构造新实例.构造器是一种特殊的方法,用来构造并初始化对象. 在实际开发中,通常需要 ...

  7. 南大算法设计与分析课程复习笔记(1) L1 - Model of computation

    一.计算模型 1.1 定义: 我们在思考和处理算法的时候是机器无关.实现语言无关的.所有的算法运行在一种“抽象的机器”之上,这就是计算模型. 1.2 种类 图灵机是最有名的计算模型,本课使用更简单更合 ...

  8. Visual Studio 2017 - Windows应用程序打包成exe文件（1）- 工具简单总结

    最近有对一个Windows应用程序少许维护和修改.修改之后要发布新的exe安装文件,打包exe文件时,遇到了很头疼的问题,还好最后解决了,记录一下. Visual Studio版本:Visual St ...

  9. 服务器文档下载zip格式

    刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Core.Utility;@{ s ...

  10. Centos 7.6搭建LAMP，部署zabbix监控环境

    一.安装环境 LAMP 1.安装apache yum install -y httpd httpd服务开机进行自启:systemctl enable httpd 启动httpd服务:systemctl ...