css的組成部分：選擇器和聲明
css的注釋：
/*這是注釋*/
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<style>--> <!--p {color:green}--> <!--</style>--> 在head里面添加style標簽 <link rel="stylesheet" href="scc.css"> 創建一個stylesheet文本，在文本中寫css樣式，然后在head鏈接，href是文本名字 </head> <body> <!--<p style="color:red">Hello World!</p>--> 在標簽里邊直接添加style，不建議 <p>Hello World!</p> </body> </html> css存在的位置
css選擇器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 {color:red} /*id是p1的標簽#==id*/ #p2 {color:darkgreen} /*id是p2的標簽*/ div {color: blue;} /*所有的div標簽*/ .c1 {color:yellow} /*class為c1的標簽.==class*/ i.c1 {color:orangered} /*i標簽中class為c1的標簽*/ * {color:purple} /*通用*/ </style> </head> <body> <p class="c1">p標簽在此</p> <p>p標簽在此</p> <p id="p1">p標簽在此</p> <p>p標簽在此</p> <p id="p2">p標簽在此</p> <p>p標簽在此</p> <div>我是單行的啊</div> <div>我是單行的啊</div> <div>我是單行的啊</div> <hr> <span>我只在一行</span> <span class="c1">我只在一行</span> <p class="c1 c2 c3 c4">p標簽</p> <i class="c1">傾斜一下</i> </body> </html> 基本選擇器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li>a {color:red} /*找兒子標簽，li里面的a*/ #d1 p {color:green} /*在id=d1中找到所有的p，子子孫孫的找*/ div+p {color:blue} /*毗鄰尋找，找下面的第一個*/ #d2~a {color:yellow} /*弟弟選擇器，id=d2所有的a標簽*/ </style> </head> <body> <ul> <li><a href="">11111</a></li> <li><a href="">22222</a></li> <li><a href="">33333</a></li> </ul> <ol> <li><p><a href="">哈哈</a></p></li> </ol> <div id="d1"> <div> <div> <p>ppppp</p> </div> <p>pppppp</p> </div> <p>兒子標簽</p> </div> <p>div上面的p標簽</p> <div>我是div</div> <p>div下面的p標簽</p> <p>下下面</p> <div id="d2">d222</div> <p>d2下面的</p> <a href="">呵呵</a> <p>呵呵你一臉</p> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div[pg] {color: red} /*找到所有有pg屬性的標簽*/ div[pg='hh2'] {color:green} /*找到pg屬性值是hh2的標簽*/ div[title*='hello'] {color:yellow} /*所有字符串里有hello的值*/ div[title~='hello'] {color:blue} /*所有屬性值被空格分割得到的列表中是否有hello*/ </style> </head> <body> <div pg="hh">野豬佩奇</div> <div pg="hh2">野豬佩奇</div> <div>野豬佩奇身上紋</div> <div title="helloworld">helloworld</div> <div title="hello world">hello world</div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> <!--#d1 {color: red}--> <!--.p1 {color: red}--> 和下面這一句相等，可以合在一起 #d1, .p1 {color:red} </style> </head> <body> <div id="d1">divvvv</div> <p class="p1">pppp</p> <p>我也是p</p> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link {color:red} /*沒有訪問的，訪問過后就會變成visited*/ a:visited {color:green} /*已經訪問的鏈接*/ a:active {color:purple} /*鼠標點上去的時候*/ span:hover {color: blue} /*鼠標懸浮上去之后顯示*/ input:focus {background-color: yellow} /*input輸入框點進去要輸入時改變*/ </style> </head> <body> <a href="https://www.baidu.com">訪問過得</a> <a href="https://NBA.com">沒有訪問</a> <span>我是span標簽</span> <label> <input type="text"> </label> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div.c1:first-letter {color:red;font-size:48px} /*div標簽中class為c1的第一個字*/ p:before {content:'小學僧';color:blue} /*在p標簽內容的前面加上*/ p:after {content:'[!]';color: green} /*在p標簽內容的后邊加上*/ </style> </head> <body> <div class="c1">我蒙上自己的雙眼,只想記住最后看你的那一眼。我刺瞎自己的雙眼只為記住那逝去的紅顏。</div> <p>我蒙上自己的雙眼,只想記住最后看你的那一眼。我刺瞎自己的雙眼只為記住那逝去的紅顏。</p> <p>我蒙上自己的雙眼,只想記住最后看你的那一眼。我刺瞎自己的雙眼只為記住那逝去的紅顏。</p> <p>我蒙上自己的雙眼,只想記住最后看你的那一眼。我刺瞎自己的雙眼只為記住那逝去的紅顏。</p> <p>我蒙上自己的雙眼,只想記住最后看你的那一眼。我刺瞎自己的雙眼只為記住那逝去的紅顏。</p> <p>我蒙上自己的雙眼,只想記住最后看你的那一眼。我刺瞎自己的雙眼只為記住那逝去的紅顏。</p> <p>我蒙上自己的雙眼,只想記住最后看你的那一眼。我刺瞎自己的雙眼只為記住那逝去的紅顏。</p> </body> </html>
css選擇器的優先級
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 {color:orange} /* 100 */ .c1>.c2 {color:yellow} /* 多一個類多10，但是不會翻身 20 */ .c2 {color: green} /* 10 */ p {color: blue} /* 1 */ /*p {color: blue !important}*/ /* 加上!important則為不講道理的顯示 */ </style> </head> <body> <div class="c1" > <p class="c2" id="p1" >c1內部的p標簽</p> <!--<p class="c2" id="p1" style="color:red">c1內部的p標簽</p>--> <!--直接在標簽內部指定的優先級為1000--> </div> </body> </html>
css屬性相關
寬和高：width屬性可以為元素設置寬度。
height屬性可以為元素設置高度。
塊級標簽才能設置寬度，內聯標簽的寬度由內容來決定。
字體屬性
文字字體：font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。
字體大小：如果設置成inherit表示繼承父元素的字體大小值
字重（粗細）：font-weight用來設置字體的字重（粗細）。
normal——默認值，標准粗細
bold——粗體
bolder——更粗
lighter——更細
100~900——設置具體粗細，400等同於normal，而700等同於bold
inherit——繼承父元素字體的粗細值
文本顏色
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：
十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間。
文字屬性
文字對齊方式：text-align 屬性規定元素中的文本的水平對齊方式。
left——左邊對齊 默認值
right——右對齊
center——居中對齊
justify——兩端對齊
文字裝飾：text-decoration 屬性用來給文字添加特殊效果
none——默認。定義標准的文本。
underline——定義文本下的一條線。
overline——定義文本上的一條線。
line-through——定義穿過文本下的一條線。
inherit——繼承父元素的text-decoration屬性的值。
常用的為去掉a標簽默認的自划線：a {text-decoration: none;}
首行縮進：將段落的第一行縮進 32像素p {text-indent: 32px;}
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body {font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif} span {font-size: 48px} div {font-weight: bold;color:rgb(251,97,19);text-align: center} /*字體寬度，顏色，中間對齊*/ p {font-size: 14px;text-decoration: overline;text-indent: 28px} a {text-decoration: none} a:hover {text-decoration: underline} </style> </head> <body> <div>div</div> <span>sssssssssss</span> <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p> <a href="">超鏈接</a> </body> </html>