HTML學習完成以后，我們就要開始學習CSS的相關知識，CSS是用來修飾網頁內容的一種語言，
層疊樣式表（Cascading Style Sheets，縮寫：CSS），是一種樣式表語言，描述如何顯示HTML元素，
引入方式
1.行內/行內
<p style='color:red;'>使用style屬性</p>
2.內部樣式
在head標簽里面添加style標簽里寫樣式
<head> <title>嵌入式</title> <style type='text/css'> p{ font-size: 18px; color: red; } </style> </head>
3.外部樣式表
創建一個擴展名.css的檔案，在這個檔案中寫樣式，在head里面引入樣式檔案，
<head> <title>外部樣式表</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
CSS語法
規則是由選擇器和多條宣告（屬性：值）陳述句組成
p { color: red; font-size: 16px; }
Id和Class選擇器
id 選擇器是為有特定 id 的元素指定樣式，
class 選擇器是用于一組元素的樣式，
#idName { color:red; } .className { color:red; }
樣式常用屬性
背景：background-color（image，repeat，position，attachment）
字體：font，font-size（family，style，weight）
文本：color，line-height，text-align（shadow，indent），vertical-align，white-space，world-sapcing
串列：list-style，list-style-type，list-style-image，list-style-position
鏈接：a:link，a:hover，a:active，a:visited
邊框：border，border-style（width，corlor，bottom，left，right，top）
外邊距：margin，margin-top（right，bottom，left）
內邊距：padding，padding-top（right，bottom，left）
顯示：display：inline/block/inline-block
定位：position：static/relative/fixed/absolute/sticky
浮動：float：left/right/none clear：left/right/none/both
屬性選擇器
[title] { color:red; } /* 相等的值 */ [title=test] { border: 2px solid blue; } /* 包含指定的值 */ [title~=hello] { color:blue; } /* 開頭為指定的值 */ [lang|=en] { color:blue; } /* 結尾為指定的值 */ [lang&=test] { color:blue; }
CSS組合嵌套
/* 組合，多個名稱逗號（,）分隔 */ .test1, .test2 { color: red; } /* 嵌套，多個名稱空格分隔*/ .test p { color: blue; }
CSS注釋
/* * 這是body的樣式 */ body{ width: 100%; /* 設定寬100% */ height: 100%; margin: 0px; padding: 0px; }
CSS偽類
偽類選擇元素基于的是當前元素處于的狀態，或者說元素當前所具有的特性，如：
a:link，a:hover，a:active，a:visited，:first-child，:first-of-type，:checked，:disabled，:focus
CSS偽元素
偽元素是對元素中的特定內容進行操作，它所操作的層次比偽類更深了一層
::after，::before，:first-line，:first-letter
CSS優先級
!important > 行內樣式 > ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性
一般我們使用這個方法計算權重：
行內樣式權值=1000，ID選擇器權值=100，類選擇器權值=10，標簽選擇器權值=1
根據樣式的規則把權值做加法，值越大優先級越高，
文章內容如果寫的存在問題歡迎留言指出，讓我們共同交流，共同探討，共同進步~~~
文章如果對你有幫助，動動你的小手點個贊，鼓勵一下，給我前行的動力，
作者：zeke
出處：http://zhf.cnblogs.com/
本文著作權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/308416.html
標籤：其他
上一篇：element-ui修改dialog彈框事件，實作dialog背景模糊效果
下一篇：css超出部分...顯示