HTML和CSS 入門系列（一）：超鏈接、選擇器、顏色、盒模式、DIV布局、圖片

GitCafe 發布于2019-08-30 13:55 / 1482人閱讀

摘要：一超鏈接二選擇器的全稱叫做級聯樣式表的縮寫。布局圖片簡寫的形式比分開寫的性能更高，能簡寫盡量簡寫。下一篇和入門系列二文字表單表格浮動定位框架布局參考教學視頻和小時入門經典視頻教程

一、超鏈接

二、CSS選擇器

CSS的全稱叫做： Cascading Style Sheets 級聯樣式表的縮寫。

2.1 類型選擇器

2.2 派生選擇器

2.3 偽類選擇器

2.4 類選擇器

2.5 link標簽

是一個空標簽，因此只需要寫屬性即可

2.6

三、CSS顏色

四、CSS盒模式

塊級標簽： Block-level Tags

內聯標簽：Inline-level Tags

塊標簽之間的距離：

4.2 盒模式

如果都一樣：margin: 6px

計算盒子的尺寸：

總結：

五、DIV布局

5.2 內容居中

text-align: center

或

固定寬度：width: 500px; margin: 30px auto 0 auto

六、圖片

圖片是如何加載的：

6.1 內容圖片

在Google瀏覽器中需要為圖片定義高度和寬帶才能在圖片沒有加載成功的時候顯示alt描述文字。

6.2 布局圖片

簡寫的形式比分開寫的性能更高，能簡寫盡量簡寫。

6.3 用戶交互圖片

a標簽是內聯標簽，不能設置寬和高。
height: 28px; display:inline-block; 內聯塊標簽：可以讓該標簽擁有內聯標簽同時可以擁有獨立的寬和高。

line-height: 28px; 設置行高和圖片高度一致，是讓圖片和文字垂直居中的一個小技巧。

下一篇：HTML和CSS 入門系列（二）：文字、表單、表格、浮動、定位、框架布局、SEO

參考教學視頻：HTML和CSS 6小時入門經典視頻教程

云服務器 GPU云服務器 html改超鏈接顏色 html超鏈接圖片 html給圖片超鏈接 html多圖片選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115637.html

HTML和CSS 入門系列（一）：超鏈接、選擇器、顏色、盒模式、DIV布局、圖片

摘要：一超鏈接二選擇器的全稱叫做級聯樣式表的縮寫。布局圖片簡寫的形式比分開寫的性能更高，能簡寫盡量簡寫。下一篇和入門系列二文字表單表格浮動定位框架布局參考教學視頻和小時入門經典視頻教程一、超鏈接 showImg(https://segmentfault.com/img/bV26nx?w=1441&h=572); showImg(https://segmentfault.com/img/bV...

woshicixide 2019-08-01 18:30 評論0 收藏0
HTML和CSS 入門系列（二）：文字、表單、表格、浮動、定位、框架布局、SEO

摘要：多余的文字會被隱藏五定位透明度居中顯示堆疊順序可用于將在一個元素放置于另一元素之后。屬性六框架布局垂直布局水平布局內聯框架標簽七搜索引擎優化下一篇和系列三變化元素新增標簽多媒體新增表單全局屬性參考教學視頻和小時入門經典視頻教程上一篇：HTML和CSS 入門系列（一）：超鏈接、選擇器、顏色、盒模式、DIV布局、圖片一、文字 1.1 屬性 showImg(https://segment...

yanwei 2019-08-30 13:55 評論0 收藏0
HTML和CSS 入門系列（二）：文字、表單、表格、浮動、定位、框架布局、SEO

摘要：多余的文字會被隱藏五定位透明度居中顯示堆疊順序可用于將在一個元素放置于另一元素之后。屬性六框架布局垂直布局水平布局內聯框架標簽七搜索引擎優化下一篇和系列三變化元素新增標簽多媒體新增表單全局屬性參考教學視頻和小時入門經典視頻教程上一篇：HTML和CSS 入門系列（一）：超鏈接、選擇器、顏色、盒模式、DIV布局、圖片一、文字 1.1 屬性 showImg(https://segment...

binta 2019-08-01 18:32 評論0 收藏0
CSS 面試題總結

摘要：而名作為標簽的身份則是唯一的，在頁面中只能出現一次。會導致父容器高度塌陷。堆疊順序由元素在文檔中的先后位置決定，后出現的會在上面。之后的內聯對象會被排列在同一行內。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清除浮動。 CSS 中類 (classes) 和 ID 的區別。書寫上的差別：class名用.號開頭來定義，id名用#號開頭來定義；優先級不同（權重不同）調用上的...

tomato 2019-08-29 15:06 評論0 收藏0
CSS3主要內容

摘要：必須要準確的放置否則聲明無效。倒影設置元素的倒影準確的來說不能算是的東西，但需要知道。默認值不可繼承背景漸變漸變是在中新增加的圖片類型使用漸變可以在兩種顏色間制造出平滑的漸變效果用它代替圖片，可以加快頁面的載入時間減小帶寬占用。 CSS3主要內容一、CSS選擇器 ? CSS3選擇器規范地址： https://www.w3.org/TR/2011/RE...? ...

X_AirDu 2019-08-30 11:15 評論0 收藏0