App下載

CSS是什么？CSS能做什么？

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

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

CSS簡介

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

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

CSS作用

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

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

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

<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、頁面嵌入

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

<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>

效果圖

頁面嵌入

3、外部引用

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

CSS 代碼

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

HTML 代碼

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

效果圖

外部引用

以上就是小編為大家?guī)淼年P(guān)于 CSS是什么？CSS能做什么的全部內(nèi)容。


CSS

0 人點贊