第六十九節，css入門基礎

時間 2019-11-12

標籤第六十九 css 入門基礎欄目 CSS 简体版

原文原文鏈接

css入門基礎css

學習要點：
1.使用CSS
2.三種方式
3.層疊和繼承html

本章主要探討HTML5中CSS （層疊樣式表），它是用來對HTML文檔外觀的表現形式進行排版和格式化。瀏覽器

一使用CSS
CSS樣式由一條或多條以分號隔開的樣式聲明組成。每條聲明的樣式包含着一個CSS屬性和屬性值。 佈局

<p style="color:red;font-size:50px;">這是一段文本</p>

解釋：style是行內樣式屬性。color是顏色屬性，red是顏色屬性值；font-size 是字體大小屬性，50px是字體大小屬性值。 性能

二有三種使用方式
建立CSS樣式表有三種方式：1.元素內嵌樣式；2.文檔內嵌樣式；3.外部引入樣式。學習

1.元素內嵌樣式 字體

<p style="color:red;font-size:50px;">這是一段文本</p>

解釋：即在當前元素使用style屬性的聲明方式。 編碼

2.文檔內嵌樣式 spa

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <!--定義文檔的編碼類型-->
    <meta charset="utf-8">
    <title>標題</title>
    <!--css樣式控制p標籤-->
    <style type="text/css">
        p{
            color: blue;
            font-size: 40px;
        }
    </style>
</head>
<body>
<p>這是一段文本</p>
</body>
</html>

解釋：在<head>元素之間建立<style>元素，經過選擇器的方式調用指定的元素並設置相關CSS。code

3.外部引用樣式

html文件

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <!--定義文檔的編碼類型-->
    <meta charset="utf-8">
    <title>標題</title>
    <!--外部引用css樣式控制p標籤-->
    <link rel="stylesheet"type="text/css" href="1.css">
</head>
<body>
<p>這是一段文本</p>
</body>
</html>

css文件

@charset "utf-8";
p{
    color: #ff272d;
    font-size: 40px;
}

解釋：不少時候，大量的HTML頁面使用了同一個組CSS。那麼就能夠將這些CSS樣式保存在一個單獨的.css文件中，而後經過<link>元素去引入它便可。@charset "utf-8"代表設置CSS的字符編碼，若是不寫默認就是utf-8。若是有多個.css文件，能夠使用@import導入方式引入.css文件。只不過，性能不如多個<link>連接。

在一個css文件裏導入另一個css文件，不推薦，性能不如在html頁面多個<link>連接

@charset "utf-8";
/*導入另一個css文件*/
@import "2.css";
p{
    color: #ff272d;
    font-size: 40px;
}

三層疊和繼承
所謂的樣式表層疊：指的是同一個元素經過不一樣方式設置樣式表產生的樣式重疊。樣式表繼承：指的是某一個被嵌套的元素獲得它父元素樣式。還有一種樣式叫瀏覽器樣式，是這個元素在這個瀏覽器運行時默認附加的樣式。

1.瀏覽器樣式

<b>這個元素隱含加粗樣式</b>
<span style="font-weight:bold;">這個元素經過style加粗</span>

解釋：如<b>元素就是具備加粗的隱含樣式，而<span>元素沒有任何隱含樣式，經過style屬性設置樣式。

2.樣式表層疊優先級
樣式表層疊經過四種方式進行，若是樣式相同，那麼好比會產生衝突替換。這時，它的優先級順序就顯的比較重要。如下優先級從低到高：
(1).瀏覽器樣式（元素自身攜帶的樣式）；優先級4最低
(2).外部引入樣式（使用<link>引入的樣式）；優先級3
(3).文檔內嵌樣式（使用<style>元素設置）；優先級2
(4).元素內嵌樣式（使用style屬性設置）。優先級1最高

元素內嵌，優先級1最高

<p style="color:red;font-size:30px;">我將被三種方式疊加樣式</p>

文檔內嵌，優先級2

<style type="text/css"> 
p 
color:blue; 
font-weight: bold; 
} 
</style>

外部引入，優先級3

@charset "utf-8"; 
p 
color: green;

font-style: italic; 
}

若是某一個樣式被優先級高的給替換掉了，卻又想執行這個樣式方案，能夠將這個方案標記成重要樣式（important），強行設置最高優先級。

強行設置最高優先級

color: green !important;

3.樣式繼承
若是某一個元素並無設置父元素相關的樣式，那麼就會使用繼承機制將父元素的樣式集成下來。
<b>元素繼承了<p>元素的樣式

<p style="color:red;">這是<b>HTML5</b></p>

樣式繼承只適用於元素的外觀（文字、顏色、字體等），而元素在頁面上的佈局樣式則不會被繼承。若是繼承佈局樣式，就必須使用強制繼承：inherit。

強制繼承佈局樣式

<style type="text/css">
　　p{
　　　　border: 1px solid red;
　　}
　　b{
　　　　border :inherit;
　　}
</style>
<p>這是<b>HTML5</b></p>

1. 第九十六節，JavaScript概述
2. css入門第一節
3. 第十九章：DOM 基礎
4. Python 第六節第九課
5. Python 第九節第六課
6. CSS入門基礎
7. css基礎入門
8. CSS基礎入門
9. redis學習-第一節-基礎入門
10. html 入門基礎第一節
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Kotlin 基礎語法 - Kotlin 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。