html/css基礎

標籤：blank   word   聲明   frame   微軟   怎麼   選取器   初始   服務   

html一、標籤（重要）1.web標準的組成三部分結構層 html  樣式層css  行為層JS。 2.標籤的分類  （單標籤，雙標籤） (嵌套關係，並列關係)  3.文字格式設定化標籤b,  p i u h1 en  4.img標籤使用及屬性  <img src="路徑" alt=“圖片載入失敗顯示”title=“滑鼠移至上方出現”width=“寬”height=“高”>*圖片設定寬高，最好寬和高只選擇一項設定防止變形;除非有確定的寬和高5.a標籤的使用以及頁面定位功能   標籤<a herf="#" 屬性:href路徑 target視窗開啟檔案:_blank(新視窗開啟) _self(當前視窗開啟)  ( <base target="開啟檔案">寫在hady標籤內 base英文基礎的意思S    ) onclick:(點擊)="return fase" 禁止當前頁面跳轉   錨點定位   加id名   herf="路徑+#id名"6.絕對位置/相對定位: 絕對路徑是從盤符,網路資源路徑出發(不常用)   相對路徑是從檔案本身出發. H5標籤：<nav></nav>導航  <aside></aside>側邊欄 <article><article>文章 footer腳註 header頭部二、無序列表(常用、重要)    ul  li    （導航    多種相同的） 例:  <ul>                <li><p></p><li>    *在ul內寫其他標籤， 要用li包以下      </ul> 三、表格(瞭解) table   tr  （th td）  並列 四、表單控制項 1.文字框<text>      密碼框<password>   單選框<radio>   多選框<checkbox>   屬性：checked選中的 2.按鈕form  屬性  下拉框        select》option  --用js迴圈寫 普通按鈕<botton>   屬性:value 圖片按鈕 <image>  屬性src--- 給圖片添加點擊事件 提交按鈕<submit>  到form表單 重設按鈕<reset> csscss的三種書寫位置      行內式-影響範圍最小              <style></style>    內嵌式--影響當前頁面內  外鏈式-影響整個網站、網站         <link rel="stylecheet" herf="css路徑">    匯入式 @import  （基本不用）  一般用於權重中 !import    font:            size: 大小           widht: 粗細  400正常  700粗             連寫             是否傾斜(style)-粗細(weight)-字型大小（size）字型（）顏色（color)font:14px/100%  "微軟雅黑 簡單選取器  標籤選取器  . 類別選取器 # id選取器 *萬用字元（不推薦使用，推薦用並集選取器）符合選取器  後代選取器（選取器 空格 選取器 ）最多3-5個                           子代選取器（選取器>標籤）（不怎麼用）                  交集選取器（選取器，選取器）(當後代沒辦法實現控制的時候，可以用交集來提高精確度;  只跟一個元素有關，找到當前元素上的所有選取器或標籤連寫中間沒有空格跟後代沒有關係)                  位置偽類別選取器 選取器：li:last-child(找到最後一個子項目是li標籤)  nth-child（數字odd基數 even偶數 4n（倍數））                  偽類別選取器 ：link:當滑鼠為訪問的狀態  hover滑鼠移入的時候                          虛擬元素選取器::after（暫時用來清除浮動） 樣式：.clearfix::after{content“”； display：block; clear:both；heighte:0;visilibity：hidden;}                   虛擬元素選取器                     例                左邊                                    父盒子選取器::before{content"內容"}   配合                                       父盒子內的選取器::after{content:"內容"}                  相鄰選取器 選取器+選取器                   屬性選取器[  標籤中的屬性  ]  配合type                              如果標籤中類型相同  屬性選取器  [標籤中的屬性="屬性的數值"]css三大特性（繼承性 層疊行（權重）， 優先順序）        繼承性  font  color  行高   寬高不繼承， a標籤不繼承顏色， h系列不繼承字型大小，（也不是不繼承而是把父元素的字型，拿過來加以計算，然後進行賦值顯示）——       層疊行 --權重      優先順序 ！important<內嵌元素<id選取器<l類別選取器<標籤選取器<萬用字元<繼承   背景圖片 background-image：        背景圖片url(路徑）        背景圖片是否平鋪 repeat         背景圖片位置position        北京圖片大小 size        背景顏色 color；    連寫順序  背景圖片-是否平鋪-圖片位置-背景圖片大小-背景顏色     背景圖片和img用法             img：經常更新的圖片用img             背景圖片： 固定不經常動。 顯示模式:   disiplay: blok;快元素(p,h1-h6,div,ul,li)                          行內元素 b, u,a,i,em,span.s                           行內快(input img)    邊框    border-color 顏色               -width粗細/大小                -style 邊框的樣式                -rdius 圓角邊框                連寫  border: -widht -style-color標準流  用margin-top會出現高度塌陷, 包含塌陷.  浮動後的元素,可以隨便用;          盒子水平置中方式 margin:0 auto;                                     margin:auto;                                    margin-left:50%                                   margin-right:50%  浮動的特點                 1. 脫離標準流                   2.顯示為行內塊                    3.父元素浮動子項目也會跟著移動.                   4.浮動後,子項目不會超過父元素                 浮動最先開始的特點是,圖文環繞效果.        版心布局:特點:有固定的寬度          定位    固定定位 fixed    相對定位relative;  父盒子有定位參照父父盒子，父盒子沒有定位，會在找上一級。，如果沒有以瀏覽器作為參考      絕對位置：absolute;父盒子有定位參照父父盒子，父盒子沒有定位，會在找上一級。，如果沒有以瀏覽器作為參考        一般情況下（子絕父相常用） 。子絕父絕  子絕父絕。 子絕父固        z-index       顯示圖片模組為 inline-block  圖片會跟文字對齊。    給圖片設定 vertical-align: middle; 進階CSS 滑鼠樣式cursor：  default（小白箭頭/預設） pointer（小手/點擊游標） move（移動游標） text（文本游標）help（協助游標） wait（載入游標） outline  input外輪廓線 不佔像素   一般用於清空input的輪廓線，  文本域清除拖拽resize：none；  清除拖拽功能； vertical-align：middle； 清除圖片底部間隙；display：block；          清除圖片底部間隙； 標籤嵌套規則1.p  h  不能嵌套區塊層級元素  a標籤可以嵌套其他元素，但不推薦2.區塊層級元素和區塊層級元素嵌套，行內元素和行內元素嵌套，3.行內元素和行內元素並列，區塊層級元素和區塊層級元素並列，      white-space:nowrap 強制在一行顯示  text- overflow:hidden;溢出隱藏    text-overflow:ellipsis 文本溢出顯示省略符號;  精靈圖，  是為了 節省瀏覽器和伺服器的通訊；精靈圖 一般用於圖片量比較大，才會使用        圖片比較少沒有必要使用因為後期美工還要進行維護。滑動門寫法  line-height  沒有內容不會有效果 過渡css3 transition 0.3  過渡 transition -property  過渡css屬性的名稱                 -duration 過渡效果的時間                -timing-function 過渡效果的時間曲線。 預設是“ease”(不常用)                -delay 過渡效果何時開始。( 不常用)                        all屬性值。代表全部屬性的意思。                            擁有多個屬性用逗號隔開。                圖片無法使用； all         2D變形                transform（變換）                                     (屬性)：  - translate(x,y)（移動）                                    縮放scale（2，2）（括弧內的數值是倍數） 也可以縮小到0   比1大就是放大，比1小就是縮小。                                《旋轉rotate（deg）（deg代表度數） 順時針（-代表逆時針）                                        t                     ransform-grigin(修改制定的旋轉點) 例如（left top）（ 0px 0px ） 就是0點 -50px  會在原點在負出去。                         這樣寫會重疊                              可以使，定位置中方式更便捷,  定位置中方式. tranfrom:translate(-50%,-50%)                      transform（變換）                                     (屬性)：  - translate(x,y)（移動）                                    縮放scale（2，2）（括弧內的數值是倍數） 也可以縮小到0   比1大就是放大，比1小就是縮小。                                《旋轉rotate（deg）（deg代表度數） 順時針（-代表逆時針）                                        t                     ransform-grigin(修改制定的旋轉點) 例如（left top）（ 0px 0px ） 就是0點 -50px  會在原點在負出去。 移動 translate(x, y) translate 移動平移的意思縮放 scale(x, y) 旋轉 rotate(deg) transform-origin可以調整元素轉換變形的原點傾斜 skew(deg, deg)3D變形(CSS3)transformrotateX()就是沿著 x 立體旋轉.rotateY()沿著y軸進行旋轉 rotateZ()沿著z軸進行旋轉 要配合 透視用。跟縮小效果是有區別的。透視(perspective)動畫 animation            聲明動畫 @keyframes ; 聲明過後可以多次調用，  例子 infinite    次數的無窮迴圈。 反方向，是走出去 是否還回到初始點。   @    寫三角方法簡單方法       在·    行內塊元素，預設不會等於父和子的高度。 定位結構越往後，層級越高。 就近原則 小旗子的畫法。  如果給父和子設定寬度和高度的情況下，給子盒子設定margin-bottom盒子不會被撐大，但是下面的內容會被擠出，盒子不會不會

html/css基礎