CSS小結
CSS css
37，文字樣式 html
<style> 瀏覽器
p{ 佈局
font-size:20px;/*設置文字字號*/ 字體
color:red;/*設置文字顏色*/ spa
font-weight:bold;/*設置字體加粗*/ orm
} htm
</style> 對象
38，修改指定樣式 圖片
<style type="text/css">
span{
color:blue;
}
</style>
<p>慕課網，<span>超酷的互聯網</span> </p>
39,CSS代碼語法
p{ //選擇符
font-size:12px; //聲明
color:red;
font-weight:bold;
}
被<p> </p>所包含文字能實現所要效果
40，代碼註釋
/*註釋文字*/
41，內聯式CSS樣式
<p style="color:red;font-size:12px">這裏文字是紅色。</p>
42,外部式CSS
把css代碼寫一個單獨的外部文件中，這個css樣式文件以「.css」爲擴展名，在<head>內（不是在<style>標籤內）使用<link>標籤將css樣式文件連接到HTML文件內，以下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
1、css樣式文件名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標籤位置通常寫在<head>標籤以內。
43，三種方法的優先級
內聯式 > 嵌入式 > 外部式。。離被設置元素越近優先級別越高）。
44，標籤選擇器：
<style>
body{ //選擇的對象，那個標籤包含的東西
font-size:12px;
color:blue;
}
</style>
類選擇器：爲選中的一段文字設置格式，在一個html文檔中可使用屢次，設置多個樣式
<span class=」text」> 選中字段 <span>
.text{
CSS樣式代碼
}
ID選擇器 :在一個html文檔中只能使用一次，只能設置一個樣式
<span id=」stress」 > 選中文本 </span>
#stress{
CSS式樣
}
子選擇器 //僅是第一代後代
.food>li{
} //類food 下爲li的子元素實現CSS效果
後代選擇器 //全部food類的後代
.food li{
}
通用選擇器
*{
} //將html 下全部標籤元素全都設置
僞類選擇符
a:hover{ //標籤爲a鼠標滑過期的字體式樣
color:red;
}
分組選擇器
h 1,span { //爲多個標籤元素設置一個式樣
}
45,行間距 : line-height:1.4em
字體粗細： font-weight:normal
邊框：border：1px solid red; //邊框粗細爲1px，紅色的實線
46,重要性
設置最高權值
p{color:red!important;}
p{color:green;}
47，文字排版
body{font-family:"微軟雅黑";}
2，粗體 a{font-weight:bold;}
3斜體 a{font-style:italic;}
4 下劃線a{text-decoration:underline;}
5刪除線 text-decoration:line-through;
6，段落排版-縮進p{
text-indent:2em; //在段落前面空兩個字的大小
}
7.行間距 p{line-height:2em;}
8，字間距、字母間距
letter-spacing:50px;
英文單詞間距
word-spacing:50px;
9，段落排版-對齊:爲塊狀元素中的文本、圖片設置對齊格式
text-align:center; 居中
text-align:left; 居左
text-align:right ； 居右
10，背景色： backgroud：pink
48,元素
1） 轉換爲塊級元素 a{display:block;}
2） 轉爲內聯元素 display:inline
內聯元素特色：
1、和其餘元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
3)內斂塊狀元素
Display:inline-block
inline-block 元素特色：
1、和其餘元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距均可設置。
49,盒模型
1）邊框div{
border:2px solid red;
}
或
div{
border-width:2px;
border-style:solid;
border-color:red;
}
border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）。
僅設置一個方向的邊框樣式
div{border-bottom:1px solid red;}
2) 填充：邊框與內容之間
順序：上右下左 (順時針)
div{padding:20px 10px 15px 30px;}
3) 邊界：元素與元素之間的距離
div{margin:20px 10px 15px 30px;} 順時針
至關於 div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
總結一下：padding和margin的區別，padding在邊框裏，margin在邊框外。
50,流動模型
在默認狀態下，塊狀元素的寬度都爲100%」。，獨佔一行
內聯元素標籤a、span、em、strong 從左到右水平分佈
51，浮動模型
實現兩個塊狀元素並排顯示
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
<div id="div1"></div>
<div id="div2"></div>
52，層模型—絕對佈局
相對與瀏覽器設置元素位置
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
層模型—相對定位：相對之前的位置移動
position:relative;
層模型-固定定位：相對於瀏覽器的視圖，始終會在瀏覽器的某個位置不動，隨滾動而滾動
ReLATIVE與Absolute組合使用:實現對選定參照系的相對位置移動
、參照定位的元素必須是相對定位元素的前輩元素：參照定位的元素必須加入position:relative; 、定位元素加入position:absolute，即可以使用top、bottom、left、right來進行偏移定位了。
53,盒模型代碼的簡寫
一般有下面三種縮寫方法:
1、若是top、right、bottom、left的值相同，以下面代碼：
margin:10px 10px 10px 10px;
可縮寫爲：
margin:10px;
2、若是top和bottom值相同、left和 right的值相同，以下面代碼：
margin:10px 20px 10px 20px;
可縮寫爲：
margin:10px 20px;
3、若是left和right的值相同，以下面代碼：
margin:10px 20px 30px 20px;
可縮寫爲：
margin:10px 20px 30px;
注意：padding、border的縮寫方法和margin是一致的。
54，顏色值縮寫
十六進制：當設置的每兩位顏色值相同能夠縮寫成一位
55，字體縮寫
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
這麼多行的代碼其實能夠縮寫爲一句：
body{
font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
注意：
1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其餘的屬性(如 font-weight、font-style、font-varient、line-height)如未指定將自動使用默認值。
2、在縮寫時 font-size 與 line-height 中間要加入「/」斜扛。
56，顏色值
字體顏色 color
背景顏色 background-color
邊框 border
1>、英文命令顏色
前面幾個小節中常常用到的就是這種設置方法：
p{color:red;}
2>、RGB顏色
這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。
p{color:rgb(133,45,200);}
每一項的值能夠是 0~255 之間的整數，也能夠是 0%~100% 的百分數。如：
p{color:rgb(20%,33%,25%);}
3>、十六進制顏色
這種顏色設置方法是如今比較廣泛使用的方法，其原理其實也是 RGB 設置，可是其每一項的值由 0-255 變成了十六進制 00-ff。
p{color:#00ffff;}
57,長度值
1> 像素
px
2> em
p{font-size:12px;text-indent:2em;} //首行縮進2個字體
若是字體大小爲12px，那麼1em=12px
3> 百分比
p{font-size:12px;line-height:130%}
若字體大小指定爲12px,那麼百分比就是以這個大小爲基礎的比值
58，水平居中
設置文本或者圖片居中
<body>
<div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</div>
</body>
css代碼：
<style>
div.txtCenter{
text-align:center;
}
</style>
水平居中設置-定寬塊狀元素
：爲塊狀元素設置爲居中
html代碼：
<body>
<div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>
</body>
css代碼：
<style>
div{
border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/
width:500px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
}
</style>
定寬與設置缺一不可
- 1. css 3D小結
- 2. CSS小總結
- 3. css 小總結
- 4. css 小結
- 5. css position小結
- 6. HTML & CSS 小總結
- 7. CSS效果小結
- 8. CSS重點小結
- 9. CSS 佈局小結
- 10. css居中小結
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 算法總結-雙指針
- • 算法總結-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
- 1. css 3D小結
- 2. CSS小總結
- 3. css 小總結
- 4. css 小結
- 5. css position小結
- 6. HTML & CSS 小總結
- 7. CSS效果小結
- 8. CSS重點小結
- 9. CSS 佈局小結
- 10. css居中小結