第三节 入门属性
1.七個基本屬性
顏色:color,背景顏色:background-color,字體大小:font-size,加粗:font-weight:bold,傾斜:font-style:italic, 文字居中:text-align:center,下劃線:text-decoration:underline。
2.相對路徑的寫法
? ?
?? 分兩種情況:(原理都是先找被連接文件所在的與自己最近的父容器)
? ? ?a: ?test1.html中請求test2.html。 ??
? ? ? ? ? <a?href="../../02/021/test2.html">點我測試相對路徑1</a>
? ? ?b: test1.html中請求test3.html
? ? ? ? ? <a?href="0111/01111/test3.html">點我測試相對路徑3</a>
3.七個基本選擇器
???1. 標簽選擇器
? ? ? ? ?
? ?2. id選擇器
? ? ? ? ?? ? ? ?
? ?3. 類選擇器
? ? ? ??
? ?4. 后代選擇器
? ? ? ? ? ?
? ? ? ? ? ??
? ? ??? ??空格代表后代, .div1 p 就可以選中所有的p標簽了,類似的寫法 :div li p ?; ? ?ul li p ?等等
? ???5. 交集選擇器
? ? ? ? ? ??
? ? ? ? ? 控制的是??h3標簽,且具有special標簽。eg: <h3 class="special" />
? ? ? ? ?注意:
? ? ? ?1. 交集選擇器可以連續交(一般不要這么寫)
? ? ? ?2.交集選擇器,我們一般都是以標簽名開頭,比如div.haha??比如p.special。
? ? ?6. 并集選擇器(分組選擇器)
? ? ? ? 用逗號就表示并集
? ??
? ? ? ? ? ??等于 ? ?
? ? ? ? ??? ? h3{
? ? ? ? ? ? ? ? ? ? color:red;
? ? ? ? ? ? ? ? }
?? ? ? ? ? ? ? li{
? ? ? ? ? ? ? ? ? ? color:red;
? ? ? ? ? ? ? ? }
?
? ? ?7.通配符? ????
? ? *就表示所有元素?
? 效率不高,如果頁面上的標簽越多,效率越低,所以頁面上不能出現這個選擇器。
4.四個CSS3選擇器
? ? ??
? ? ? ??
5. 行高
???1. 用line-height表示,padding的作用范圍是行高,不是字號。如:
? ??
? ?2. 單行文本居中的方法:令行高等于高度。
? ?3. 多行文本居中的方法:padding-top=(原Height-行高*行數)/ 2 ? ; ?新Height=原Height-padding-top。
6. font
???1. font為一個綜合屬性,可以拆分為font-style、font-variant、font-weight、font-size、line-height、font-family,分別用來設置樣式(傾斜)、小型大寫字母、字號、行高、字體五個屬性。
2. 其中font-size和font-family是不可以忽略的,font-size和line-height可以寫在一起,其中行高可以用百分比來表示,表示是字號的倍數。
? 3. font-weight是用來設置加粗的,bold等價于700。
7. a標簽
??1. a標簽包括4個偽類選擇符,分別是link、visited、hover、active,分別代表沒有點擊過、訪問過、鼠標懸浮在上面、鼠標點擊不松手。
??
?2. a標簽的美化的兩種形式
?(1). 常規寫法
?
??(2). 簡化寫法
? ?a:link、a:visited都是可以省略的,簡寫在a標簽里面。也就是說,a標簽涵蓋了link、visited的狀態
? ?
8. background
??1. background是一個復合屬性,包括background-color、background-image、background-repeat、background-position、background-attachment(background-origin、background-clip、background-size)。
? 2.?background-color:設置背景顏色。
? ? ?三種表示方法:單詞、十六進制、rgb()。
? ? ?
?
? 3.?background-image:設置背景圖片
? ??
??4.?background-repeat:設置背景圖是否重復
? ??
??5.?background-position:設置背景圖的位置。
? ? ? 一種通過數值來控制,一種通過單詞來控制。
? ? ?
? 6.?background-attachment:fixed。
? ? ? 背景固定住,不隨滾動條而移動。
? 7. 綜合寫法
background:red url(1.jpg) no-repeat 100px 100px fixed;
屬性的順序可以隨意寫,個數也可以隨意,但background-position對應的兩個位置,必須要寫在一塊。
?
總結
- 上一篇: MVC和WebForm区别
- 下一篇: 今年我国GDP有望实现继续增长,但有一个