程序猿小白成長之路[CSS選擇器]

總結以前學過的內容
CSS選擇器1

1-1CSS使用來描述 HTML標籤勇敢如何顯示這樣的一個代碼。
例如 在html 中
<h3>材料</h3>
使用CSS
讓h3標籤顯示成 綠色
讓h3的字體再大一點
讓h3有一個下劃線

1-2注意：全部的CSS組合在一塊兒就定義了整個網頁的樣式
2-1 CSS： Cascading Style Sheets
級聯樣式表的縮寫

3-1第一個選擇器
選擇器：能夠選擇html 標籤，而且修改這些標籤的樣子
3-2類型選擇器：不帶尖括號的標籤名
3-3類型選擇器是 CSS標籤中最簡單的選擇器就是寫標籤名，而且不帶尖括號，叫作類型選擇器
例如
p{ 文本裝飾 下劃線
text-decoration: underline;
能夠應用到選擇 每一個屬性
器的不少屬性中 一般有若干可選的值
的一個
}
4-1選擇器語法
咱們必須遵照選擇其中特殊的語法規則
4-2
選擇器名字的後面是一個開始的大括號
p{ 屬性和屬性的值中間是冒號
text-decoration: underline;
屬性的值後面是分號

}
全部屬性的列表後面是一個結束的大括號

注意：任何部分都不能丟掉，還有必定是英文半角的符號

4-3一個選擇器中能夠寫不少屬性
4-4類型選擇器會做用在全部同名標籤中
4-5選擇一個標籤的子元素
4-6派生選擇器：做用在某些標籤的字標籤上

4-7僞類選擇器：在原有選擇器的基礎上添加一個限定條件，當某種狀況發生時再選擇這個標籤
a{
text-decoration: none;
}
表示文本裝飾：無；

a:hover{
text-decoration: underline;
color: darkred
}
a:hover:僞類選擇器，鼠標放到超連接上停留時纔會被應用，使用僞類選擇器縮小選擇範圍

first-child:縮小標籤的選擇範圍，只選擇第1個子標籤

5-1添加樣式的位置之一：在head 標籤中添加 Style 字標籤
<style type="text/css">
a{}
</style>
tyle:屬性 通知瀏覽器，css在此；
所以，CSS選擇器寫在style開始標籤和結束標籤之間。

6-1 a標籤的僞類選擇器一共有 4 種
a{}

未訪問的連接，和a{}同時並相同存在時會覆蓋a{}
a :link{}

鼠標移動到超連接上時
a:hover{}

被選定的超連接
a:active{}

已訪問的超連接
a:visited{}

注意：
a :link{}必須在a:hover{}以前
a:active{}必須在a:hover{}以後

記憶方式：
顯示訪問的時候，而後是鼠標放在上面，接着是當數遍點擊的時候，最後鼠標已點擊過（已訪問）

文檔學習網站優選：W3C
有許多文檔能夠學習，例如參考手冊，測驗/考試
CSS參考手冊裏有不少選擇器（可自行查找）


CSS顏色
1-1有關鍵字顏色、十六進制顏色、十進制顏色
十六進制顏色由3部分組成
#FF 00 00
前兩個FF表示 紅色的多少
中間兩個字符 表示包含綠色的多少
最後兩個表示 藍色的數量
由紅 綠 藍 三顏色組成
三顏色取值範圍能夠從16進制的00-FF，
或從十進制的 0-255

2018.7.11
CSS中的盒模式

盒：在body中的每一個html標籤實際上都被包圍在一個看不見的矩形中，這個矩形就叫作「盒」。

塊級別的標籤（Block-level Tags)

塊標籤的內容佔據了容器的整個寬度

容器：指最外層的body標籤
每一個塊標籤的盒都儘量的佔據頁面的整個寬度

目前爲止學過的塊標籤有：
h1-h6,p,ul,ol,li

若是一個標籤不是塊標籤，那麼咱們就叫它內聯標籤
a標籤就是一個內聯標籤的例子

