當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端入门学习 css（1）

發布時間：2025/3/20 HTML 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端入门学习 css（1）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

黑馬程序員Web前端入門教程，零基礎前端視頻教程pink老師_html5+css3

文章目錄

- html局限性
- css簡介（層疊樣式表、級聯樣式表、css樣式表）
- css語法規范
- css代碼樣式風格（推薦用展開式風格）（都用小寫）（注意空格）
- css選擇器
- 選擇器分類
- - 標簽選擇器（語法、優缺點）（指定標簽）
  - 類選擇器class（語法、注意事項）
- 利用類選擇器畫三個盒子（div）
- css單標簽多類名的使用方法
- id選擇器
- 通配符選擇器 *
- css字體屬性font-family font-size（字體大小） font-weight（字體粗細）
- 字體樣式font-style
- css字體屬性之復合屬性（節約代碼量）
- 字體屬性總結
- css文本屬性
- - 文本顏色color
  - 對齊文本text-align
  - 裝飾文本text-decoration（下劃線、刪除線、上劃線）取消a標簽（鏈接）的下劃線
  - 文本縮進text-indent（em中文字符單位）
  - 行間距 line-height
- css文本屬性總結
- css引入方式（行內式、嵌入式、鏈接式）
- - 行內樣式表（行內式）
  - 內部樣式表（嵌入式）
  - 外部樣式表（鏈接式）（link rel="stylesheet" href=）

html局限性

css簡介（層疊樣式表、級聯樣式表、css樣式表）

css語法規范

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: red;font-size: 12px;}</style> </head> <body><p>我是紅色的</p> </body> </html>

css代碼樣式風格（推薦用展開式風格）（都用小寫）（注意空格）

css選擇器

選擇器分類

標簽選擇器（語法、優缺點）（指定標簽）

類選擇器class（語法、注意事項）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {color: red;}.green {color: green;}</style> </head> <body><ul class="red"><li class="red">小艾</li><li class="green">小綠</li><li>小鶴</li><li>小坡</li><li>小惠</li></ul><div class="red">我也想變紅色</div> </body> </html>

利用類選擇器畫三個盒子（div）

https://www.bilibili.com/video/BV1pE411q7FU?p=67&spm_id_from=pageDriver

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {width: 120px;height: 240px;background-color: red;}.green {width: 120px;height: 240px;background-color: green;}.blue {width: 120px;height: 240px;background-color: blue;}</style> </head> <body><div class="red">我是紅色的</div><div class="green">我是綠色的</div><div class="blue">我是藍色的</div> </body> </html>

css單標簽多類名的使用方法

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 99px;height: 240px;font-size: 35px;}.red {background-color: red;}.green {background-color: green;}.blue {background-color: blue;}</style> </head> <body><div class="red box">我是紅色的</div><div class="green box">我是綠色的</div><div class="blue box">我是藍色的</div> </body> </html>

id選擇器

通配符選擇器 *

css字體屬性font-family font-size（字體大小） font-weight（字體粗細）

寫多個字體的話，瀏覽器會從第一個開始一個一個往下找，安裝了哪個就用哪個

字體樣式font-style

css字體屬性之復合屬性（節約代碼量）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font:italic 700 16px 'Microsoft yahei'/* font:italic 700 16px '黑體' */}</style> </head> <body><div>我是紅色的</div> </body> </html>

字體屬性總結

css文本屬性

文本顏色color

通常用16進制表達方式，一般通過ps吸取過來，不需要記

對齊文本text-align

裝飾文本text-decoration（下劃線、刪除線、上劃線）取消a標簽（鏈接）的下劃線

文本縮進text-indent（em中文字符單位）

行間距 line-height

css文本屬性總結

css引入方式（行內式、嵌入式、鏈接式）

行內樣式表（行內式）

內部樣式表（嵌入式）

外部樣式表（鏈接式）（link rel=“stylesheet” href=）

示例：

test.html

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="style.css"> </head> <body><h4>你最喜歡吃的食物是？</h4><ul><li>西紅柿</li><li>香蕉</li><li>榴蓮</li><li><p>123</p><p>456</p></li></ul></body> </html>

style.css

ul {color: rebeccapurple; }

https://www.bilibili.com/video/BV1pE411q7FU?p=85&spm_id_from=pageDriver

總結

以上是生活随笔為你收集整理的web前端入门学习 css（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： web前端入门学习 html5（2）
下一篇：如何比较对比两张图片差异（判断是不是同一