CSS（簡介or選擇器）

時間 2020-06-14

標籤 css 簡介選擇器欄目 CSS 简体版

原文原文鏈接

咱們爲何須要CSS?

使用css的目的就是讓網頁具備美觀一致的頁面，另一個最重要的緣由是內容與格式分離在沒有CSS以前，咱們想要修改HTML元素的樣式須要爲每一個HTML元素單獨定義樣式屬性，當HTML內容很是多時，就會定義不少重複的樣式屬性，而且修改的時候須要逐個修改，費心費力。是時候作出改變了，因此CSS就出現了。css

CSS的出現解決了下面兩個問題：html

將HTML頁面的內容與樣式分離。
提升web開發的工做效率。

什麼是CSS?

CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式一般又會存在於樣式表中。也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS文件裏。web

css的優點

1.內容與表現分離 2.網頁的表現統一，容易修改 3.豐富的樣式，使頁面佈局更加靈活 4.減小網頁的代碼量，增長網頁瀏覽器速度，節省網絡帶寬 5.運用獨立頁面的css,有利於網頁被搜索引擎收錄瀏覽器

如何使用CSS？

咱們一般會把樣式規則的內容都保存在CSS文件中，此時該CSS文件被稱爲外部樣式表，而後在HTML文件中經過link標籤引用該CSS文件便可。這樣瀏覽器在解析到該link標籤的時候就會加載該CSS文件，並按照該文件中的樣式規則渲染HTML文件。網絡

CSS語法

CSS基礎語法

CSS語法能夠分爲兩部分：佈局

選擇器
聲明

聲明由屬性和值組成，多個聲明之間用分號分隔。搜索引擎

網頁中引用CSS樣式

內聯樣式
行內樣式表
外部樣式表
- 連接式
- 導入式

內嵌方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS內嵌式</title>

</head>
    <style>
        p{
            color: #ff00c2;
        }
    </style
    >
<body>
    <p>我是CSS內嵌式</p>

</body>
</html>

行內樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS行內樣式</title>
</head>
<body>
    <p style="color: red">我是CSS行內樣式</p>
</body>
</html>

外聯樣式表-連接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外聯樣式表連接式</title>
</head>
    <link rel="stylesheet" href="index.css"
<body>
    <p>我是外聯樣式表連接</p>
</body>
</html>

index.cssurl

p{
    color:green;
}

外聯樣式表-@import url()方式導入式

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        @import url(index.css);
    </style>
<body>
    <p>導入式</p>
</body>
</html>

index.cssspa

p{
    color:green;
}

注意：
@import url()必須寫在文件最開始的位置。code

連接式與導入式的區別

一、<link/>標籤屬於XHTML,@import是屬性css2.1 二、使用<link/>連接的css文件先加載到網頁當中，再進行編譯顯示 三、使用@import導入的css文件，客戶端顯示HTML結構，再把CSS文件加載到網頁當中 四、@import是屬於CSS2.1特有的，對於不兼容CSS2.1的瀏覽器來講就是無效的