內聯標籤不會佔據容器的一整行，內容的多少決定了它的寬度
已學的內聯標籤：a標籤
其它的還包括：
img,input,lable等等

將塊標籤轉化成內聯標籤，或將內聯標籤轉化成塊標籤，需設置CSS的display屬性
例如，將導航欄如今的垂直顯示修改成水平顯示
垂直： li 標籤默認的display屬性的值是：block
此爲塊標籤。

水平：display:inline;
此爲內聯標籤

塊標籤之間的間距：
盒模式是描述標籤的邊框和間距的一種方式

盒模式由4部分組成：
一、內容區域-content area:內容區域中包含的是盒子中真正的內容（文本、圖片等）；
（內容區域的默認高度由內容的高度決定）

二、補白或內邊距padding
padding包圍在內容區域的邊緣，分爲上、右、下、左四個區域

三、邊框border
border 包圍在補白padding的邊緣，也分爲上、右、下、左四個區域

四、邊距-margin
margin 包圍在border的上、右、下、左四個邊緣


padding的屬性（上、右、下、左）

border的屬性
border-width 邊框的寬度
border-style 邊框的樣式 實線或虛線
border-color 邊框的顏色
border-bottom 設置其中一側的邊框 right/left/top10像素

添加margin屬性的方式和padding屬性同樣的（上、右、下、左）

計算盒子的尺寸：
整個盒子的寬度=內容區域的寬度+左padding+右padding+左border+右border+左margin+右margin
整個盒子的高度也同樣。

盒模式總結：
每一個標籤都填充在一個看不到的盒子中；
塊標籤所在的盒會佔據瀏覽器一整行的位置；
使用padding設置內容區域到邊框的距離；
使用margin能夠設置邊框以外的距離，也就是盒子和其餘盒子之間的距離

注意：
若是網頁沒有設置樣式，瀏覽器會使用默認的樣式
重置瀏覽器樣式，把這段代碼加入到CSS開始部分
包含全部在咱們的頁面中出現過的html標籤
html,body,h1,h2,h3,p,ol,ul,li,a{
padding: 0;
border: 0;
margin: 0;
}

選擇器2

使用類選擇器：
給HTML標籤添加一個class屬性，而後給class屬性填寫一個值，這個值叫作 類名。
在HTML中
<ul class="nav">

類選擇器：在類名前加 「."
在CSS樣式中：
.nav{}

在派生選擇器中使用：
類選擇器和派生選擇器能夠同時使用

.nav a {}

查找nav 這個類名所在標籤的子孫標籤，而且這些子孫標籤的名字是a

PS:子孫標籤包括 子標籤，子標籤的子標籤，子標籤的子標籤的子標籤，等等

把內聯標籤恢復爲塊標籤，怎麼改呢？
在CSS中：
ul li{
display: inline;} 改成 .nav li{display: inline;}


div 佈局

組織頁面佈局
div標籤：division 的縮寫，分區的意思
它是一個塊標籤。主要用來將網頁中相關的內容組織在一塊兒
header 頭部
main-content 主體內容

使用class描述div的內容
要想區分每一個div，經常使用的作法是給每一個div添加一個class屬性
<div class="header">
<div class="main-content">

去掉圈點，設置樣式： list-style-type: none;

快捷鍵技巧：
div.header+div.main-content 按下鍵盤的 Tab 鍵，生成。

內容居中：
有兩種經常使用的CSS方法讓網頁中的內容居中顯示：
1、若是想把塊標籤中的內容居中，
那麼設置塊標籤 text-align的值爲 center

2、把塊標籤自己居中，而且這個標籤有固定的寬度，
那麼，設置塊標籤左右margin的值爲 auto

margin: 30px auto 30px auto;

網頁內容圖片

三種網頁圖片：
內容圖片
佈局圖片
用戶交互圖片

內容圖片：是頁面中真正須要的內容，沒有內容圖片你就沒法完整的理解頁面內容。

佈局圖片：出如今頁面背景中，要想理解頁面的內容，它們不是必須的。

用戶交互圖片：會給你瀏覽頁面帶來幫助，它不是背景也不是內容圖片

