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

HTML

前端css学习

發布時間：2025/4/5 HTML 36 豆豆

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

寫在前面：本文根據菜鳥教程學習整理而來

文章目錄

CSS入門
- css簡介
- - 什么是css
- css語法
- - css實例
- css Id和Class
- - id選擇器
  - class選擇器
- css創建
- - 外部樣式表
  - 內部樣式表
  - 內聯樣式
  - 多重樣式
  - 多重樣式優先級
- css background(背景)
- - 背景顏色
  - 背景圖像
  - 背景-簡寫屬性
- css文本屬性
- - 文本顏色
  - 文本的對齊方式
  - 文本修飾
  - 文本轉換
  - 文本縮進
- css字體
- - css字型
  - 字體系列
  - 字體樣式和字體大小
  - css字體屬性列表
- css鏈接
- css列表

CSS入門

css簡介

什么是css

CSS(Cascading Style Sheets)是層疊樣式表，定義如何顯示html元素。

特點

樣式通常存儲在樣式表中

把樣式添加到html4.0中，是為了解決內容與表現分離的問題

外部樣式表可以極大提高工作效率

外部樣式表通常存儲在css文件內

多個樣式定義可層疊為一個

css語法

css規則由兩個主要部分構成：選擇器和聲明，聲明可以有一條或者多條。

h1 {color:blue; font-size: 12px;}

選擇器通常是需要改變樣式的html元素，比如h1就是對最大的標題進行設置樣式；每條聲明由一個屬性和一個值組成。屬性（property）是希望設置的樣式屬性（style attribute），每個屬性有一個值，屬性和值之間用冒號隔開。聲明總是以分號結束。
對于上例，h1是選擇器，大括號里面的是聲明，這里有2個聲明，分別是color: blue;和font-size:12px。每個聲明由屬性和值組成。

css實例

為了增強可讀性，css可以每行只描述一個屬性。css注釋使用/**/

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試用例</title> <style> p {/*這是注釋*/color:green;text-align:right; } </style> </head><body> <p>Hello World!</p> <p>一個跑者的心態：越是不想跑的時候，才要出去跑</p> <p>這個段落采用CSS樣式化。</p> </body> </html>

測試結果

css Id和Class

如果要在html元素中設置css樣式，需要在元素中設置id和class選擇器。

id選擇器

id選擇器可以為標有特定id 的html元素指定特定的樣式，html元素以id屬性來設置id選擇器，css中id選擇器以“#”來定義。這其實是設定樣式作用的范圍。這里需要注意的是：

ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

舉例如下
下面id為para1的適用一種樣式，id為para2的適用另一種樣式。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> #para1 {text-align:center;color:red; } #para2{text-align:right;color:green;} </style> </head><body> <p id="para1">Hello World!</p> <p>這個段落不受該樣式的影響。</p><div id="para2">這里是什么</div> </body> </html>

測試結果

class選擇器

class選擇器用于描述一組元素的樣式，class選擇器有別于id選擇器，class可以在多個元素中使用。class選擇器在html中以class屬性表示，在css中，類選擇器以一個點“.”表示。

類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。

測試用例
所有的 p 元素使用 class=“center” 讓該元素的文本居中，而h3元素使用class="center"沒有效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style> #para1 {text-align:right;font-size:20px;color:blue; } p.center {text-align:center; } </style> </head><body> <h3 class="center">由于p.center的限制，居中只能用于段落p，而不能用于標題h</h3><h4 id="para1">不可以用嗎</h4> <p class="center">段落居中。誰知道這里寫些什么</p><p id="para1">別人都是在拼命</p> </body> </html>

測試結果

css創建

當讀到一個樣式表時，瀏覽器會根據它來格式化html文檔。
插入樣式表有3種方法

插入樣式表的方法

外部樣式表（External style sheet）

內部樣式表（Internal style sheet）

內聯樣式（Inline style）

外部樣式表

當樣式需要應用于很多頁面時，外部樣式表是理想的選擇。使用外部樣式表，可以通過改變一個文件來更改整個站點的外觀。每個頁面使用<link>標簽鏈接到樣式表。在head中使用

瀏覽器會從文件mystyle.css中讀到樣式聲明，并根據它來格式化文檔。
外部樣式表可以在任何文本編輯器中進行編輯，但是文件中不能含有任何html標簽，最后以.css擴展名進行保存。下面是一個樣式表的例子

不要在屬性值與單位之間留有空格

hr {color:sienna;} p {margin-left: 20px;} body { back-ground-image:url("/image.gif");}

