CSS基礎

一、字體

1.更改元素的字體大小

字體大小由font-size屬性控制。

<style>p{font-size:16px;}//設置p元素字體大小為16px </style>

2.設置元素的字體家族

通過font-family屬性，可以設置元素里面的字體樣式。

<style>p {font-family:monospace;}//設置p字體樣式為monspace </style>

3.引入谷歌字體

Google 字體庫是一個免費的 Web 字體庫，我們只需要在 CSS 里設置字體的 URL 即可使用。
要引入 Google Font，你需要從 Google Fonts 上復制字體的 URL，并粘貼到你的 HTML 里面。放到代碼編輯器頂部，即放到 style 標簽之前。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

使用具體字體：

font-family: FAMILY_NAME, GENERIC_NAME; //FAMILY_NAME是要使用的字體 //GENERIC_NAME是其他字體不可用時的后備字體

字體名區分大小寫，并且如果字體名含有空格，則在聲明時需要用引號包起來。 例如，使用 “Open Sans” 字體需要添加引號，而 Lobster 則不需要。

4.字體如何優雅降級

所有瀏覽器都有幾種默認字體， 包括 monospace、serif 和 sans-serif。
降級：如果你想將一個元素的字體設置成 Helvetica，但當 Helvetica 不可用時，降級使用 sans-serif 字體，那么可以這樣寫：

p {font-family: Helvetica, sans-serif; }

通用字體名不區分大小寫。 同時，也不需要使用引號，因為它們是 CSS 中的關鍵字。

二、圖形圖像

1.調整圖像大小

CSS 的 width 屬性可以控制元素的寬度。 和設置文本字號一樣，我們會以 px（像素）為單位來設置圖片的寬度。
創建一個class選擇器控制 HTML 元素的寬度為 500px：

<style>.larger-image {width: 500px;} </style>

2.在元素周圍添加邊框

CSS 邊框具有 style、color、width 屬性。
假如我們要將一個 HTML 元素邊框設置為 5px 的紅色實線邊框：

<style>.thin-red-border {border-color: red;//邊框顏色border-width: 5px;//邊框寬度border-style: solid;//邊框樣式} </style>

在一個元素上可以同時應用多個 class，使用空格來分隔不同 class 即可.

<img class="class1 class2">

3.用 border-radius 添加圓角邊框

圖片的四個角看起來很尖銳， 我們可以使用 border-radius 屬性來讓它變得圓潤。border-radius 的屬性值單位可以是 px（像素）。

.thick-green-border {border-color: green;border-width: 10px;border-style: solid;border-radius:10px;//圓角邊框}

4.用 border-radius 制作圓形圖片

除像素外，也可以使用百分比來指定 border-radius 的值。

.thick-green-border {border-color: green;border-width: 10px;border-style: solid;border-radius: 50%; }

謝謝你的堅持閱讀ovo喲，讓我們一起加油吖

總結

以上是生活随笔為你收集整理的CSS基础_Day02的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。