建立內容圖片

在HTML中 用<img>標籤建立圖片，英文 image的簡寫
<img>是一個空標籤，同<link >同樣，沒有結束標籤

若是想讓<img>顯示一張圖片，那麼就要爲它<img>添加一個src屬性
src的值等於圖片的URL地址

<img src="egg.html"> url 地址能夠是相對路徑也能夠是絕對路徑

爲內容圖片添加alt屬性

alt屬性：填寫對這張圖片的簡單描述， 可訪問性的意思

<img src="egg.html" alt="西紅柿炒蛋「>

因爲並非全部瀏覽網頁的人都可以成功的看到圖片，所以添加alt屬性讓它可訪問
也就是 屏幕閱讀器經過alt屬性幫助看不見這張圖片的訪問者描述這張圖片

總結：

<img>有兩個屬性：
src屬性：圖片的路徑
alt屬性：讓圖片可訪問性

網頁佈局圖片

建立佈局圖片

佈局圖片是在CSS中被建立出來的，使用CSS中的background屬性

CSS中和背景相關的屬性： background-color

技巧：若是要設置佈局背景圖片（background),也要始終設置背景顏色background-color
以確保背景圖片沒有成功加載時會顯示一個背景顏色

CSS背景屬性
background-image 能夠指向一個相對路徑或絕對路徑

header{
padding: 1px;
background-color: #ffffff;
background-image: url(images/bg-header.jpg);
}

圖片路徑必須寫在url（）中
圖片路徑兩側的雙引號可寫可不寫

background-repeat 屬性能夠設置背景是否平鋪在容器中
.header{
background-repeat: repeat;
}
repeat是默認值：平鋪，橫向或縱向平鋪

background-repeat屬性有另外三個值：no-repeat:根本不平鋪 repeat-x:只能橫向平鋪 repeat-y:只能縱向平鋪

background-position 屬性能夠控制背景圖片顯示在什麼地方
.header{
background-position: top left;
}
top left 是屬性的默認值
top 這個值能夠是 top center bottom 上 中 下
left 這個值能夠是 left center right 左 中 右

背景相關的屬性在CSS中可簡寫在一塊兒 成一行形式
.header{
padding: 10px;
background: #ffffff url(images/.z.jpg) center left no-repeat
}
背景顏色 URL地址 圖片位置 是否平鋪

用戶交互圖片

Web上最經常使用的3種圖像格式

JPEG：能夠展現一張圖片或複雜圖像
擴展名是.jpg或.jpeg
能夠表示多達1600萬種顏色，即全部的十六進制顏色
可是不支持圖像透明
也不支持動畫

PNG格式 是最適合展現網頁插畫、logo和網頁小圖標
擴展名：png
能夠表示上百萬種不一樣顏色的圖像
包括PNG-8，PNG-4和PNG-32
能夠設置顏色透明
也不支持動畫

GIF 適合展現網頁插畫、Logo和網頁小圖標
擴展名爲 .gif
web最先的圖片格式，能夠表示最多256種不一樣顏色
能夠設置顏色透明
支持動畫

總結：
複雜顏色的圖像和圖片則要使用JPEG格式
動態圖像要使用GIF格式
透明圖片能夠PNG，也能夠用GIF，由於GIF只能設置一種顏色的透明度，因此PNG格式的透明圖片要比GIF格式的更平滑

這三種圖像相對於氣他格式的圖像文件比較小，適合Web頁面的高效展現。
通常狀況下，用戶交互圖片都是一些小圖標，因此使用PNG或GIF做爲交互圖片

大部分狀況下使用CSS的background屬性背景圖片的形式展現用戶交互圖片

不少大型門戶網站會把用戶交互圖片放在同一個文件中，提升網絡和服務器性能

圖片精靈：兩個圖標放在同一張圖片中，可是它們能夠在網頁中顯示，在不一樣的位置上。這是怎麼作到的呢？

方法：首先把圖片分割成不一樣的區域，獲得每部分的height和width
而後把圖片放到二維座標中
接下來找到圖片左上角座標，而後能夠設置CSS的樣式爲
background-position: 0,-28px; 寫圖片的座標

