在前端入門的前三天把網頁制作過程中常用的一些標簽和屬性都認識和練習了一遍,能夠做出簡單模塊的框架。就像老師說的網頁制作就像建一棟大樓,html是磚和水泥,css是精裝,js是完善各個功能。現在就開始進入裝修步驟。
一:css的書寫形式
1.行內樣式
<p id="p1" style="color: red">他真的很喜歡你,像風吹了八千里</p>
優點:1.寫法簡單,2.優先級高
缺點:1.內容和樣式沒有分離,2.樣式沒有復用性,僅作用於當前元素,3.當屬性太多時布局不好看
2.內部樣式
</head>
<title>css入門</title>
<style>
p{
color: plum;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<p>他真的很喜歡你,像風吹了八千里</p>
</body>
</html>
3.外部樣式
在工程中新建css文件,用
<link rel="stylesheet" href="../../css/first.css">
引入所寫的樣式
優點:1.css,html完全分離,2.css得到充分復用
缺點:要說缺點應該就是打開另外一個文件寫起來需要來回切換吧
二:語法:
選擇器{
屬性設置
}
常用選擇器類型:
元素選擇器:直接寫元素名稱,選中的是當前頁面所有同名元素,不能單獨設置
類選擇器:在標簽中寫class=””,在style中用.class名,類選擇器的優先級比元素優先級高,同一個class名可以在不同標簽中使用
Id選擇器:在標簽中寫id=””,在style中寫#id名,每一個id只能用一個
並集選擇器:中間用逗號隔開,適用於要對多個標簽進行相同的屬性設置
后代/子代選擇器:后代選擇器: 空格 范圍大;子代選擇器:> 范圍小某些樣式會被子代后代繼承如color,有些則不會,如height
偽類選擇器:用冒號來使用偽類選擇器
first-child:第一個元素
first-child:最后一個元素
nth-child(n):第n個元素
<style>
li:nth-child(2n){
color: red;
}
li:nth-child(2n-1){
color: yellow;
}
</style>
此時li中偶數位置字體顏色變為紅色,奇數位置字體為黃色
hover:鼠標移上
通用選擇器:*:通配符選擇器匹配當前界面所有元素,一般只用在margin: padding中
<style>
*{
margin: 0;
padding: 0;
}
<style\>
優先級:
在正常的引入順序下(先引入外部,再引入內部)優先級(就近原則)的順序為:行樣式>內部樣式>外部樣式
特殊情況:
引入在內部之后則由於就近原則執行外部屬性權值:內聯樣式+1000分(style),id選擇器100,class選擇器10,元素選擇器
分數越高則優先權越高
!important 優先級高於行樣式