內部樣式表

當單個文檔需要特殊的樣式時，就應該使用內部樣式表，可以使用<style>標簽在文檔頭部定義內部樣式表，比如

<head> <meta charset="utf-8"> <title>測試用例</title> <style> p {/*這是注釋*/color:green;text-align:right; } </style> </head>

內聯樣式

由于要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的很多優勢，內聯樣式請慎用，應用場景有：當樣式僅需要在一個元素上應用一次時。要使用內聯樣式，需要在相關的標簽內使用樣式(style)屬性。style屬性可以包含任何css屬性
舉例：改變段落的顏色和左外邊距

<p style="color: sienna; margin-left: 20px;">這里寫內容</p>

多重樣式

如果某些屬性在不同樣式表中被同樣的選擇器定義，那么屬性值就從更具體的樣式表中繼承過來。例如，外部樣式表有針對h3選擇器的三個屬性：

h3 {color:green;text-align:left;font-size:8pt; }

而內部樣式表有針對h3選擇器的兩個屬性：

h3 {text-align:right;font-size:20pt; }

假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接，那么h3得到的樣式：顏色屬性被繼承于外部樣式表，而text-align和font-size屬性會被內部樣式表的規則取代。

h3 {color:green;/*外部樣式表*/text-align:right;/*內部樣式表*/font-size:20pt; }

多重樣式優先級

樣式表允許以多種方式規定樣式信息。樣式可以規定在單個html元素中，在html頁的頭元素中，或者在一個外部的css文件中。當然同一個html文檔可以引用多個外部樣式表。
一般情況下，優先級如下
$內聯樣式＞內部樣式＞外部樣式＞瀏覽器默認樣式$
但是，如果外部樣式放在內部樣式后面，外部樣式將覆蓋掉內部樣式。

css background(背景)

css背景屬性用于定義html元素的背景

背景屬性描述

background	描寫屬性，作用是將背景屬性設置在一個聲明中
background-attachment	背景圖像是否固定或者隨著頁面的其余部分滾動
background-color	設置元素的背景顏色
background-image	把圖像設置為背景
background-position	設置背景圖像的起始位置
background-repeat	設置背景圖像是否及如何重復

背景顏色

background-color屬性定義了元素的背景顏色，頁面的背景顏色使用在body的選擇器中
css中，顏色值通常有以下幾種方式定義