字體

使用CSS改變字體

能夠指定和改變字體外觀的經常使用CSS屬性：

字體風格 font-style
字體粗細 font-weight
字體大小 font-size
行高 line-height
字體樣式 font-family

寫的時候也能夠統一寫在一塊兒：
p{
font:italic bold 2px 3px 微軟雅黑
}

使用字體列表
font-family:每一個字體用逗號分開
字體名稱包含多個單詞時使用引號 「」

字體列表p{
font-family: 微軟雅黑，黑體，宋體，「Times New Roman",sans-serif;
} 優先使用的字體， 備 用 字 體 ， 字體列表最後指定一個通用字體。

通用字體系列
sans-serif字體系列：Verdana,ArialBlack,微雅軟黑，黑體，Arial
這是一種無襯線字體：筆畫粗細一直
在計算機屏幕上更容易識讀

serif字體系列：Tims,Times New Roman ,宋體
這是一種有襯線字體：筆畫末端有裝飾性的線條或凸起（例如報紙）
報紙中正文使用的文字

Monospace字體系列： courier,courier New ,Andale Mono.
這是一種等寬字體：每一個字母寬度一致
用於顯示軟件代碼示例

Cursive字體系列：comic，sans,Apple,Chancery,華文行楷
這是一種手寫體

Fantasy 字體系列：LAST,NINJA,華文琥珀，Impait
這是一種裝飾性字體，設計感較強

注意：候選字體列表中的字體一般來自於同一個字體系列
若是前面指定廣大特定字體都沒有找到，瀏覽器就從sans-serif字體系列中找一個默認的字體

調整字體的大小
font-size
方法1：px，使用像素，數字和單位名稱之間不能有空格；
方法2：%，百分號
方法3：em，相似於百分數

改變字體的粗細
font-weight:
bold：粗體
normal：去掉默認的粗體樣式
其餘值：
normal(正常） bold(粗體）
lighter(稍細） bolder（稍粗）
或者100,200....900 一般不使用數字

爲字體添加風格
font-style:
italic:專門設計的斜體字符
oblicque:沒有專門設計的斜體字符，由瀏覽器負責把正常的字體傾斜顯示
他的值有：
normal(正常） oblicque（傾斜文本）
italic（斜體字符）

調整行高
line-height:能夠定義盒子內每一行之間的距離

表單
一個簡單的表單
<form>
<label>食品名稱</label>
<input type="text">
<input type="submit" value="保存食譜「>
</form>

form標籤的工做方式
form標籤不但包含全部的表單控件，還會告訴瀏覽器當你提交表單時要把表單數據發送到哪裏，以及使用什麼方式發送

<form action="login.php" method="post">
...
</form>

action屬性指定表單數據要發送到哪一個服務器腳本上，例如這裏發送到login.php
method屬性指定數據發送的方式，有post和get兩種，一般用post

for屬性和id屬性
label標籤for屬性的值應該和input標籤中id屬性的值一致，這兩個表單控制就會關聯起來
<form>
<label for="recipe-nam">食品</label>
<input type="text" id="recipe-nam">
<input type="submit" value="保存食譜「>
</form>
說明一下：for的值能夠是任意值
for和id的值同樣：這是將label關聯在input上

input標籤的type屬性
type屬性決定input標籤顯示成什麼樣子
type屬性有不少值，有：
text 文本框
checkbox 複選框
radio 單選按鈕
file 文件上傳控件
password 密碼
submit 提交
reset 重置

文本框：
input 文本框 標籤能夠接受少許的單行文本

textarea標籤能夠接受用戶輸入的多行文本

<label for="ingredients">材料</label>
<textarea id="ingredients"></textarea>

textarea標籤與input標籤不一樣，textarea標籤必須有開始標籤和結束標籤

下拉列表 select 標籤和子元素option標籤組合成一個下拉列表
使用select標籤和option標籤建立下拉列表

每一個option標籤都是下拉列表的一個選項。