CSS學習筆記(三) 樣式聲明

時間 2020-05-09

標籤 css 學習筆記樣式聲明欄目 CSS 简体版

原文原文鏈接

在這篇文章中你能看到有關於 CSS 樣式設置的經常使用屬性，文章的目錄以下：html

[TOC]學習

一、背景

（1）背景顏色

能夠使用 background-color 屬性爲元素設置背景顏色，它接受任何合法的顏色值，默認是 transparent字體

注意，background-color 屬性不能繼承url

（2）背景圖片

能夠使用 background-image 屬性爲元素設置背景圖片，它接受任何合法的 URL，默認是 nonespa

注意，background-image 屬性不能繼承code

（3）背景重複

能夠使用 background-repeat 屬性對背景圖像進行平鋪，其可選值以下：orm

repeat：默認值，在水平方向和垂直方向上都平鋪
repeat-x：在水平方向上平鋪
repeat-y：在垂直方向上平鋪
no-repeat：不容許圖像在任何方向上平鋪

（4）背景位置

能夠使用 background-position 屬性改變圖像的位置，其可選值以下：cdn

top：默認值，將背景圖片定位到上方
bottom：將背景圖片定位到下方
left：默認值，將背景圖片定位到左方
right：將背景圖片定位到右方
center：將背景圖片定位到中間

（5）背景大小

能夠使用 background-size 屬性改變圖像的大小，其可選值以下：htm

