03_CSS入門和高級技巧(1)
上節課知識的複習
插入圖片，頁面中可以插入的圖片類型：jpg、jpeg、bmp、png、gif；不能的psd、fw。css
語法：html
<img src=」路徑」 alt=」替代文字」 />
相對路徑、絕對路徑：
相對路徑就是從html頁面出發，找到圖片：前端
<img src=」a/b/1.jpg」 />
等價於程序員
<img src=」./a/b/1.jpg」 />
圖片位於html文件較淺的文件夾中：瀏覽器
<img src=」../../../1.jpg」 />
絕對路徑：直接的門牌號。以http://開頭，或者以/開頭的都是絕對路徑。服務器
<img src=」http://www.163.com/images/logo.png」 />
本身的服務器根目錄：less
<img src=」/images/logo.png」 />
超級連接
a標籤，語法：性能
<a href=」地址」 title=」懸停文字」 target=」_blank」>連接的文字</a>
超級連接還能作頁面錨點學習
<a name=」info」></a>
此時就能用1.html#info來直接看見這個內容字體
表單
form標籤裏面，這個標籤咱們在Ajax課程上詳細介紹。
input類型：
text、password、radio、checkbox、submit、button、reset
下拉框：
select、option
多行文本框：
textarea
單選框若是想互斥，必需要有相同的name屬性。若是想點擊文字，就能勾選，就要有label
<input type=」radio」 name=」sex」 id=」male」 /> <label for=」male」>男</label>
無序列表、有序列表、定義列表
注意嵌套的寫法，ul的兒子只能是li，ul的孫子是誰無所謂：
<ul> <li> <h3></h3> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li></li> <li></li> <li></li> </ul>
表格
1.表格的基本使用
<table border="1"> <tr> <td>第1行，第1個小格。</td> <td>第1行，第2個小格。</td> <td>第1行，第3個小格。</td> <td>第1行，第4個小格。</td> </tr> <tr> <td>第2行，第1個小格。</td> <td>第2行，第2個小格。</td> <td>第2行，第3個小格。</td> <td>第2行，第4個小格。</td> </tr> <tr> <td>第3行，第1個小格。</td> <td>第3行，第2個小格。</td> <td>第3行，第3個小格。</td> <td>第3行，第4個小格。</td> </tr> </table>
若是有表頭的語義，那麼應該書寫th替換td。也就是說td和th都是小格格。
2.表格單元格的合併
單元格的合併，單元格的合併屬性，colspan、rowspan。必定要寫在td或者th上，tr是沒有這兩個屬性的。
colspan咱們叫作列跨度，rowspan行跨度。這兩個屬性，都是小格格(td)的屬性，而不是「行」的屬性。
一個完整的表格，是有caption、thead、tbody三個部件的：
thead就是表格頭部體的意思，tbody就是表格內容體的意思，caption就是表格標題
<table> <caption>我是標題</caption> <thead> <tr> <th></th> <th></th> <th></th> </tr> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table>
div 和 span 標籤
1.div 標籤
div是division分割的意思，在頁面上表示容器，將相同語義的一組元素放在同一個div裏面。
div是典型的容器級標籤，能夠包裹任何東西。
語義上來講，全部相同語義、相關的語義的元素，都要放到一個div裏面。
<div> <h3>中國主要城市</h3> <ul> <li>北京</li> <li>哈爾濱</li> <li>吉林</li> <li>長春</li> </ul> </div> <div> <h3>中國著名男演員</h3> <ul> <li>郭德綱</li> <li>劉德華</li> <li>鄧超</li> <li>胡歌</li> </ul> </div>
div標籤，瀏覽器沒有任何的默認樣式。
div這個東西可以把層次分的很清楚。
div負責描述頁面的結構，css負責描述頁面的樣式。
2.span
span表示跨度，就是文本級的div。
就是把一些語義相近、功能相同的文本標籤，都包裹在一塊兒。注意，直覺上以爲span比a大，比p小。
span也沒有任何的默認樣式。span單獨使用沒有什麼意義，都是配合樣式表使用的。
<p> 今天是CSS的第1天，天天必定要按時<span>完成做業</span>，要按時吃飯睡覺，要<span>多吃蔬菜</span>少喝酒，上課不要遲到。 </p>
HTML雜項
1.註釋
任何的語言都有註釋，註釋是不會當作程序執行的，是給程序員本身看的。
HTML中，註釋的語法：
<!--這是網頁的頭部-->
換行是合法
<!-- 這是網頁的內容 製做人邵山歡 -->
很明顯，寫一些註釋，對代碼的清晰度、可讀性有很大的提高。
sublime中，按ctrl+/ ， 可以快速輸入一個註釋。
爲了方便調試代碼，常常會把一些代碼註釋掉，集中精力看其他的代碼。
2.字符實體
也叫做轉義字符。
<div> 好高興啊，今天老師教會咱們<h1>是主標題的意思，我真開心呀！ </div>
也就是說，在寫HTML頁面的時候，常常會有誤會，好比<就正常出現。那麼爲了防止HTML頁面認爲這是一個標籤，因此就應該寫成轉義字符。
全部的轉義字符，都是這樣的格式：&字母;
< 就是< , lt就是英語less than小於
> 就是> , gt就是英語greater than大於
© 就是© 版權符號
就是空格
有一個很是重要的轉義字符，就是nbsp。 non-breaking space，無換行空格。
看代碼：
<ul> <li>鄧 超</li> <li>孫 儷</li> <li>王寶強</li> </ul>
兩個空格，摺疊成了一個空格
因此要用 來表示一箇中文的空格：
<ul> <li>鄧 超</li> <li>孫 儷</li> <li>王寶強</li> </ul>
廢棄標籤介紹
你會發現，如今的HTML標籤只負責語義、結構。不負責樣式的。可是在2008以前，HTML也是負責樣式的。
可是HTML中，有一些標籤，具備濃郁的樣式色彩。就是這個標籤，不是負責語義的，而是負責樣式的，2008年開始，堅定的廢棄掉了這些標籤，用CSS來替代他們的功能。
這些標籤：
<b></b> <u></u> <i></i> <del></del>
絲毫看不出語義，只有樣式，因此是被廢棄了！
這些標籤，咱們還有點用，當作CSS鉤子，什麼是鉤子，之後再說！
還有一些標籤，是擦邊球，就是本身也有一些語義，可是也有一些樣式色彩，這些標籤是能夠合理使用的：
<p><strong>我是一個文字</strong></p> <p><em>我是一個文字</em></p>
em是emphasize的意思，也是強調的意思。
strong、em要比b、i好。
HTML在如今的社會，就是負責頁面語義和結構的，因此標籤極大的簡化。頁面上經常使用的標籤實際上就幾個：
容器：div、ul（li）、ol、dl、table
放文字的： h系列、p、span、a
文本流：img、input
當作css鉤子：b、u、i
最後最後強調一下，HTML放什麼標籤，不是看什麼樣子，要看語義！
CSS總體感知
1.簡介
前端開發3層：
- HTML：結構層 語義、結構
- CSS：樣式層 樣式
- JS： 行爲層 交互、行爲、動畫
CSS的全程是cascading style sheet ， 層疊式樣式表，「樣式表」比較好理解，「層疊式」比較難理解。
CSS的維護者也是w3c，最新版本是CSS3，可是瀏覽器沒有那麼的兼容，因此咱們學習的是CSS2.1。
2.總體感知
css分爲兩個部分，選擇誰、設置什麼樣式。
<style type="text/css">
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial;
}
p{
color: green;
font-size: 04px;
text-shadow: 8px 8px 8px black;
font-family: "微軟雅黑";
transform: rotate(94deg);
width: 944px;
}
</style>
上面的h一、p就是選擇器。表示選擇哪些HTML標籤給他們加樣式，就是說你要給誰加樣式。
而後大括號裏面，就是k:v;的結構，把全部的樣式列出來，擁有的樣式就寫上，沒有的樣式不寫，有多少寫多少：
選擇器{
k:v;
k:v;
k:v;
k:v;
k:v;
}
選擇器{
k:v;
k:v;
k:v;
k:v;
k:v;
}
3.style標籤——css的舞臺
全部的css樣式，都要寫在style標籤中。
style標籤寫在<head>裏面。
<style type="text/css">
</style
style就是樣式的意思，表示這個標籤裏面寫的是樣式。
type是類型；
text/css表示純文本的css。
傻瓜版的sublime能快速輸入，只須要輸入<sty 按tab就好了：
而後就在style標籤裏面，書寫樣式：
<style type="text/css">
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial;
}
</style>
4.css對換行不敏感、縮進不敏感
h1{color: red; background-color:blue; font-size: 84px; font-size: initial;
}
等價於：
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial;
}
寫成一行，css代碼尺寸小了，這是最後壓縮的事情，寫的時候，仍是一行一行寫。
5.分號
每一個選擇器最後一項的屬性值能夠沒有分號，其餘都要有。
h1{
color: red;
background-color:blue;
font-size: 84px;
font-size: initial
}
咱們通常也會把最後一項寫上分號。
6.先學幾個屬性
文字顏色：color:red;
color就是文字顏色的意思，後面的值咱們使用英語描述。咱們後面的課程將告訴你，還能用rgb、十六進制來描述顏色，如今先不着急。
sublime中快捷鍵是c tab
背景顏色：background-color:blue;
background就是背景的意思，中間有個短橫和color鏈接。咱們css中多個詞組都是短橫分開的。
sublime中快捷鍵是bgc tab
字號：font-size:40px;
font就是字體，size就是尺寸。px是英語pixel像素的意思。
邊框：border:1px solid green;
border就是邊框的意思，它的值頗有意思，是三個部分，用空格隔開。
這三個部分，能夠順序交換。
1px就是粗細，能夠任意調整；solid就是實線，若是是虛線寫dashed；green就是顏色，能夠任意設置。
基本選擇器
選擇器就是怎麼選擇元素的。
1.標籤選擇器
標籤選擇器是最最簡單的選擇器，就是選擇頁面上全部的同種標籤。
要注意的是，選擇的是頁面上的全部這個標籤，而不是一個。
<style type="text/css">
p{
color: green;
}
</style>
body就是頁面，若是要設置整個頁面的背景顏色，要設置body。
body{
background-color: yellow;
}
標籤選擇器有點很差用，要選擇就都選擇了。因此主要的用途就是設置一些標籤的默認狀況。
2.id選擇器
就是對某一個（注意就一個）元素，進行特別的樣式設定的時候用。就是給元素一個特別的名字，而後經過這個名字來選擇它。
就是給元素加上id屬性，而後在選擇器用#開頭進行選擇。
<p id="description">HTML在如今的社會，就是負責頁面語義和結構的，因此標籤極大的簡化。頁面上經常使用的標籤實際上就幾個：</p>
選擇的時候寫：
<style type="text/css">
#description{
color: red;
}
</style>
首先，任何元素均可以設置id屬性，合法的id屬性是英語字母開頭（大小寫敏感，也就是說aa和AA是兩個不一樣的合法id）、能夠有數字、下劃線、短橫。
同一個頁面中，id絕對不能相同。哪怕是不一樣的元素，id也不能相同，咱們必須保證，id在頁面上是惟一的。
下面這個例子是錯誤的，初學者常見的錯誤：
<p id="para">我是一個段落</p> <h3 id="para">我是一個h3</h3>
頁面上已經有元素的id是para了，因此不能有元素仍然叫para。即便以前叫作para的是一個p，後面叫作para的是一個h3，也不行！是不合法的！
你會發現，咱們能夠綜合利用標籤選擇器、id選擇器一塊兒作效果。好比，咱們讓全部的p的字號都是20px，讓其中某一個的顏色是紅色。這就是層疊式樣式表的第一層含義，同一個標籤能夠有多個選擇器選擇它。
3.類選擇器
id有點很差用，由於是惟一的，若是頁面上有兩個、三個元素，想設置爲一樣的樣式，id就無能爲力了。
因此就是用類選擇器，就是給某一類元素，設置相同的類名，而後經過這個類名來選擇。
class叫作類名。
<p class="warning">我是段落1</p>
<p class="warning">我是段落2</p>
選擇的時候，用點：
<style type="text/css">
.warning{
color: red;
}
</style>
類名的命名和id是同樣的，英語字母開頭（aa和AA是不同的類名）、數字、下劃線、短橫。
能夠有多個標籤攜帶同一個類名：
<h1 class="warning">CSS入門和高級技巧</h1>
<p class="warning">我是段落1</p>
<p class="warning">我是段落2</p>
同一個標籤，能夠攜帶多個類名，用空格隔開。
<p class="warning p1">我是段落1</p>
這個p標籤同時攜帶了兩個類，因此.warning選擇器和.p1選擇器能同時選擇上他們。
.p1{
color: green;
}
.warning{
color: red;
}
注意，使用空格隔開，不是兩個class
<p class=」warning」 class=」xian」>我是一個錯誤的示範</p>
原子類的意思： 好比來製做這個效果：
用原子類是最方便的，所謂的原子類，就是一些簡單的屬性作成一個類，而後元素自行選擇：
<style type="text/css">
.hong{
color: red;
}
.da{
font-size: 04px;
}
.xian{
text-decoration: underline;
}
</style>
各取所需：
<p class="hong da">我是段落</p>
<p class="hong xian">我是段落</p>
<p class="da xian">我是段落</p>
類名的使用的時候，儘可能用有語義的單詞來表示：warning、important、ad、main。
不要用一些具體的單詞：red、hong、left-part、right-part。
寫頁面到底用id仍是class呢？答案很是確定：class。哪怕頁面上只有某一個要改樣式，那麼我儘可能給這一個元素一個單獨的class，也不給他id。
這是由於id是js經常使用的標籤，若是你在css就把id用掉了，js程序就有耦合性的問題。
class上樣式，id上行爲。
高級選擇器
1.後代選擇器
後代選擇器用空格表示：
<div class="news">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
選擇這些p，能夠用後代選擇器：
<style type="text/css">
.news{
color: red;
}
</style>
咱們如今要詳細介紹一下：
選擇的是後代的元素，不必定是兒子，若是是孫子、曾孫子、重孫子……都行
<div class="div1"> <div class="div2"> <div class="div3"> <p>我是一個小p</p> </div> </div> </div>
選擇的是div1這個div中的後代p：
<style type="text/css">
.div2 p{
color: green;
}
</style>
能夠多重描述祖先順序，可是順序必須真實存在：
<style type="text/css">
.div1 .div2 .div3 p{
color: green;
}
</style>
如今反應要快，看見空格了，就是後代。
2.交集選擇器
選擇又是p標籤，同時又有haha類的元素：
p.haha
通常來講，語法是：標籤名.類名
別的交集選擇器也合法，可是沒人這麼寫：
#box.haha
注意
div.box和div .box的區別
3.並集選擇器
逗號表示並集，「都」
<style type="text/css">
p,div{
color:red;
}
</style>
等價於：
p.haha{
color:red;
}
div.xixi{
color:red;
}
4.通配符
選擇全部元素，用
<style type="text/css">
*{
color: red;
}
</style>
繼承性和層疊性
1.繼承性
css規定，有一些屬性，給某一個元素設置了，它的後代元素都一樣擁有它的這個屬性了。
哪些屬性可以繼承呢？
color
text-系列 ： 好比text-decoration:underline;
font-系列： 好比font-size:30px;
line-系列
background-color不能繼承！border不能繼承！等等
可以把一些初始的、基本的、廣泛的設置，寫在body裏面。
<style type="text/css">
body{
font-size: 70px;
}
</style>
「層疊式」樣式表，cascading的第二層含義，就是繼承性。
2.層疊性
層疊性是什麼？就是處理衝突的能力。就是當多個選擇器都選擇上了同一個標籤，聽誰的？
同一個標籤：
<p class="haha" id="para">我是段落</p>
如今有三個選擇器都可以選擇上它：
<style type="text/css">
p{
color:red;
}
#para{
color:green;
}
.haha{
color:blue;
}
</style>
聽誰的？此時，就是所謂的層疊性發揮做用了，CSS有着一套很是嚴密的法律，此時聽id的。
選擇器的一個基本權重： id的權重 > 類選擇器 > 標籤選擇器
比較複雜的權重計算：
10個便籤，也幹不過1個類。
只有選中到文字所在的標籤，才能計算權重！！若是是繼承而來的，權重是0！
若是權重相同怎麼辦？
- 若是是都選擇上了，以style列表中後出現的選擇器爲準
- 都是經過繼承而來的呢：就近原則，誰描述的近，聽誰的。
做業
1.標籤列表
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.yule{
color: pink;
}
.read{
color: yellow;
}
.zhengzhi{
color: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<span class="yule">娛樂新聞娛樂新聞娛樂新聞</span>
<span class="read">[閱讀:15]</span>
</li>
<li>
<span class="yule">娛樂新聞娛樂新聞娛樂新聞</span>
<span class="read">[閱讀:15]</span>
</li>
<li>
<span class="yule">娛樂新聞娛樂新聞娛樂新聞</span>
<span class="read">[閱讀:15]</span>
</li>
<li>
<span class="yule">娛樂新聞娛樂新聞娛樂新聞</span>
<span class="read">[閱讀:15]</span>
</li>
</ul>
<ul>
<li>
<span class="zhengzhi">政治新聞政治新聞政治新聞</span>
<span class="read">[閱讀:15]</span>
</li>
<li>
<span class="zhengzhi">政治新聞政治新聞政治新聞</span>
<span class="read">[閱讀:15]</span>
</li>
<li>
<span class="zhengzhi">政治新聞政治新聞政治新聞</span>
<span class="read">[閱讀:15]</span>
</li>
<li>
<span class="zhengzhi">政治新聞政治新聞政治新聞</span>
<span class="read">[閱讀:15]</span>
</li>
</ul>
</div>
</body>
</html>
2.怎麼肯定權重
權重記憶口訣。從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者僞類+10，一個元素名，或者僞元素+1，好比：
body #content .data img:hover
最終的權重值是0122；#content是一個id選擇器加了100，.data是一個class類選擇器加了10，：hover僞類選擇器加了10， body和img是元素加了1 。
- 1. 06_CSS入門和高級技巧(4)
- 2. 10_CSS入門和高級技巧(8)
- 3. 04_CSS入門和高級技巧(2)
- 4. 05_CSS入門和高級技巧(3)
- 5. 07_CSS入門和高級技巧(5)
- 6. Perl語言入門——高級Perl技巧
- 7. PS入門小技巧1
- 8. iOS核心動畫高級技巧-1
- 9. TypeScript 高級技巧
- 10. JavaScript高級技巧
- 更多相關文章...
- • Markdown 高級技巧 - Markdown 教程
- • XML DOM 高級 - XML 教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 06_CSS入門和高級技巧(4)
- 2. 10_CSS入門和高級技巧(8)
- 3. 04_CSS入門和高級技巧(2)
- 4. 05_CSS入門和高級技巧(3)
- 5. 07_CSS入門和高級技巧(5)
- 6. Perl語言入門——高級Perl技巧
- 7. PS入門小技巧1
- 8. iOS核心動畫高級技巧-1
- 9. TypeScript 高級技巧
- 10. JavaScript高級技巧