css

05.28
1、a連接標籤
<a herf=""></a>
herf核心屬性 屬性值能夠是一個跳轉的地址 herf裏面的內容就是路徑 適用於任何帶路徑的東西
1.絕對路徑：從盤符開始，而後依次的往下查找
本地：
C:/Users/Administrator/Desktop/0527day01/07.html
服務器的：
www.baidu....
127.0.0.1
192.168....
http://www.baidu.com
2.相對路徑: 從當前文件開始，若是下一級目錄就直接寫文件夾名，上一級用../表示

3.盤符根路徑： 直接能夠跳轉到當前文件全部的盤符根目錄中
服務器底下 省略
本地底下

2、img圖像標籤
<img src="" alt=""/>
src 圖片的路徑，
alt 當圖片顯示不出來的時候纔會顯示
圖片正在下載的時候。。。加載中
圖片的路徑錯誤的時候
img是咱們接觸的第一個行內塊標籤，靠左或者靠右 ,不能居中對齊

3、form 表單
前端和後端之間的通訊
1.form提交方式
2.ajax提交方式<form action="" method="">
form:核心標籤，只有提交的功能，沒有任何的樣式
屬性：
action 提交的地址，一般爲服務端的地址，若是不寫，默認往本頁提交
method 提交的方式。get/post 若是不寫，爲get提交
get和post的區別。
3.input
input是表單的核心標籤，經過修改input標籤中的type屬性來改變展示的樣式
用戶名：<input type="text" name="username"/><br />
密碼名：<input type="password" name="userpwd"/><br />
4.提交方式
button:<button>提交</button>
subimt：<input type="submit" />
image：<input type="image" src="koala.jpg" />
5.一組必須含有相同的name屬性值
input中的值有一個屬性，value屬性
checked 默認選中，當屬性名等於屬性值的時候，只須要寫屬性名便可
6.radio單選
男<input type="radio" name="sex" value="1" checked/> 女<input type="radio" name="sex" value="0" />
7.checkbox 多選
興趣愛好：
<input type="checkbox" checked="checked" name="aihao" value="0"/>打醬油
<input type="checkbox" checked name="aihao" value="1"/>打架
<input type="checkbox" name="aihao" value="2"/>泡妞
<input type="checkbox" name="aihao" value="3"/>打遊戲
<input type="checkbox" name="aihao" value="4"/>學習 7.select 下拉框
<select name="hefang" id="">
<option value="武漢">武漢</option>
<option value="荊州">荊州</option>
<option value="黃石">黃石</option>
<option value="襄陽">襄陽</option>
<option value="十堰">十堰</option>
</select> 8.textarea 文本區域
<textarea name="miaoshu" rows="" cols=""></textarea>

4、開始學習css
1. HTML 結構，承載內容
CSS 樣式 層疊樣式表
javascript 行爲
2. css的使用方式
（1） 行內樣式（內聯樣式）
<標籤 style="屬性名1:屬性值1;屬性名2:屬性值2;..."></標籤>
（2） 頁面嵌入（內部樣式表）
在head標籤裏面增長一個子標籤
<style>
選擇器{
屬性名1:屬性值1;
屬性名2:屬性值2;
......
}
</style>
（3） 外部文件（外部樣式表）
在head標籤裏面增長一個子標籤
<link rel="stylesheet" href="css文件的路徑" />
（4） 外部導入樣式
主要用在樣式初始化。由於有一些標籤有本身的樣式，咱們須要清空，方便本身計算
css語法： （符號都是英文的）
選擇器{
屬性名1:屬性值1;
屬性名2:屬性值2;
......
}
5、顏色的表示方法
1. 顏色色值的英文單詞 red，yellow，green，blue...
2. 2、8、10、十六進制表示法
2 010101
8 01234567
10 012345678
16 0123456789abcdef
基礎三原色 紅綠藍
每一個顏色是由兩個16進制的數來表示的#ff 00 00
簡寫
#xxyyzz -> #xyz
#ffff00 #ff0
#aabbcc #abc
#aabcdd 不能簡寫的
#000000
#ffffff 白色
#cccccc 黑 白 灰
3. rgb表示法
16*16 = 256
rgb(0-255,0-255,0-255)

6、css 選擇器
1.ID選擇器
使用id選擇器：在元素上面增長一個id屬性,id屬性的屬性值不用用數字開頭
一個頁面中只能有一個id屬性值
css中id選擇的表示方法用 # 表示
2. class選擇器
使用class選擇器：在元素上增長一個class屬性，class屬性的屬性值不能用數字開頭
一個頁面中能夠有多個class屬性值
css中class選擇器的表示方法用 . 表示
3. 標籤選擇器
直接寫標籤名
4. 組合選擇器
選擇器直接用,分隔開便可
5.子代選擇器
> 只針對子代
6. 後代選擇器
用空格表示，包含着子代選擇器
7. 通用選擇器
* 針對於全部的標籤 7、選擇器的權重
內聯樣式 1000
id 100
class 10
元素 1
通用 0
boss !important 只要出現，就以這個爲主
權重越高，衝突部分的樣式就以權重高的爲主，並非說這個選擇器沒有用了，而是裏面衝突的樣式
權重僅僅只能做爲參考
權重的計算
不須要管子代和後代的
若是權重相同，就近原則。之後定義的爲準

8、文本類樣式標籤
text-align: right; /*文本對其方式*/
text-decoration: underline; /*文本下劃線*/
color: #f00; /*設置字體的顏色*/
line-height: 166.67px; /*文本的行高*/
/*一行文字所佔的高度,讓他上下居中*/
font-family: "Microsoft YaHei"; /*設置字體的樣式:宋體，楷體... 去百度，翻譯中英文 */
font-family: "宋體"; /*本身去百度找到宋體對應的英文，節約空間*/
font-style: italic; /*規定字體是否傾斜*/
font-weight: bold;
font-size: 16px ; /*設置字體的大小*/
/*在瀏覽器中,默認的字體大小16px
谷歌瀏覽器中，字體大小最小能夠爲12px
火狐沒有限制 */

9、僞類選擇器
hover 叫僞類選擇器
當你的鼠標放上去的時候，會變化成的樣子
權值 10
10、設置鼠標的樣式
cursor: none; /*設置鼠標的樣式*/
display: block; /*元素分爲三大類,設置元素的顯示方式
行內 inline
塊級 block
行內塊 inline-block
none 無
11、有序列表和無序列表
<!--有序列表和無序列表-->
<!--實際開發中有序列表基本不用-->
<!--這三個都是塊級標籤-->
<ol type="1" start="3">
<li>英語</li>
<li>語文</li>
<li>數學</li>
<li>政治</li>
<li>地理</li>
</ol>

<ul type="square">
<li>英語</li>
<li>語文</li>
<li>數學</li>
<li>政治</li>
<li>地理</li>
</ul>
12、opacity
.div01{
background-color: #f00;
opacity: 0.1; /*取值的範圍是0-1之間，能夠爲0和1*/
/*表示整個元素*/
}
.div02{
background-color: rgba(255,0,0,0.1); /*最後一個參數a表示透明度，取值的範圍是0-1之間，能夠爲0和1*/
/*只表示背景顏色*/
}