首頁 >web前端 >css教學 >什麼是css？ css三種樣式以及文字屬性的介紹

什麼是css？ css三種樣式以及文字屬性的介紹

這篇文章要跟大家介紹的內容是關於什麼是css？ css三種樣式以及文字屬性的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是CSS？

Cascading Style Sheets，簡稱CSS，層疊樣式表。
用來修飾HTML文件，對網頁元素進行排版或大小控制等操作。
也就是說，HTML檔案填入了網頁的內容，而CSS則是控制內容的表現
例如：元素的大小，元素在網頁中的位置，元素的背景等屬性。

CSS程式碼寫在那裡？

1 內聯樣式(行內式)：css程式碼可以寫在html標籤中，使用style=”css樣式”;

<p style="color: red;">这是一个段落</p>

2 內部樣式:

把css程式碼寫在style標籤裡面
style標籤理論上寫在文件的任何位置都可以生效，但是我們都會把style寫在head標籤裡面

<html>
    <head>        ...
        <style type="text/css">
            css样式
        </style>
    </head>
</html>

3 外部樣式：

外部樣式是把css程式碼單獨寫在一個css檔案(css後綴檔案)中
再使用link標籤把外部樣式檔案引入
外部樣式檔中不需要style標籤，直接寫css程式碼就可以了

<html>
    <head>        ...
        <link rel="stylesheet" type="text/css" href="css文件路径" />
    </head>
</html>

三種樣式可以多種同時使用

文字屬性: font屬性

1 字體大小：font-size

設定字體的大小，使用有單位的值，例如px,em,pt等

font-size: 12px;

#2 字體顏色：color

color: red;

3 字型樣式：font-family

設定字體，例如宋體、雅黑之類的
可以有多個值
但只顯示一種字體樣式
若第一個字體可用就使用第一個，否則使用第二個
若第二個字體也不可用，就是用第三個，以此類推
字體與字體之間用英文逗號隔開，如果是中文或多個單字的值，要用英文雙引號包起來

font-family: "宋体",Times,"New Century Schoolbook";

4 字體粗細：font-weight

##加粗，效果比bold更明顯value100~900的不含單位數值，一般100~500為正常效果，600~900為加粗，數值越大，字體越粗

font-weight: bold;

5 文字的大小寫: text-transform

##可選值nonecapitalizeuppercaselowercase

text-transform: capitalize;

6 文字水平對齊方式：text-align

##可選值說明left預設值，左對準right右對準center在中對齊justify

justify

兩端對齊

text-align: left;

可選值

inherit

規定應該要從父元素繼承vertical-align 屬性的值

只有元素屬於inline或是inline-block ，vertical-align屬性才會運作。

vertical-align: baseline;

#選用值

line-through######中間劃線(刪除線)####### #####

text-decoration: underline;

9 首行缩进: text-indent

该属性接受一个带单位的值
规定文本首行缩进多少个单位的空间
只对第一行有缩进，而且只用于块元素

text-indent: 2em;

text-indent的属性值一般会使用em作为单位，因为一般缩进都以多少个字符为标准

10字间距: letter-spacing

该属性接受一个带单位的值
规定每个字符之间间隔多少个单位的空间

letter-spacing: 1em;

11 词间距: word-spacing

该属性接受一个带单位的值
规定每个单词之间间隔多少个单位的空间
该属性对中文无效

相關文章