摘要:的繼承的繼承指的是當(dāng)標(biāo)簽具有嵌套關(guān)系時(shí),內(nèi)部標(biāo)簽自動(dòng)擁有外部標(biāo)簽的不沖突的樣式的性質(zhì)。多邊框類的屬性都沒(méi)有繼承,例如,等。
CSS的繼承
css的繼承指的是當(dāng)標(biāo)簽具有嵌套關(guān)系時(shí),內(nèi)部標(biāo)簽自動(dòng)擁有外部標(biāo)簽的不沖突的樣式的性質(zhì)。
在Css中有些屬性不允許繼承,例如,border屬性沒(méi)有繼承性。多邊框類的屬性都沒(méi)有繼承 ,例如,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使用實(shí)例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>這是藍(lán)色,12pt,斜體,默認(rèn)宋體p>
<div>
<p>這是藍(lán)色,12pt,斜體加粗,黑體p>
div>
<br>
<div>這是紅色,10pt,加粗,黑體,有邊框div><br>
<div>
這是紅色,10pt,黑體<br>
<em>我是em元素的文字,綠色文字周邊無(wú)邊框em>
div>
body>
html>
?
?
CSS的使用方式
在html頁(yè)面中使用CSS主要有3種方法:內(nèi)嵌方式,內(nèi)部樣式表,使用標(biāo)簽鏈接外部樣式表。
1.內(nèi)嵌方式(是將CSS代碼寫在HTML的標(biāo)簽里。)
示例:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>內(nèi)嵌方式title>
head>
<body>
<p align="center" style="color: red;">內(nèi)嵌方式p>
body>
html>
2.內(nèi)部樣式表
與行間樣式表類似,都是將CSS代碼寫在HTML文檔中; 不同的是內(nèi)部樣式表不是寫在標(biāo)簽中,而且有一定的格式。
示例:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>內(nèi)部樣式表示例title>
<style type="text/css">
div{
width: 100px;
height: 40px;
color: yellow;
background-color: red;
text-align: center;
}
style>
head>
<body>
<div>內(nèi)部樣式表div>
body>
html>
3.使用標(biāo)簽鏈接外部樣式表
與內(nèi)部樣式表的相同之處在于都有一定的格式; 不同的是他的CSS代碼是寫在HTML文檔外的.css文件中,而且使用時(shí)需要引用。
實(shí)例:
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;
}
?
?
?
?
?
?
特此聲明:如需轉(zhuǎn)載請(qǐng)注明出處,如有疑問(wèn)請(qǐng)及時(shí)提出以便于改正,如有侵權(quán),聯(lián)系刪除,謝謝
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/1696.html
摘要:在中,你可以像俄羅斯套娃那樣在規(guī)則塊中嵌套規(guī)則塊。這個(gè)過(guò)程中,用了兩步,每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規(guī)則塊一個(gè)個(gè)打開。與此類似,會(huì)命中元素和類名為的元素。這種選擇器稱為群組選擇器。1. 使用變量; sass讓人們受益的一個(gè)重要特性就是它為css引入了變量。你可以把反復(fù)使用的css屬性值 定義成變量,然后通過(guò)變量名來(lái)引用它們,而無(wú)需重復(fù)書寫這一屬性值。或者,對(duì)于僅使用過(guò)一 次的屬...
摘要:區(qū)別在于,類是在中運(yùn)用的,混合器是在樣式表中使用的?;居梅ㄟx擇器繼承,用去繼承一個(gè)選擇器定義的所有樣式。繼承背后的基本實(shí)現(xiàn)思路背后最基本的想法是,如果繼承了,那么樣式表中的任何一處選擇器都會(huì)用這一選擇器組進(jìn)行替換和打開。 上一篇詳述了Sass如何嵌套、導(dǎo)入和注釋這3個(gè)基本方式來(lái)保持條理性和可讀性,這一篇更進(jìn)一步地闡述sass保持樣式復(fù)用和簡(jiǎn)潔的方式——混合器和選擇器繼承——這兩種方式...
摘要:類選擇器具有更高的專用性,所以將戰(zhàn)勝元素選擇器。個(gè)位在整個(gè)選擇器中每包含一個(gè)元素選擇器或偽元素就在該列中加分。選擇器六明顯地輸給了了五,其專用性值為和它在鏈中少了一個(gè)元素選擇器。當(dāng)有多個(gè)選擇器作用在一個(gè)元素上時(shí),哪個(gè)規(guī)則最終會(huì)應(yīng)用到元素上? 其實(shí)這是通過(guò)層疊機(jī)制來(lái)控制的,這也和樣式繼承(元素從其父元素那里獲得屬性值)有關(guān)。 元素的最終樣式可以在多個(gè)地方定義,它們以復(fù)雜的形式相互影響。這些復(fù)雜...
摘要:格式如下外部樣式外部樣式就是將寫在一個(gè)單獨(dú)的文件中,然后在頁(yè)面進(jìn)行引入即可。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框,而不論它本身是何種元素。允許浮動(dòng)元素出現(xiàn)在兩側(cè)。CSS介紹 CSS(Cascading Style Sheet,層疊樣式表)定義如何顯示HTML元素。 當(dāng)瀏覽器讀到一個(gè)樣式表,它就會(huì)按照這個(gè)樣式表來(lái)對(duì)文檔進(jìn)行格式化(渲染)。 CSS語(yǔ)法 CSS實(shí)例 每個(gè)CSS樣式由兩個(gè)組成部分:選擇器和聲明...
摘要:相反的,提供了全局作用域和局部作用域。組成界面的分子的樣式可以通過(guò)元素選擇器定位。元素選擇器的優(yōu)先級(jí)很低,因此他們不會(huì)覆蓋任何基于類選擇器的樣式。使用元素選擇器有以下優(yōu)點(diǎn)避免了的冗長(zhǎng)沒(méi)有冗余的類。 最近學(xué)習(xí)到CSS的繼承屬性,正好看到這篇文章,便將它翻譯出來(lái)。作者的思想,在平時(shí)的項(xiàng)目中或多或少都有用過(guò),但是從來(lái)沒(méi)有仔細(xì)去思考如何利用這些特性讓代碼更加優(yōu)雅。 我熱愛(ài)模塊化設(shè)計(jì)。長(zhǎng)期以來(lái),...
閱讀 3351·2021-10-13 09:40
閱讀 2586·2021-10-08 10:17
閱讀 3989·2021-09-28 09:45
閱讀 922·2021-09-28 09:35
閱讀 1805·2019-08-30 10:51
閱讀 2898·2019-08-26 12:11
閱讀 1645·2019-08-26 10:41
閱讀 3091·2019-08-23 17:10