1.CSS樣式的層疊性
層疊性就是說對同一個文本進行設置的時候最后設置的樣式會覆蓋掉前面設置的樣式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS樣式的層疊性</title>
<style>
.demo {
width: 200px;
height: 200px;
background-color: red;
}
.desc {
background-color: green;
}
.demo {
background-color: black;
}
</style>
</head>
<body>
<div class="demo desc">
</div>
</body>
</html>
效果如下
層疊性
2.CSS的復合樣式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中的復合樣式的設置方法</title>
<style>
.demo {
height: 200px;
width: 200px;
/*進行復合樣式的設置*/
background: 20px 20px url("../imageSource/eg_bulbon.gif") gray no-repeat;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
3.CSS中的display
在CSS中可以用display將一個行內(nèi)標簽變成塊級標簽，簡單的說塊級標簽就是獨占一行的標簽。行內(nèi)標簽可以和其他標簽公用一行。
在這里要注意行內(nèi)標簽和塊級標簽有以下區(qū)別:
區(qū)別
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display對標簽進行設置</title>
<style>
/*用display可以將塊級標簽變成行內(nèi)標簽*/
span {
background-color: aquamarine;
display: block; /*將行內(nèi)標簽變成塊級標簽*/
display: none;/*講一個標簽的display標記為none代表的是將這個標簽移除掉*/
}
.strong {
background-color: #ff558a;
display: block;
visibility: hidden;/*將這個標簽的可見性設置為隱藏,但是還會占用界面的空間!*/
}
strong {
height: 200px;/*行內(nèi)標簽無法設置寬高,只能靠行內(nèi)標簽的文本中的內(nèi)容的多少來撐開它的寬高*/
background-color: darkgrey;
}
/*行內(nèi)塊和塊級標簽是可以設置寬和高*/
div {
background-color: darkgreen;
height: 400px;
}
/*div本身是一個塊級標簽但是用display將它設置為行內(nèi)塊標簽*/
.demo {
display: inline-block;
background-color: chartreuse;
height: 800px;
}
</style>
</head>
<body>
<!--行內(nèi)標簽--可以和其它標簽共用一行-->
<strong class="strong">這是一個strong標簽</strong>
<strong>這是第二個strong標簽</strong>
<span>這是一個span標簽</span>
<!--塊級標簽---獨占一行的標簽-->
<div>這是一個div標簽</div>
<div class="demo">
這是一個行內(nèi)塊標簽
</div>
</body>
</html>
4.顏色的設置的幾種方式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顏色設置的幾種方式</title>
<style>
div {
background-color: red;/*直接設置顏色的樣式 缺點:有些顏色無法用這種方式設置*/
}
span {
background-color: rgb(30,99,178);/*rgb三原色組合的顏色設置方式*/
}
p {
background-color: #3099B2;/*16進制顏色設置方式,r=30 , g=99, b=b2(超過100的數(shù)用16進制數(shù)表示),這種方法基于rgb設置法*/
}
</style>
</head>
<body>
<div>
第一種顏色的設置方式
</div>
<span>第二種顏色的設置方式</span>
<p>第三種顏色的設置方式</p>
</body>
</html>
5.字體的格式設置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字體的格式設置</title>
<style>
p {
font-family: "微軟雅黑";
}
span {
font-family: "黑體","Apple Color Emoji";
font-family: "Arial";
}
</style>
</head>
<body>
<p>這是第一個段落標簽</p>
<span>這是第二個段落標簽</span>
<div>這是第三個段落標簽</div>
<strong>這是第四個段落標簽</strong>
</body>
</html>
6.字體樣式的設置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字體樣式的設置</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<p>
這是一段用來演示的demo
</p>
</body>
</html>
7.設置字間距
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>設置字間距</title>
<style>
.demoOne {
/*對中文和英文都有影響*/
letter-spacing: 10px;
}
.demoTwo {
/*只會對英文的字間距產(chǎn)生影響*/
/*注意如果中文之間有空格的話那么這個空格的間距會變成30px*/
word-spacing: 30px;
}
</style>
</head>
<body>
<p class="demoOne">
這是一段測試文本,百度網(wǎng)址是:http://www.baidu.com
</p>
<p class="demoTwo">
這是第二段 測試文本, I am iron man
</p>
</body>
</html>
