CSS的繼承和使用方式

_ivan 發布于2019-04-23 13:18 / 878人閱讀

摘要：的繼承的繼承指的是當標簽具有嵌套關系時，內部標簽自動擁有外部標簽的不沖突的樣式的性質。多邊框類的屬性都沒有繼承，例如，等。

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 類繼承方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1696.html

Sass快速入門學習筆記

摘要：在中，你可以像俄羅斯套娃那樣在規則塊中嵌套規則塊。這個過程中，用了兩步，每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規則塊一個個打開。與此類似，會命中元素和類名為的元素。這種選擇器稱為群組選擇器。1. 使用變量; sass讓人們受益的一個重要特性就是它為css引入了變量。你可以把反復使用的css屬性值定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值。或者，對于僅使用過一次的屬...

appetizerio 2019-04-23 13:44 評論0 收藏0
sass筆記-3|Sass基礎語法之樣式復用和保持簡潔

摘要：區別在于，類是在中運用的，混合器是在樣式表中使用的?；居梅ㄟx擇器繼承，用去繼承一個選擇器定義的所有樣式。繼承背后的基本實現思路背后最基本的想法是，如果繼承了，那么樣式表中的任何一處選擇器都會用這一選擇器組進行替換和打開。上一篇詳述了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