前端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的適用另一種樣式。
測試結果
class選擇器
class選擇器用于描述一組元素的樣式，class選擇器有別于id選擇器，class可以在多個元素中使用。class選擇器在html中以class屬性表示，在css中，類選擇器以一個點“.”表示。
類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。測試用例
所有的 p 元素使用 class=“center” 讓該元素的文本居中，而h3元素使用class="center"沒有效果
測試結果
css創建
當讀到一個樣式表時，瀏覽器會根據它來格式化html文檔。
插入樣式表有3種方法
| 外部樣式表（External style sheet） |
| 內部樣式表（Internal style sheet） |
| 內聯樣式（Inline style） |
外部樣式表
當樣式需要應用于很多頁面時，外部樣式表是理想的選擇。使用外部樣式表，可以通過改變一個文件來更改整個站點的外觀。每個頁面使用<link>標簽鏈接到樣式表。在head中使用
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </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屬性
舉例：改變段落的顏色和左外邊距
多重樣式
如果某些屬性在不同樣式表中被同樣的選擇器定義，那么屬性值就從更具體的樣式表中繼承過來。例如，外部樣式表有針對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"
測試結果
下面的例子中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-position屬性改變圖像在背景中的位置
body {background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;margin-right:200px; } </style>背景-簡寫屬性
在上面的學習中，控制頁面的背景顏色使用了很多屬性，為了簡化屬性代碼，可以把屬性合并到同一個屬性中，背景顏色的簡寫屬性為background
實例
使用簡寫屬性的順序如下
| 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
測試結果
文本的對齊方式
文本排列屬性是用來設置文本的水平對齊方式，文本可居中，左端對齊，右端對齊，兩端對齊。當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>測試結果
還有下面裝飾文字的用法：分別是上劃線，刪除線，下劃線。
測試用例
<!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;}測試用例
測試文本轉換
測試結果
測試用例
測試首行縮進
測試結果
css字體
css字體屬性定義字體、加粗、大小、文字樣式。
css字型
在css中，有兩種類型的字體系列名稱
字體系列
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來設置字體大小
測試
測試結果
使用百分比和em組合
在所有瀏覽器的解決方案中，設置<body>元素的默認字體大小是百分比
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之后。
<style>a:link {color:#000000;}/*未訪問鏈接*/a:visited {color:#00ff00;}/*已訪問鏈接*/a:hover {color:#ff00ff;}/*鼠標移動到鏈接上*/a:active {color:#0000ff;}/*鼠標點擊時*/ </style>各種鏈接的樣式使用
<!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列表屬性作用如下
| 設置不同的列表項標記未有序列表 |
| 設置不同的列表項標記為無序列表 |
| 設置列表項標記為圖像 |
不同的列表項標記：使用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'); }總結
- 上一篇： JPA对象的持久化
- 下一篇： select 在各浏览器中显示optio