html 只用來添加語義 不用來修飾 在企業(yè)中裝扮一定要使用CSS 層疊樣式表
沒有設(shè)置寬高的圖片 則默認圖片大小 如果不想圖片變形 則可以只指定寬高中的一個值另一個系統(tǒng)自動調(diào)整 等比拉伸
title屬性 鼠標(biāo)放在圖片處顯示的文字內(nèi)容 alt屬性 當(dāng)需要顯示的圖片找不到時顯示什么內(nèi)容
上級查找 ../ 表示從當(dāng)前位置找到上一級文件夾
注意href 的地址填寫中 不能省略http 或 https 協(xié)議 可用于文字也可用于圖片
target 用于控制如何跳轉(zhuǎn) _self:當(dāng)前選項卡跳轉(zhuǎn) _blank:新建選項卡跳轉(zhuǎn)
假鏈接 等項目其他頁面完成時再改為真鏈接 格式：
# 會自動回到頁面頂部
javascript: 不會回到網(wǎng)頁頂部無序列表（用得多） ul (unordered list) 新聞列表 商品列表 導(dǎo)航條
ul中最好只放li標(biāo)簽 但li中可以繼續(xù)放其他標(biāo)簽 當(dāng)然也可以加ul標(biāo)簽
webstorm 中可以使用 ul>li * 3 + tab 這個快捷鍵直接生成多個
快速生成 ul>li * 2>h2+ul>li * 2>p>嵌套 +同級加上 *生成幾個
定義列表 dl dl 和 dt / dd 是一個整體一起出現(xiàn) 推薦一個dt對應(yīng)一個dd
dt 是definition title 即定義列表中的標(biāo)題
dd 是definition description 用來定義標(biāo)題對應(yīng)的描述信息
表格標(biāo)簽<table> <tr> <td> </td> </tr> </table> 一起出現(xiàn) 不單獨出現(xiàn)
th 為表格標(biāo)題 tr 表示整個表格中的一行數(shù)據(jù) td 一行當(dāng)中的一個單元格 也有列的意思
th 存儲列標(biāo)題 自動居中 加粗h td 存儲列數(shù)據(jù)
快速移動選中代碼 向上移動 ctrl + shift + ↑ 向下移動 ctrl + shift + ↓
快速合并或展開標(biāo)簽 合并 ctrl + shift + - 展開 ctrl + shift + +
快速新建一行 即回車 shift + enter
ctrl + d 復(fù)制光標(biāo)所在行 ctrl + x 刪除光標(biāo)所在行
action屬性:通過這個屬性指定要提交的服務(wù)器地址
label標(biāo)簽：要想輸入框和文字綁定在一起 即點擊文字聚焦到框
1.將文字用label包圍起來 2.給輸入框添加一個id屬性 3.通過label中的for綁定id即可
<label for="pwd">密碼：</label> <input type="password" name="password" id="pwd">
  空格 小于號 <(less than) 大于號 >(greater than) © 版權(quán)符號 ® 注冊商標(biāo) ™ 商標(biāo)
