CSS前5課總結

時間 2019-11-09

標籤 css 總結欄目 CSS 简体版

原文原文鏈接

CSS《精通CSS.DIV網頁樣式與佈局》視頻前5課總結：css

地對地導彈html

第一課：api

使用CSS控制頁面：瀏覽器

1，行內樣式佈局

<p style="color:#0000FF; font-size:20px; text-decoration:underline;">正文內容</p>字體

2，內嵌式spa

p{orm

color:#0000FF; /*紫色*/視頻

text-decoration:underline; /*有下劃線*/

font-weight:bold; /*粗體*/

font-size:25px; /*字體大小*/

}

</style>

<body>

<p>紫色、粗體、下劃線、25px的效果1</p>

<p>紫色、粗體、下劃線、25px的效果2</p>

</body>

3，連接式
<link href="1.css" type="text/css" rel="stylesheet">

<body>

<h2>CSS標題1</h2>

<p>紫色、粗體、下劃線、25px的效果1</p>

<h2>CSS標題2</h2>

<p>紫色、粗體、下劃線、25px的效果2</p>

1.css文件:

H2{

color:#0000FF;

}

color:#FF00FF;

text-decoration:underline;

font-weigth:bold;

font-size:20px;

}

</body>

(注：

rel：relationship的英文縮寫.

REL屬性用於定義鏈接的文件和HTML文檔之間的關係。StyleSheet，的意思就是樣式調用，REL=StyleSheet指定一個固定或首選的樣式而REL="Alternate StyleSheet"定義一個交互樣式。

)

4，導入樣式

@import ur1(1.css);

</style>

第二課：CSS基本語法

CSS選擇器：

分類：

1，標記選擇器

<style>

h1{

color:red;

font-size:25px;

}

</style>

2，類別選擇器

.one{

color:red; /*紅色*/

font-size:18px; /*文字大小*/

}

.two{

color:green;

font-size:20px;
}

</style>

<body>

<p class="one">class選擇器1</p>

<p class="two">class選擇器2</p>

</body>

3，ID選擇器

<style>

#one{

font-weigth:bold; /*粗體*/

}

#two{

font-size:30px; /*字體30px*/

}

</style>

<body>

<p id="one">ID選擇器1</p>

<p id="two">ID選擇器2</p>

</body>

(注：ID能夠用在CSS中，也能夠用在JavaScript中，當在JS中用ID對html進行尋找時，若是同一個ID用在兩個標記中，將致使JS的語法混亂)

聲明：

1，集體聲明

h1,h2,h3,h4,h5,p{

color:purple; /*文字顏色*/

font-size:15px; /*字體大小*/

}

h2.special, .special,#one{

text-decoration:underline; /*下劃線*/

}

</style>

<body>

<h1>集體聲明h1</h1>

<h2 class="special">集體聲明h2</h2>

<h3>集體聲明h3</h3>

<h4>集體聲明h4</h4>

<h5>集體聲明h5</h5>

<p>集體聲明p1</p1>

<p class="special">集體聲明p2

<p id="one">集體聲明p3</p>

</body>

2，選擇器的嵌套

p b{ /*p標記中的b標記的樣式*/

color:maroon;

text-decoration:underline;

}

</style>

<body>

<p>嵌套使<b>用CSS</b>標記的方法</p>

嵌套以外的<b>標記</b>不生效

<body>

顯示效果：

CSS的繼承

若是一個標記被包含在另外一個標記中，則他會繼承前一個標記的樣式；

第三課：CSS文字效果

文字樣式

字體：font-family

<style>

h2{

font-family:黑體,幼圓;

}

font-family:Arial,Helvetion,sans-serif;

}

</style>

<body>

</body>

(注：解釋p{font=family:Arial,Helvetica,sans- serif;}——瀏覽器對字體進行檢測，若是有第一個字體Arial，則採用Arial，若是沒有則檢測是否有第二個字體Helvetica….若是這些字體都沒有，則採用瀏覽器默認字體)

文字大小：font-size

<style>

p.inch{font-size:0.5in;}

p.cm{font-size:0.5cm;}

p.mm{font-size:4mm;}

p.pt{font-size:12pt;}

p.pc{font-size:2pc;}

</style>

<body>

</body>

文字顏色：color

顏色的表示方法有不少中：

（1）RGB：紅藍綠

（2）16進製表示

（3）英文單詞

<style>

