App下載

CSS是什么？CSS能做什么？

猿友 2021-03-11 16:13:02 瀏覽數(shù) (12434)
反饋

相信只要學(xué)習(xí)了 HTML 編程的人對(duì) CSS 都不會(huì)陌生，CSS 可以對(duì) HTML 進(jìn)行修飾優(yōu)化頁(yè)面，讓你的頁(yè)面耳目一新瞬間高了一個(gè)檔次，那么初學(xué)編程的你知道 CSS是什么嗎？它能做什么呢？

CSS簡(jiǎn)介

  1. 顧名思義CSS 的意思是層疊樣式表 (Cascading Style Sheets)
  2. CSS的樣式定義為如何顯示 HTML 元素
  3. CSS樣式通常都會(huì)存儲(chǔ)在樣式表中
  4. 外部的樣式表對(duì)工作效率有極大的提高
  5. 外部樣式表通常都存儲(chǔ)在 CSS 文件中
  6. 多個(gè)樣式定義可層疊為一個(gè)

總之，CSS 可以美化頁(yè)面，對(duì)頁(yè)面元素進(jìn)行更為精準(zhǔn)仔細(xì)的設(shè)置，樣式主要用來(lái)描述元素的字體顏色、字體大小、背景顏色、背景圖片等等。

CSS作用

CSS 主要有內(nèi)聯(lián)樣式、頁(yè)面嵌入和外部引用三種使用方式，接下來(lái)我們一一來(lái)了解他們。

1、內(nèi)聯(lián)樣式

元素的內(nèi)聯(lián)是直接在屬性中寫入元素的 style 屬性，適用于樣式?jīng)]有其他可復(fù)用性的場(chǎng)合，見(jiàn)以下代碼：

<body>
    <p style="font-size:20px;color:red">w3cschool</p>
    <p style="font-size:25px;background-color: #2196F3">編程獅</p>
</body>

效果圖

CSS內(nèi)聯(lián)

2、頁(yè)面嵌入

在?<head>?中加入?<style>?。這種做法表示此頁(yè)面中所有對(duì)應(yīng)元素都是采用其指定的樣式，適合于樣式的復(fù)用，有效減小頁(yè)面體積。

<head>
    <meta charset="UTF-8">
    <title>CSS w3cschool</title>
    <style type="text/css">
        p{
            font-size:25px;
            color:red;
        }
        h1{
            color:greenyellow;
        }
        h2{
            background-color: #2196F3;
        }
    </style>
</head>
<body>
<body>
    <h1>編程獅</h1>
    <p>w3cschool</p>
    <h2>學(xué)編程</h2>
</body>

效果圖

頁(yè)面嵌入

3、外部引用

在?<head>?中加入，將 CSS 的所有內(nèi)容都寫入以 CSS 為后綴的文件，可適用多個(gè)頁(yè)面來(lái)共享此 CSS。

CSS 代碼

h1 {
    background-color: red;
    border-color: green;
}
p {
    color: blue;
}

HTML 代碼

<body>
    <h1>編程獅</h1>
    <p>w3cschool</p>
    <h2>學(xué)編程</h2>
</body>

效果圖

外部引用

以上就是小編為大家?guī)?lái)的關(guān)于 CSS是什么？CSS能做什么的全部?jī)?nèi)容。


CSS

0 人點(diǎn)贊