CSS的继承和使用方式

_ivan 发布于2019-04-23 13:18 / 852人阅读

摘要：的继承的继承指的是当标签具有嵌套关系时，内部标签自动拥有外部标签的不冲突的样式的性质。多边框类的属性都没有继承，例如，等。

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种方法：内嵌方式，内部样式表，使用标签链接外部样式表。

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.使用标签链接外部样式表

与内部样式表的相同之处在于都有一定的格式；不同的是他的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;
}

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢

GPU云服务器云服务器 js继承的几种方式继承方式 css的使用 php 类继承方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1696.html

Sass快速入门学习笔记

摘要：在中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。这个过程中，用了两步，每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。与此类似，会命中元素和类名为的元素。这种选择器称为群组选择器。1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属...

appetizerio 2019-04-23 13:44 评论0 收藏0
sass笔记-3|Sass基础语法之样式复用和保持简洁

摘要：区别在于，类是在中运用的，混合器是在样式表中使用的。基本用法选择器继承，用去继承一个选择器定义的所有样式。继承背后的基本实现思路背后最基本的想法是，如果继承了，那么样式表中的任何一处选择器都会用这一选择器组进行替换和打开。上一篇详述了Sass如何嵌套、导入和注释这3个基本方式来保持条理性和可读性，这一篇更进一步地阐述sass保持样式复用和简洁的方式——混合器和选择器继承——这两种方式...

SmallBoyO 2019-08-30 13:12 评论0 收藏0
CSS学习摘要-层叠和继承

摘要：类选择器具有更高的专用性，所以将战胜元素选择器。个位在整个选择器中每包含一个元素选择器或伪元素就在该列中加分。选择器六明显地输给了了五，其专用性值为和它在链中少了一个元素选择器。当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？其实这是通过层叠机制来控制的，这也和样式继承(元素从其父元素那里获得属性值)有关。元素的最终样式可以在多个地方定义，它们以复杂的形式相互影响。这些复杂...

mating 2019-04-23 13:40 评论0 收藏0
前端css

摘要：格式如下外部样式外部样式就是将写在一个单独的文件中，然后在页面进行引入即可。浮动元素会生成一个块级框，而不论它本身是何种元素。允许浮动元素出现在两侧。CSS介绍 CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样式由两个组成部分：选择器和声明...

番茄西红柿 2019-04-23 11:41 评论0 收藏0
【译】CSS继承、层叠和全局作用域

摘要：相反的，提供了全局作用域和局部作用域。组成界面的分子的样式可以通过元素选择器定位。元素选择器的优先级很低，因此他们不会覆盖任何基于类选择器的样式。使用元素选择器有以下优点避免了的冗长没有冗余的类。最近学习到CSS的继承属性，正好看到这篇文章，便将它翻译出来。作者的思想，在平时的项目中或多或少都有用过，但是从来没有仔细去思考如何利用这些特性让代码更加优雅。我热爱模块化设计。长期以来，...

WilsonLiu95 2019-08-29 12:57 评论0 收藏0