大資料開發基礎之CSS建立

首頁>技術>加米穀大資料張衡2021-02-24 15:03

昨天提到了CSS的基礎知識及語法，今天就帶來CSS的建立，在大資料開發的基礎之中，CSS和HTML都屬於前端技術。當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文件。插入樣式表的方法有三種，這三種分別是外部樣式表、內部樣式表、內聯樣式。

1. 外部樣式表External style sheet

這種主要適用於多頁面的情況，外部樣式表是可以透過改變一個檔案，以此來改變整個站點的外觀。每個頁面都需使用<link>標籤來連結到樣式表，注意<link>標籤要在文件的頭部。這種做法能夠節約大量的程式碼空間，提升網頁開啟速度，以此最佳化體驗效果

例如

<head>

</head>

瀏覽器就會從檔案mystyle.css中讀到樣式宣告，並以此根據它來格式文件，外部樣式表有三個要素：1.連結地址 2.type定義 3.樣式表的名稱並且它的標誌就是.CSS的檔名。外部樣式表可以在文字文件進行任意的編輯，但檔案不能有任何的HTML標籤，應該以.CSS的副檔名進行儲存

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("/images/back40.gif");}

在上面這個例子中我們就定義了顏色、邊距、背景影象等。

2. 內部樣式表Internal style sheet

當單個文件需要特殊的樣式時，僅僅在一個網頁當中發生作用，我們在這個時候就應該使用內部樣式表，對這個樣式表進行一個單獨的定義。你可以使用 <style> 標籤在文件頭部定義內部樣式表，就像這樣:

<head>

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/back40.gif");}

</style>

</head>

3. 內聯樣式Inline style

這是一種更為特殊的樣式表達方式，由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢，例如當樣式僅需要在一個元素上應用一次時，是一種劣大於優的方式，不是很建議使用，使用的話需要考慮再三。

要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。

This is a paragraph

</p>

上例就展示瞭如何改變段落的顏色和左外邊距。

除了上述3中樣式外，還有一種多重樣式，這種方式的使用主要是因為有的時候選擇的樣式表過多，這個元素的屬性值就會進行一個均衡的賦予。

使用多重樣式時會有一個優先順序順序

內聯樣式> 內部樣式 >外部樣式> 瀏覽器預設樣式

例子

<head>

/* 內部樣式 */

h3{color:green;}

</style>

</head>

<body>

</body>

CSS7 種選擇器：

1. ID選擇器 2.類選擇器 3.偽類選擇器 4.屬性選擇器 5.偽元素選擇器 6.通配選擇器 7.標籤選擇器

熱門排行