使用CSS渲染頁面
1. 規(guī)則记舆、屬性和值
1) 內聯(lián)樣式
十分不推薦，無法對樣式進行替換
<h1 style="color: red">Hello, world</h1>
2) 內部樣式表
通常只在首頁使用，保證頁面加載完成后能夠正常渲染
<style>
/* 通配符選擇器(*作用于所有的標簽) */
* {
/* 外邊距 */
margin: 0;
/* 內邊距 */
padding: 0;
}
/* 并列關系選擇器 */
.h1_1,
.h1_2,
.h1_3,
.h1_4,
.h1_5,
.h1_6,
.h1_7 {
height: 50px;
}
/* 標簽選擇器 */
h1{
color: red;
}
/* 類選擇器 建議使用*/
.h1_1 {
color: red;
/* 上 右 下 左 */
margin: 0 350px 20px 350px;
}
/* id選擇器 一般不推薦使用*/
#foo {
color: green;
}
</style>
3) 外部樣式表
推薦使用，實現(xiàn)代碼復用研儒，保持統(tǒng)一風格
<link rel="stylesheet" href="css/style.css">
4) 樣式沖突
樣式表中書寫的作用于同一個標簽的樣式如果沒有任何沖突就會疊加
如果作用于同一個的標簽的樣式發(fā)生了沖突那么按照以下三條原則絕定誰生效:
- 就近原則
- 具體性原則(ID選擇器 > 類選擇器 > 標簽選擇器 > 通配符選擇器)
- 重要性原則(!important)
5）字體、顏色独令、文本及間距的使用
<style>
h1 {
font-size: 3em;
/* 斜體 */
font-style: italic;
/* 拉伸 */
font-stretch: ultra-condensed;
/* 字間距 */
letter-spacing: 5px;
color: white;
/* 文字居中 */
text-align: center;
line-height: 80px;
/* 指定多種字體時英文字體放在前面,中間用逗號隔開 */
font-family: "Times New Roman", "WeibeiSC-Bold" !important;
/* 溢出處理 */
overflow: hidden;
/* 文本陰影 */
text-shadow: 4px 4px #000000;
/* 文本裝飾 */
text-decoration: underline;
}
.photo {
/* 圓角 */
border-radius: 40px;
}
p {
text-indent: 32px;
width: 720px;
height: 260px;
overflow: scroll;
margin: 0 auto;
border: 10px double orange;
border-radius: 10px 20px 30px 40px;
padding: 0 20px;
}
/* 樣式表的偽元素 */
p:first-letter {
font-size: 64px;
}
p:first-line{
font-size: 32px;
}
</style>