cover：背景圖像徹底覆蓋背景區域，可是圖像的某些部分可能沒法顯示
contain：背景圖像徹底適應內容區域
長度
百分數值

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            background-image: url(https://cdn.pixabay.com/photo/2015/06/08/14/52/wave-801752_960_720.jpg);
            background-repeat: no-repeat;
            background-position: top left;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h3>面朝大海，春暖花開</h3>
</body>
</html>

二、文本

（1）文本顏色

能夠使用 color 屬性設置文本顏色，它接受任何合法的顏色值blog

（2）行間間隔

能夠使用 line-height 屬性設置行間的距離，其可選值以下：

normal：默認值，定義標準的行間間距
長度：設置固定的行間間距
數字：將此數字與當前字體尺寸相乘來肯定行間間距
百分數值：規定基於當前字體尺寸的百分比行間間距
inherit：從父元素繼承

（3）字間間隔

能夠使用 letter-spacing 屬性改變字間的間隔，其可選值以下：

normal：默認值，定義標準的字間間距
長度：設置固定的字間間距，接受一個正或負的長度值，若爲正，則增大字間距離；若爲負，則減少字間距離
inherit：從父元素繼承

（4）文本對齊

能夠使用 text-align 屬性控制元素中的文本對齊方式，其可選值以下：

left：左對齊，即把文本排列到左邊，默認值
right：右對齊，即把文本排列到右邊
center：居中對齊，即把文本排列到中間
justify：兩端對齊，經常使用於設置打印格式
inherit：從父元素繼承

（5）處理空白

能夠使用 white-space 屬性定義處理空白的規則，這裏的空白指的是空格和回車，其可選值以下：

normal：默認值，合併空格，忽視回車，容許自動換行
nowrap：合併空格，忽略回車，不容許自動換行
pre：保留空格，保留回車，不容許自動換行
pre-wrap：保留空格，保留回車，容許自動換行
pre-line：合併空格，保留回車，容許自動換行
inherit：從父元素繼承

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .title {
            color: deeppink;
            text-align: center;
            letter-spacing: 3px;
        }
        .author {
            color: hotpink;
            text-align: right;
            line-height: 28px;
            white-space: nowrap;
        }
        .contain {
            color: cornflowerblue;
            text-align: left;
            line-height: 28px;
            white-space: pre-line;
        }
    </style>
</head>
<body>
    <h3 class="title">面朝大海，春暖花開</h3>
    <p class="author">
        —— 海子
    </p>
    <p class="contain">
        從明天起，作一個幸福的人
        餵馬，劈柴，周遊世界
        從明天起，關心糧食和蔬菜
        我有一所房子，面朝大海，春暖花開
        
        從明天起，和每個親人通訊
        告訴他們個人幸福
        那幸福的閃電告訴個人
        我將告訴每個人
        
        給每一條河每一座山取一個溫暖的名字
        陌生人，我也爲你祝福
        願你有一個燦爛的前程
        願你有情人終成眷屬
        願你在塵世得到幸福
        我只願面朝大海，春暖花開
    </p>
</body>
</html>

（6）文本陰影

能夠使用 text-shadow 屬性設置文本陰影效果，其可選值以下：

h-shadow：必需，水平陰影的位置
v-shadow：必需，垂直陰影的位置
blur：可選，模糊距離
color：可選，陰影顏色

<!DOCTYPE HTML>
<html>
<head>
    <style>
        h1 {
            text-shadow: 5px 5px 5px #888888;
        }
    </style>
</head>
<body>
    <h1>你好，世界</h1>
</body>
</html>

（7）文本修剪

能夠使用 text-overflow 屬性規定當文本溢出時發生的動做，其可選值以下：

clip：直接修剪文本
ellipsis：顯示省略符號來表明被修剪的文本
string：顯示給定的字符串來表明被修剪的文本

<!DOCTYPE HTML>
<html>
<head>
    <style>
        div {
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>若是這是一段很長很長的文字，那麼就會溢出</div>    
</body>
</html>

三、字體

（1）字體系列

能夠使用 font-family 屬性指定字體系列，在 CSS 中存在兩種字體系列：

通用字體系列：serif、sans-serif、monospace、cursive、fantasy
特定字體系列：例如 Times、Courier 等等

（2）字體風格

能夠使用 font-style 屬性設置字體風格，其可選值以下：

normal：文本正常顯示
italic：文本斜體顯示
oblique：文本傾斜顯示
inherit：從父元素繼承

（3）字體加粗

能夠使用 font-weight 屬性設置字體粗細，其可選值以下：

normal：默認值，定義標準字符
bold：定義粗體字符
bolder：比父元素更粗
lighter：比父元素更細
inherit：從父元素繼承
從 100 到 900 的整百數字

（4）字體大小

能夠使用 font-size 屬性設置字體大小，其可選值以下：

xx-small
x-small
small
medium
large
x-large
xx-large
smaller：比父元素更小
larger：比父元素更大
長度
百分數值

<!DOCTYPE HTML>
<html>
<body>
    <p>正常文本</p>
    <p style="font-family: cursive">草書</p>
    <p style="font-style: italic">斜體</p>
    <p style="font-weight: bold">粗體</p>
    <p style="font-size: large">大字</p>
</body>
</html>

四、輪廓

（1）顏色

能夠使用 outline-color 屬性設置輪廓顏色，它接受任何合法的顏色值

（2）樣式

能夠使用 outline-style 屬性設置輪廓樣式，其可選值以下：

none：無輪廓，默認值
dotted：點狀輪廓
dashed：虛線輪廓
solid：實線輪廓
double：雙線輪廓
inherit：從父元素繼承

（3）寬度

能夠使用 outline-width 屬性設置輪廓寬度，其可選值以下：

thin：細輪廓
medium：中等輪廓
thick：粗輪廓
長度：指定固定的輪廓粗細
inherit：從父元素繼承

（4）簡寫屬性

爲了方便，咱們能夠只在 outline 屬性中設置全部有關輪廓的屬性，它們的排列順序以下：

outline-color
outline-style
outline-width

<!DOCTYPE HTML>
<html>
    <style>
    h1 {
        color: deeppink;
        text-align: center;
        outline: cornflowerblue solid thin;
    }
    </style>
<body>
    <h1> 面 朝 大 海 ， 春 暖 花 開 </h1>
</body>
</html>

【閱讀更多 CSS 系列文章，請看 CSS學習筆記】