h2{ color:rgb(0%,0%80%;)}

color:#333333;

font-size:13px;

}

p span{ color:blue;}

</style>

<body>

<h2>冬至的由來</h2>

<p><span>冬至</span>過節源於漢代，盛於唐宋，相沿至今。《清嘉錄》甚至有「<span>冬至</span>大如年」之說</p>

</body>

（注：<span>標記：在CSS定義中屬於一個行內元素，在行內定義一個區域，也就是一行能夠被<span>劃分好幾個區域，從而實現某種特定效果。<span>自己沒有任何屬性。

<div>在CSS定義中屬於一個塊級元素。<div>能夠包含段落、標題、表格甚至其餘部分。這使DIV便於創建不一樣集成德類，如章節、或備註。在頁面效果上，使用<div>會自動換行，使用<span>就會保持同行）

文字粗細：font-weigth

(注：1，能夠採用數字，也能夠採用英文單詞；

2，bold:粗體；lighter：正常；

)

文字斜體：font-style

(斜體：italic；正常：normal)

下劃線、頂劃線、刪除線

(注：下劃線：text-decoration:underline;

頂劃線：text-decoration:overline;

刪除線：text-decoration:line-through;

閃爍：text-decoration:blink;)

(注：IE瀏覽器不支持「閃爍」的效果，只有firefox支持)

英文字母大小寫

(注：單詞首字母大寫：text-transform:capitalize;

所有大寫：text-transform:uppercase;

所有小寫：text-transform:lowercase; )

例子：模擬Google公司logo

<style>

font-size:80px;

letter-spacing:-2px; /*字母間距*/

font-family：Arial，Helvetica，sans-serif;

}

.g1,g2{ color:#184dc6;}

.o1,e{ color:#c61800;}

.o2{color:#efba00;}

.l{color:42c34a;}

</style>

<body>

</body>

段落文字

段落間水平對齊方式:

text-align:left(左對齊)/right(右對齊)/center(居中對齊)/justify(兩端對齊)

段落間垂直對齊方式：

vertical-align:top(頂端對齊)/bottom(底端對齊)/middle(中間對齊)

行間距、字間距：

line-height:1.5em;/*行間距，相對數值*/

line-height:8pt; /* 行間距，絕對數值,行間距小於字體大小*/

letter-spacing:-2px; /*字間距*/

首字放大：float：left; /*首字下沉*/

第四課 CSS圖片效果

圖片樣式

1，圖片邊框

(border-**)

<style>

img.test1{

border-style:dotted; /*點畫線*/

border-color:#FF9900; /*邊框顏色*/

border-weigth:5px; /*邊框粗細*/

}

img.test2{

border-style:dashed; /*虛線*/

border-color:blue;

border-width:2px;

/*或者使用一句：border:dashed 2px blue;*/

}

</style>

<body>

</body>

(注：還能夠對邊框的上下左右分別設置：

img.test2{

border-left:dashed 2px blue;

border-right:dotted 5px red;

}

)

2,圖片縮放

<style>

img.test1{

width:50%; /*相對寬度*/

}

</style>

<body>

</body>

(注：1，width:50%——相對寬度，寬度始終爲瀏覽器的50%；

width:80px——絕對寬度，不會隨着瀏覽器大小的變化而變化；

2，

若是寬度爲絕對值，高度爲相對值，則瀏覽器的寬高度發生變化時，寬度不變，高度隨着瀏覽器的變化而變化，實現縮放

)

圖片對齊

1，橫向對齊：text-align:left/center/right;

2，縱向對齊:vertical-align:baseline/bottom/middle/sub/super/text-bottom/text-top/top;

橫向對齊left、center、right的效果圖：

圖文混排

1，文字環繞

顯示效果：

2，設置圖片與文字的間距

第五課：CSS頁面背景

第六課：CSS設置表格和表單樣式

給出以下一個表格，分別設置表格的顏色、表格的邊框

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

顯示效果：

1，表格顏色

顯示效果：

2，表格邊框：border

顯示效果：

1. NeHe的OpenGl教程 - 前5課總結
2. 前端——CSS總結
3. CSS前端總結
4. css課程學習總結
5. 前端css基礎總結
6. 前端學習總結——CSS
7. 前端面試總結（css）
8. 前端—CSS基礎總結
9. 前端html,css總結
10. CSS總結四（前端一）
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 算法總結-雙指針
• 算法總結-回溯法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。