基礎(chǔ)選擇器
標(biāo)簽選擇器
1.選中的是一類標(biāo)簽,而不是單獨一個
<p>Hello,world</p>
p {
/* 文字顏色 */
color: #ff857f;
/* 文字大小 */
font-size: 30px;
/* 背景顏色 */
background-color: #fff;
/* 寬度 */
width: 200px;
/* 高度 */
height: 100px;
}
類選擇器
1.類名可以由數(shù)字泛啸、字母审残、下劃線、中劃線組成
2.一個標(biāo)簽可以同時有多個類名,類名之間以空格隔開
3.類名可以重復(fù),一個類選擇器可以同時選中多個標(biāo)簽
<p class="pink">粉色</p>
<p class="yellow">黃色</p>
<p class="blue">藍色</p>
.pink {
color: pink;
}
.yellow {
color: yellow;
}
.blue {
color: skyblue;
}
id選擇器
1.id屬性值在一個頁面中是唯一,不可重復(fù)的
2.所有標(biāo)簽都有id屬性
3.一個標(biāo)簽只能有一個id屬性值
4.一個id選擇器只能選中一個標(biāo)簽
<p id="green">綠色</p>
<p id="orange">橙色</p>
#green {
color: yellowgreen;
}
#orange {
color: tomato;
}
通配符選擇器
1.全部標(biāo)簽都會更改樣式
2.不需要調(diào)用,自動給所有元素使用樣式
3.特殊場景才使用(清除所有元素標(biāo)簽內(nèi)外邊距)
* {
margin: 0;
padding: 0;
}
字體屬性
字體大小:font-size(chrome默認文字大小16px)
<p>Hello,world</p>
p {
font-size: 20px;
}
字體粗細:font-weight
1.normal:正常字體=400
2.bold:粗體=700
3.bolder:特粗體
4.lighter:細體
<p>Hello,world</p>
p {
font-weight: 700;
}
字體樣式:font-style
1.normal:正常字體(默認值)
2.italic:斜體
<p>Hello,world</p>
p {
font-style: italic;
}
字體系列:font-family
1.從左往右按順序查找,如果電腦中未安裝該字體,則顯示下一個字體
2.如果都不支持,此時會根據(jù)操作系統(tǒng),顯示最后字體系列的默認字體
3.具體字體:"Microsoft YaHei"巡语、微軟雅黑唆铐、黑體、宋體爹耗、楷體等
4.字體系列:sans-serif耙考、serif、monospace等
<p>Hello,world</p>
p {
font-family: "Microsoft YaHei";
}
樣式的層疊
如果給同一個標(biāo)簽設(shè)置了相同的屬性,此時樣式會層疊,寫在最下邊的會生效
復(fù)合屬性:font
1.按順序書寫,并以空格隔開
2.順序:style weight size family
3.只能省略前兩個,后兩個不要省略(如果省略了取值,相當(dāng)于設(shè)置了默認值)
4.如果需要同時設(shè)置單獨和連寫形式,要么把單獨的樣式寫在連寫的下面,要么把單獨的樣式寫在連寫的里面
<p>Hello,world</p>
p {
font: italic bold 20px 宋體 serif;
}
文本屬性
文本縮進:text-indent
1.數(shù)字+px
p {
text-indent: 32px;
}
2.數(shù)字+em 1em=當(dāng)前標(biāo)簽的font-size的大小
p {
text-indent: 2em;
}
文本修飾:text-decoration
1.underline:下劃線
<p>Hello,world</p>
p {
text-decoration: underline;
}
2.overline:上劃線
<p>Hello,world</p>
p {
text-decoration: overline;
}
3.line-through:刪除線
<p>Hello,world</p>
p {
text-decoration: line-through;
}
4.none:無裝飾線
<a href="#">chrome</a>
a {
text-decoration: none;
}
文本水平對齊方式:text-align
1.left:左對齊
2.center:居中對齊
3.right:右對齊
注:給文本所在標(biāo)簽的父元素設(shè)置
<div class="title">
<a href="#">chrome</a>
</div>
.title {
text-align: center;
width: 100px;
height: 100px;
background-color: rgb(184, 245, 124);
margin: 0 auto;
}