十六進制：比如“#ff0000”
RGB：比如“rgb(255,0,0)”
顏色名稱：比如"red"

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿正的夢工坊</title> <style> body {background-color:#b0c4de; } </style> </head><body><h1>總有一些人要贏！</h1> <table border="1"><tr><td>科比</td><td>納什</td></tr><tr><td>分衛</td><td>控衛</td></tr> </table></body> </html>

測試結果

下面的例子中h1, p, 和 div 元素擁有不同的背景顏色

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style> h1 {background-color:#6495ed; } p {background-color:#e0ffff; } div {background-color:#b0c4de; }</style> </head><body><h1>CSS background-color 實例!</h1> <div>該文本插入在 div 元素中。 <p>該段落有自己的背景顏色。</p> 我們仍然在同一個 div 中。</div></body> </html>

測試結果

背景圖像

background-image屬性描述了元素的背景圖像，默認情況下，背景圖像進行平鋪重復顯示，以覆蓋掉真個元素實體。

頁面背景圖實例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿正的夢工坊</title> <style> body {background-image:url('paper.gif');background-color:#cccccc; } </style> </head><body> <h1>Hello World!</h1><p>隨便寫點什么吧，今天是2020年7月12日，復盤一下這一學期的收獲，似乎不多，不過堅定了自己未來要走的道路，這意味著要在這條道路上付出很多，跌跌撞撞的同時收獲寶貴的經驗，讓時間為自己賦能。</p> </body></html>

測試結果

背景圖像可設置水平或者垂直平鋪,或者不平鋪，通過background-repeat屬性來設置

background-repeat:repeat-x; background-repeat:repeat-y; background-repeat:no-repeat;

背景圖像可通過background-position屬性改變圖像在背景中的位置

body {background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;margin-right:200px; } </style>

背景-簡寫屬性

在上面的學習中，控制頁面的背景顏色使用了很多屬性，為了簡化屬性代碼，可以把屬性合并到同一個屬性中，背景顏色的簡寫屬性為background
實例

body {background:#ffffff url("where.png") no-repeat right top;}

使用簡寫屬性的順序如下

簡寫屬性的順序

background-color

background-image

background-repeat

background-attachment

background-position

這些屬性無需全部使用。

css文本屬性

css文本屬性如下表

屬性描述

color	設置文本顏色
direction	設置文本方向
letter-spacing	設置字符間距
line-height	設置行高
text-align	對齊元素中的文本
text-decoration	向文本添加修飾
text-indent	縮進元素中文本的首行
text-shadow	設置文本陰影
text-transform	控制元素中的字母
unicode-bidi	設置或返回文本是否被重寫
vertical-align	設置元素的垂直對齊
white-space	設置元素中空白的處理方式
word-spacing	設置字間距

文本顏色

顏色屬性被用來定義文字的顏色
測試代碼
body范圍內字體的默認顏色設置為黑色，h1標題的顏色設置為#00ff00,段落p的一個類“ex”顏色設置為藍色，字體設置為20px

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style> body {color:black;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255); font-size:20px;} </style> </head><body> <h1>這是標題 1</h1> <p>這是一個普通的段落。請注意,本文是紅色的。頁面中定義默認的文本顏色選擇器。</p> <p class="ex">這是一個類為"ex"的段落。這個文本是藍色的。</p> </body> </html>

測試結果

文本的對齊方式

文本排列屬性是用來設置文本的水平對齊方式，文本可居中，左端對齊，右端對齊，兩端對齊。當text-align設置為“justify”時，每一行被展開為寬度相等，左右外邊距為對齊

測試結果

測試結果二

文本修飾

文本裝飾使用text-decoration屬性。主要用來刪除鏈接的下劃線

a {text-decoration: none;}

刪除鏈接下劃線測試

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.lishizheng.com</title> <style> a.delete {text-decoration:none;} </style> </head><body><p>鏈接到: <a href="//www.lishizheng.com/">www.lishizheng.com</a></p><p>鏈接到: <a class="delete" href="//www.lishizheng.com/">www.lishizheng.com</a></p></body></html>

測試結果

還有下面裝飾文字的用法：分別是上劃線，刪除線，下劃線。

h1 {text-decoration: overline;} h2 {text-decoraton: line-through;} h3 {text-decoration: underline;}

測試用例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} </style> </head><body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body></html>

測試結果

文本轉換

文本轉換屬性用來指定在一個文本中的大寫和小寫字母，可以將所有字句變成大寫或小寫字母，或者每個單詞的首字母大寫。

/*大寫*/ p.uppercase{text-transform: uppercase;} /*小寫*/ p.lowercase {text-transform:lowercase;} /*首字母大寫*/ p.capitalize {text-transform:capitalize;}

文本縮進

文本縮進屬性用來指定文本的第一行的縮進

p {text-indent: 50px;}

測試用例
測試文本轉換

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style> </head><body> <p class="uppercase">Monday. just follow the plan</p> <p class="lowercase">Monday. just follow the plan</p> <p class="capitalize">Monday. just follow the plan</p> </body> </html>

測試結果

測試用例
測試首行縮進

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style> p.hello {text-indent:50px;text-transform:uppercase;} </style> </head> <body><p class="hello">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p></body> </html>

測試結果

css字體

css字體屬性定義字體、加粗、大小、文字樣式。

css字型

在css中，有兩種類型的字體系列名稱

通用字體系列：擁有相似外觀的字體系統組合（比如 serif和monospace）

特定字體系列：一個特定的字體系列（比如times或courier）

字體系列

font-family屬性設置文本的字體系列，應該設置幾個字體名稱作為后備，如果瀏覽器不支持第一種字體，瀏覽器將嘗試下一種字體。如果字體系列的名稱超過一個字，必須用引號，比如“宋體”，多個字體系列用一個逗號分隔。

測試字體系列

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style>p.sansserif{font-family:Arial,Helvetica,sans-serif;} p.serif {font-family:"times new roman",times,serif;}; </style> </head><body> <h1>CSS font-family</h1> <p class="serif">這一段的字體是 Times New Roman </p> <p class="sansserif">這一段的字體是 Arial.</p></body> </html>

測試結果

字體樣式和字體大小

字體樣式主要用于指定斜體文字，字體樣式屬性有三個值

/*正常顯示*/ p.normal {font-style:normal;} /*斜體*/ p.italic {font-style:italic;} /*傾斜的文字*/ p.italic {font-style:oblique;}

字體大小的值可以是絕對或者相對的大小
絕對大小

設置一個指定大小的文本
不允許用戶在所有瀏覽器中改變文本大小
確定了輸出的物理尺寸時絕對大小很有用

相對大小

相對于周圍的元素來設置大小
允許用戶在瀏覽器中改變文字大小

如果不指定字體大小，默認大小和普通文本段落一樣，是16像素（16px=1em）

使用像素設置字體大小

h1 {font-size:40px;} h2 {font-size:30px;}

使用em來設置字體大小
測試

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style> h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */ p. </style> </head> <body><h1>標題1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>使用 em 單位，允許在所有瀏覽器中調整文本大小。不幸的是，仍然是IE瀏覽器的問題。調整文本的大小時，會比正常的尺寸更大或更小。 </p> </body> </html>

測試結果

使用百分比和em組合
在所有瀏覽器的解決方案中，設置<body>元素的默認字體大小是百分比

body {font-size:100%;} h1{ font-size:2.5em;} p {font-size:0.875em;}

css字體屬性列表

所有css字體屬性

屬性描述

font	在一個聲明中設置所有的字體屬性
font-family	指定文本的字體系列
font-size	指定文本的字體大小
font-style	指定文本的字體樣式
font-variant	以小型大寫字體或者正常字體顯示文本
font-weight	指定字體的粗細

css鏈接

不同的鏈接有不同的樣式。
鏈接的樣式，可以用任何css屬性，鏈接的狀態有

鏈接狀態含義

a:link	正常，未訪問過的鏈接
a:visited	用戶已經訪問過的鏈接
a:hover	當用戶鼠標放在鏈接上時
a:active	鏈接被點擊的那一刻

有一些順序規則：a:hover必須跟在a:link和a:visited之后；a:active必須跟在a:hover之后。

各種鏈接的樣式使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style>/*鼠標放到鏈接上時：改變顏色*/ a.one:link {color:#ff0000;} a.one:visited {color:#0000ff;} a.one:hover {color:#ffcc00;}/*鼠標放到鏈接上時：改變字體*/ a.two:link {color:#ff0000;} a.two:visited {color:#0000ff;} a.two:hover {font-size:150%;}/*鼠標放到鏈接上時：改變背景顏色*/ a.three:link {color:#ff0000;} a.three:visited {color:#0000ff;} a.three:hover {background:#66ff66;}/*鼠標放到鏈接上時：改變字體類型*/ a.four:link {color:#ff0000;} a.four:visited {color:#0000ff;} a.four:hover {font-family:Georgia, serif;}/*鼠標放到鏈接上時：改變文字修飾，這里是下劃線*/ a.five:link {color:#ff0000;text-decoration:none;} a.five:visited {color:#0000ff;text-decoration:none;} a.five:hover {text-decoration:underline;} </style> </head><body> <p>將鼠標移至鏈接上改變樣式.</p><p><b><a class="one" href="/css/" target="_blank">這個鏈接改變顏色</a></b></p> <p><b><a class="two" href="/css/" target="_blank">這個鏈接改變字體大小</a></b></p> <p><b><a class="three" href="/css/" target="_blank">這個鏈接改變背景顏色</a></b></p> <p><b><a class="four" href="/css/" target="_blank">這個鏈接改變字體類型</a></b></p> <p><b><a class="five" href="/css/" target="_blank">這個鏈接改變文字修飾</a></b></p> </body></html>

測試結果

創建鏈接框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style> a:link,a:visited {display:block;font-weight:bold;color:#FFFFFF;background-color:#98bf21;width:120px;text-align:center;padding:4px;text-decoration:none; } a:hover,a:active {background-color:#7A991A; } </style> </head><body> <a href="/css/" target="_blank">這是一個鏈接</a> </body> </html>

測試結果

css列表

css列表屬性作用如下

css列表屬性

設置不同的列表項標記未有序列表

設置不同的列表項標記為無序列表

設置列表項標記為圖像

不同的列表項標記：使用list-style-type屬性指定列表項標記的類型
無序列表ul，有序列表ol
使用如下

測試用例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head><body> <p>無序列表實例:</p><ul class="a"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ul><ul class="b"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ul><p>有序列表實例:</p><ol class="c"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ol><ol class="d"><li>Coffee</li><li>Tea</li><li>Coca Cola</li> </ol></body> </html>

測試結果

指定列表項標記為圖像，使用列表樣式圖像屬性

ul {list-style-image:url('squarepurple.gif'); }

總結

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

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

上一篇： JPA对象的持久化
下一篇： select 在各浏览器中显示optio