要想讓單選框默認選擇某一個 就在那個標(biāo)簽加上checked屬性
下拉列表select 不能輸入內(nèi)容只能選擇列表項 默認顯示第一條數(shù)據(jù)
通過給option包裹一層optgroup 給下拉列表分類
<optgroup label="河源">
<option name="area1" value="yuancheng">源城區(qū)</option>
<option name="area1" value="zijin">紫金區(qū)</option>
<option name="area1" value="lianpin">連平區(qū)</option>
</optgroup>
<textarea cols="30" rows="10" name="introduce"></textarea>
通過cols和rows來指定寬度和高度 默認可以拉伸
video標(biāo)簽 播放視頻 src:需要播放視頻的地址 autoplay:自動播放 controls:是否顯示控制條 poster:視頻未播放前的圖片 loop:用于廣告視頻 視頻播放完畢后是否循環(huán)播放 preload:預(yù)加載視頻與autoplay相斥 muted : 靜音 width height 推薦只設(shè)置一個 等比拉伸
text-decoration 給文本添加裝飾 默認none 最常見的用途就是用于去掉超鏈接的下劃線如下a underline 下劃線 line-through 刪除線 overline 上劃線 td + tab快捷鍵
text-indent:2em;/*設(shè)置文本縮進 2em, 其中em是單位, 一個em代表縮進一個文字的寬度挟憔。1em = 16px ti + tab 快捷鍵
rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍色) rgb(0,0,0)
取值是0-255之前, 0代表不發(fā)光, 255代表發(fā)光, 值越大越亮 企業(yè)常用RGB值相同的灰色 rgba a代表透明度, 取值是0-1, 取值越小就越透明 如 color: rgba(255,0,0,0.2);
十六進制中是通過每兩位表示一個顏色 如#FFEE00 FF表示R EE表示G 00表示B 相同可以寫成#FE0
重點來了 直接一行寫完font屬性 縮寫格式font: style weight size family;
style，weight可以省略 size,family不能省略 size一定要寫在family的前面,size和family必須寫在所有屬性的最后 font:italic bold 20px "微軟雅黑";
標(biāo)簽選擇器 根據(jù)指定的標(biāo)簽名稱, 在當(dāng)前界面中找到所有該名稱的標(biāo)簽 無論藏的多深 權(quán)重1
id 標(biāo)簽選擇器 根據(jù)指定的id名稱找到對應(yīng)的標(biāo)簽, 然后設(shè)置屬性,編寫id選擇器時一定要在id名稱前面加上# 不能以數(shù)字開頭在前端開發(fā)中id一般留給js使用的 權(quán)重100
類標(biāo)簽選擇器 根據(jù)指定的類名稱找到對應(yīng)的標(biāo)簽 在同一個界面中class的名稱是可以重復(fù)的 類名就是專門用來給CSS設(shè)置樣式的 每個標(biāo)簽可以同時綁定多個類名 權(quán)重10
css3
后代選擇器 先找到所有名稱叫做"標(biāo)簽名稱1"的標(biāo)簽, 然后再在這個標(biāo)簽下面去查找所有名稱叫做"標(biāo)簽名稱2"的標(biāo)簽
后代不僅僅是兒子, 也包括孫子/重孫子, 只要最終是放到指定標(biāo)簽中的都是后代
后代選擇器必須用空格隔開并且可以通過空格已知延續(xù)下去
div p{ // 也可以是其他選擇器
text-align: center;
color: darkorange;
}
子元素選擇器 找到指定標(biāo)簽中所有特定的直接子元素
子元素選擇器只會查找兒子, 不會查找其他被嵌套的標(biāo)簽 蛉威，需要用>符號連接, 并且不能有空格
#findson>ul>li>p{
color: pink;
}
如果想選中指定標(biāo)簽中的所有特定的標(biāo)簽, 那么就使用后代選擇器
如果只想選中指定標(biāo)簽中的所有特定兒子標(biāo)簽, 那么就使用子元素選擇器
后代選擇器和子元素選擇器都可以使用標(biāo)簽名稱/id名稱/class名稱來作為選擇器
css4
了解即可：
交集選擇器 給所有選擇器選中的標(biāo)簽中, 相交的那部分標(biāo)簽設(shè)置屬性
選擇器和選擇器之間沒有任何的連接符號
并集選擇器 給所有選擇器選中的標(biāo)簽設(shè)置屬性
并集選擇器必須使用,來連接
css5
相鄰兄弟選擇器 CSS2 給指定標(biāo)簽后面緊跟的那個標(biāo)簽設(shè)置屬性
相鄰兄弟選擇器必須通過+連接 相鄰兄弟選擇器只能選中緊跟其后的那個標(biāo)簽, 不能選中被隔開的標(biāo)簽
通用兄弟選擇器 CSS3 給指定選擇器后面的所有選擇器選中的所有標(biāo)簽設(shè)置屬性
通用兄弟選擇器必須用~連接 選中的是指定選擇器后面某個選擇器選中的所有標(biāo)簽, 無論有沒有被隔開都可以選中
h1+p{ /*相鄰兄弟*/
color: #00B7FF;
}
h2~p{ /*通用兄弟*/
color: darkorange;
}
css6
序選擇器是CSS3中新增的選擇器最具代表性的就是序選擇器 選中指定的任意標(biāo)簽然后設(shè)置屬性
:first-child 選中同級別中的第一個標(biāo)簽 :nth-child(n) 選中同級別中的第n個標(biāo)簽 注意點: 不區(qū)分類型 last-of-type 選中同級別中同類型的最后一個標(biāo)簽 nth-of-type(n) 選中同級別中同類型的第n個標(biāo)簽
:only-child 選中父元素中唯一的標(biāo)簽 :only-of-type 選中父元素中唯一類型的某個標(biāo)簽
p:first-child{
color: red;
}
p:last-of-type{
color: blue;
}
p:nth-child(3){
color: darkorange;
}
p:nth-of-type(2){
color: #00B7FF;
}
h2:only-child{
color: #6f2280;
}
h3:only-of-type{
color: pink;
}
css7
序選擇器的其他用法 區(qū)分同級別 還是 同類型
:nth-child(odd) 選中同級別中的所有奇數(shù) :nth-child(even) 選中同級別中的所有偶數(shù)
:nth-of-type(odd) 選中同級別中同類型的所有奇數(shù)
:nth-of-type(even) 選中同級別中同類型的所有偶數(shù)
css8
屬性選擇器:根據(jù)指定的屬性名稱找到對應(yīng)的標(biāo)簽, 然后設(shè)置屬性 最常用于區(qū)分input屬性
屬性的取值是以什么開頭的 [attribute^=value]
屬性的取值是以什么結(jié)尾的 [attribute$=value]
屬性的取值是否包含某個特定的值的 [attribute=value]
在企業(yè)開發(fā)中一般不會使用通配符選擇器{屬性:值; }
css10
CSS三大特性之繼承性 給父元素設(shè)置一些屬性, 子元素也可以使用
以color/font-/text-/line-開頭的屬性才可以繼承
a標(biāo)簽的文字顏色和下劃線是不能繼承的 h標(biāo)簽的文字大小是不能繼承的
頁面統(tǒng)一設(shè)計 body{}
css11
CSS三大特性之層疊性
層疊性只有在多個選擇器選中"同一個標(biāo)簽", 然后又設(shè)置了"相同的屬性", 才會發(fā)生層疊性叫胖。
CSS三大特性之優(yōu)先級 當(dāng)多個選擇器選中同一個標(biāo)簽, 并且給同一個標(biāo)簽設(shè)置相同的屬性時,優(yōu)先級判斷的三種方式: 如下三種
1.間接選中就是指繼承 那么就是誰離目標(biāo)標(biāo)簽比較近就聽誰的
2.如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的
3.不是相同類型的選擇器, 那么就會按照選擇器的優(yōu)先級來層疊
id>類>標(biāo)簽>通配符>繼承>瀏覽器默認
css12
!important 用于提升某個直接選中標(biāo)簽的選擇器中的某個屬性的優(yōu)先級的
!important必須寫在屬性值得分號前面 ,將優(yōu)先級提升為最高
p{
color: green !important;
}
css14
塊級元素會獨占一行 行內(nèi)元素不會獨占一行
塊級元素如果沒有設(shè)置寬度, 那么默認和父元素一樣寬 行內(nèi)元素不可以設(shè)置寬度和高度的 默認和內(nèi)容一樣寬
為了能夠讓元素既能夠不獨占一行, 又可以設(shè)置寬度和高度, 那么就出現(xiàn)了行內(nèi)塊級元素
display: inline-block; /*行內(nèi)塊級元素 既不獨占一行 又能設(shè)置寬高*/
css15
background: 背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式
background-color:屬性設(shè)置標(biāo)簽的背景顏色 快捷鍵 bc
background-image: url();設(shè)置背景圖片地址
background-repeat屬性控制背景圖片的平鋪方式 repeat-x
背景顏色和背景圖片可以共存, 圖片會覆蓋顏色 快捷鍵bgr
background-attachment的屬性進行修改關(guān)聯(lián)方式
scroll 默認值稍浆， 會隨著滾動條的滾動而滾動 fixed 不會隨著滾動條的滾動而滾動
background-position:屬性, 就是專門用于控制背景圖片的位置 left center right
div.box1 + tab 生成div和class
css17
border: 邊框的寬度 邊框的樣式 邊框的顏色; 快捷鍵 bd+
連寫格式中顏色屬性可以省略, 省略之后默認就是黑色
連寫格式中樣式不能省略, 省略之后就看不到邊框了
連寫格式中寬度可以省略, 省略之后還是可以看到邊框
可單獨設(shè)置border-top: 按照順時針來賦值 上 右 下 左
solid實線 dashed虛線 dotted小圓點 double雙線
同一個選擇器中如果設(shè)置了多個邊框?qū)傩? 后面的會覆蓋前面的
不想要哪一條邊框就設(shè)為none
css18
padding: 上 右 下 左 margin: 上 右 下 左;
span.box{生成內(nèi)容}
css20,21
CSS盒模型指那些可以設(shè)置 寬度高度/內(nèi)邊距/邊框/外邊距 的標(biāo)簽
增加了padding/border之后元素的寬高也會發(fā)生變化，若想保持不變，那么就必須減去內(nèi)容的寬高
box-sizing屬性可以保證我們給盒子新增padding和border之后,盒子元素的寬度和高度不變,系統(tǒng)會自動減去一部分內(nèi)容的寬度和高度
box-sizing : border-box;
嵌套關(guān)系(大小盒子)盒子之間的距離, 應(yīng)該首先考慮padding.
其次再考慮margin(margin本質(zhì)上是用于控制兄弟關(guān)系之間的間隙的)
text-align: center; 是設(shè)置盒子中存儲的文字/圖片水平居中
margin:0 auto; 是讓小盒子在大盒子里自己水平居中
此處有重點
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin:0; padding: 0;} /企業(yè)開發(fā)中 標(biāo)準清空默認邊距的方法/
要想'一行文字'在盒子中是垂直居中的 企業(yè)開發(fā)中經(jīng)常采用盒子的高度和行高設(shè)置為一樣解決
css22
兩種排版方式:
標(biāo)準流(文檔流/普通流)排版方式
垂直排版, 如果元素是塊級元素, 那么就會垂直排版
水平排版, 如果元素是行內(nèi)元素/行內(nèi)塊級元素, 那么就會水平排版
浮動流排版方式 浮動流只有一種排版方式, 就是水平排版. 它只能設(shè)置某個元素左對齊或者右對齊, 沒有居中對齊,在浮動流中是不可以使用 margin: 0 auto;
在浮動流中是不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素的
css23
如果前面一個元素浮動了, 而后面一個元素沒有浮動 , 那么這個時候前面一個元就會蓋住后面一個元素
css24
先浮動的元素會顯示在前面, 后浮動的元素會顯示在后面
相反方向排序 左浮動會找左浮動, 右浮動會找右浮動
浮動元素浮動之后的位置, 由浮動元素浮動之前在標(biāo)準流中的位置來確定
css25
浮動元素貼靠現(xiàn)象
1.如果父元素的寬度能夠顯示所有浮動元素, 那么浮動的元素會并排顯示
2.如果父元素的寬度不能顯示所有浮動元素, 那么會從最后一個元素開始往前貼靠
3.如果貼靠了前面所有浮動元素之后都不能顯示, 最終會貼靠到父元素的左邊或者右邊
補充:浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現(xiàn)象
css26
1.在標(biāo)準流中內(nèi)容的高度可以撐起父元素的高度
2.在浮動流中浮動的元素是不可以撐起父元素的高度的
做網(wǎng)頁的基本步驟：1.清空所有的邊距 2.從外向內(nèi)青柄，從上到下的編寫網(wǎng)頁 3.在一一找到對應(yīng)標(biāo)簽設(shè)置屬性
垂直方向使用標(biāo)準流, 水平方向使用浮動流
從上至下布局 從外向內(nèi)布局 水平方向可以先劃分為一左一右再對左邊或者右邊進行進一步布局
偽元素選擇器作用就是給指定標(biāo)簽的內(nèi)容前面添加一個子元素或者給指定標(biāo)簽的內(nèi)容后面添加一個子元素
標(biāo)簽名稱::before{
屬性名稱:值;
}
給指定標(biāo)簽的內(nèi)容前面添加一個子元素
標(biāo)簽名稱::after{
屬性名稱:值;
}
給指定標(biāo)簽的內(nèi)容后面添加一個子元素
絕對定位就是相對于body來定位 position: absolute;
相對定位就是相對于自己以前在標(biāo)準流中的位置來移動 position: relative;
相對定位弊端:
相對定位不會脫離標(biāo)準流, 會繼續(xù)在標(biāo)準流中占用一份空間, 所以不利于布局界面
絕對定位弊端:
默認情況下絕對定位的元素會以body作為參考點, 所以會隨著瀏覽器的寬度高度的變化而變化
子絕父相 子元素用絕對定位, 父元素用相對定位
在企業(yè)開發(fā)中 如果看到有圖片疊起來的 首先要先想到定位流 然后想到子絕父相
讓絕對定位的元素水平居中
只需要設(shè)置絕對定位元素的left:50%;
然后再設(shè)置絕對定位元素的 margin-left: -元素寬度的一半px;
left: 50%;
margin-left: -150px;
z-index屬性的作用是專門用于控制定位流元素的覆蓋關(guān)系的
如果定位流的元素設(shè)置了z-index屬性, 那么誰的z-index屬性比較大, 誰就會顯示在上面
a標(biāo)簽的偽類選擇器是專門用來修改a標(biāo)簽不同狀態(tài)的樣式的
:link 修改從未被訪問過狀態(tài)下的樣式
:visited 修改被訪問過的狀態(tài)下的樣式
:hover 修改鼠標(biāo)懸停在a標(biāo)簽上狀態(tài)下的樣式
:active 修改鼠標(biāo)長按狀態(tài)下的樣式
:hover這個偽類選擇器除了可以用在a標(biāo)簽上, 還可以用在其它的任何標(biāo)簽上
/*告訴系統(tǒng)哪個屬性需要執(zhí)行過渡效果*/
transition-property: width, background-color;
/*告訴系統(tǒng)過渡效果持續(xù)的時長*/
transition-duration: 5s, 5s;
2d動畫效果
/*1.告訴系統(tǒng)需要執(zhí)行哪個動畫*/
animation-name: lnj;
/*3.告訴系統(tǒng)動畫持續(xù)的時長*/
animation-duration: 3s;
}
/*2.告訴系統(tǒng)我們需要自己創(chuàng)建一個名稱叫做lnj的動畫*/
@keyframes lnj {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
連寫
animation:動畫名稱 動畫時長 動畫運動速度 延遲時間 執(zhí)行次數(shù) 往返動畫;
animation: move 3s linear 2s 1 normal;
3d效果
只需要給他的父元素添加一個transform-style屬性, 然后設(shè)置為preserve-3d即可
transform-style: preserve-3d;
transform: rotateY(0deg);
其他詳細文件在CSS/csscode文件夾
