html和css的使用方法以及樣式

番茄西紅柿發(fā)布于2019-04-23 11:46 / 2382人閱讀

摘要：浮動的元素脫離文檔流解決方式一給父元素添加超出部分隱藏解決方式二在父元素內(nèi)容最后添加擁有清除浮動屬性的元素。

布局步驟

第一步： 清除默認樣式
第二步： 劃分模塊
第三步： 設(shè)置模塊的大小以及位置
第四步： 劃分下一級模塊

html和css

引入網(wǎng)頁頭像

<link rel="shortcut icon" href="img/...ico">

css樣式表的引入方式

css樣式表的引入方式
1、外鏈?zhǔn)?
    <link href="" rel="stylesheet">
2、嵌入式
    <style>style>
3、行內(nèi)樣式
    <div style="width:200px;height:200pxs;">div>
4. @import url()

文件命名以及變量命名

命名規(guī)范
1、嚴(yán)格區(qū)分大小寫
2、可以采用字母數(shù)字下劃線$,數(shù)字不開頭
3、命名語義化
4、可以采用駝峰命名法

清除默認樣式

清楚邊距
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
a標(biāo)簽清楚下劃線和顏色
    a{
        color: black;
        text-decoration: none;
    }

css中顏色的表示方式

css中顏色的表示方式：
1.預(yù)定義的顏色【關(guān)鍵字顏色】   red   pink  blue yellow
2.#6位數(shù)的色值   #00-00-00 紅綠藍
3.rgb（紅，綠，藍）    ：rgb([0-255],[0-255],[0-255])
4.rgba（red，green，blue，透明度）    ：rgba([0-255],[0-255],[0-255]，[0-1])
    0-1:  0全透明，1不透明

html中的標(biāo)簽和屬性

html：
標(biāo)簽：
按照語法分類：
    1.單標(biāo)簽：只有開始標(biāo)簽
         meta  img a 
    2.雙標(biāo)簽：有開始標(biāo)簽和結(jié)束標(biāo)簽
        <html>html>
    3.屬性的語法
    語法：
      屬性名 = "屬性值"
      屬性名 = "屬性值1 屬性值2"
注意:
    1、標(biāo)簽名和屬性名之間要有空格
    2、多個屬性之間要有空格
    3、多個屬性值之間要有空格
    4.開始標(biāo)簽  標(biāo)簽名后有空格 

按照標(biāo)簽在頁面中的呈現(xiàn)效果分類：
    1、行內(nèi)元素
        行內(nèi)元素定義:在一行內(nèi)顯示，只能設(shè)置左右間距，不可以設(shè)置上下間距。
        舉例：span del i em b strong a(title="鼠標(biāo)移入時顯示的文字";target=" "(新窗口打開的位置          _self:在本窗口打開;_blank:在新窗口打開) ...
    2、塊元素
        塊元素定義：可以設(shè)置寬高，獨占一行。
        舉例：div 標(biāo)題標(biāo)簽 列表標(biāo)簽 段落標(biāo)簽 ...
    3、行內(nèi)塊元素
        行內(nèi)塊元素定義：可以設(shè)置寬高，在一行顯示。
        舉例：img 【title="鼠標(biāo)移入時顯示的文字" 】 表單控件
元素的轉(zhuǎn)換
    塊元素：    display:block;
    行內(nèi)塊元素：display:inline-block;
    行內(nèi)元素：  display:inline;
元素的級別
    塊元素 > 行內(nèi)塊元素 > 行內(nèi)元素
元素嵌套規(guī)范
    1、同一級別可以相互嵌套
    2、級別高的元素可以嵌套級別低的元素
    3、段落標(biāo)簽只能嵌套行內(nèi)元素
    4、a標(biāo)簽不可以嵌套a標(biāo)簽；p不能嵌套p

盒子模型及其問題

四部構(gòu)成：
    1、margin  外間距 盒子與盒子之間的距離
    2、border  邊框
    3、padding 內(nèi)填充（內(nèi)間距） 邊框與內(nèi)容之間的距離。
    4、content 內(nèi)容
 margin-top  margin-right margin-bottom margin-left 
    margin: 50px;  上 右 下 左
    margin: 50px 100px;  上下    左右
        margin:0 auto;  auto自動
    margin: 50px 100px 150px; 上 左右 下
    margin: 50px 100px 150px 200px;  上 右 下 左
    border: 1px solid red;
    border-top  border-right border-bottom  border-left 
    border-top-width：上邊框的寬度

padding:設(shè)置方法同margin

content: ;
    width :  數(shù)值  百分比 auto
    height:  數(shù)值  百分比 auto

盒子模型的問題：
    1.大部分元素的margin和padding默認為0，但有一部分的margin和padding不為0，例如body  標(biāo)題標(biāo)簽（h1-h6）（ul ol  il等列表標(biāo)簽）  段落標(biāo)簽
    2.想領(lǐng)的兩個塊元素的margin會重合，值會取最大值
    3.margin可以為[負數(shù)]   ，padding不可以設(shè)置[負數(shù)]。
    4.行內(nèi)元素margin只有左右，沒有上下
    5.如果（1）發(fā)生嵌套關(guān)系的元素，（2）父元素沒有上邊框，（3）上padding ，（4）父元素與子元素之間沒有別的內(nèi)容，此時子元素margin-top就會作用到父元素身上  
margin-top的解決方式：
    1.用父元素的padding-top代替子元素的margin-top；
    2.給父元素添加overflow：hidden；

寬高的設(shè)置和計算

height：auto  /  百分比  /   px； 
width：auto  /  百分比  /   px； 
height：auto； 參照與父元素
width：auto；參照與內(nèi)容
box-sizing：border-box；  將邊框算入盒子內(nèi)；

一個元素實際的寬高
實際寬度 = border-left + padding-left + width +paddint-right + border-right;
實際高度 = border-top + padding-top + height + padding-bottom + border-bottom;

浮動

作用：讓塊元素橫排排列
  樣式： float：left；從左往右排列
        float：right；從右往左排列
原理：讓元素脫離文檔流，讓元素從文檔層浮動到浮動層。
引發(fā)的問題：父元素不設(shè)置高度，子元素都浮動，浮動的子元素撐不開父元素。（浮動的元素脫離文檔流）
    *解決方式一：給父元素添加  overflow：hidden；（超出部分隱藏）
    *解決方式二：在父元素內(nèi)容最后添加擁有清除浮動屬性的元素。
                clear：right/left/both ；  別的浮動對它的影響清除掉
            例：
                .box：after{
                    content: "";
                    display:block;
                    width: 0;
                    height: 0;
                    clear:both;
                }
    *解決方式三：父元素能設(shè)置高度的盡量設(shè)置高度
浮動之后的塊元素參照內(nèi)容：屬性值 auto

定位

定位的元素脫離文檔層，到達定位層
定位的元素會多出5個樣式：
    top right bottom left z-index：999
    上    右    下    左    層級（層級越高，離用戶越近）【只能在有定位屬性的元素上才能用】
層級：
z-index：整數(shù)；
定位的幾種方式：
1.相對定位：
    相對于自身來定位，在文檔層中保留原來的位置
    用法：
         position：relative；
2.絕對定位：
    相對于最近的 定位的 祖先元素 來定位，完全脫離文檔流（其他頂替其位置）
    用法：
         position：absolute；
        +方向值
3.固定定位：
    相對于瀏覽器的四條邊，完全脫離文檔流
    用法：
        position：fixed；
    top與bottom同時定義，那個樣式會作用到元素身上的判斷關(guān)系：
       top的權(quán)重比bottom的權(quán)重大
       left的權(quán)重比right的權(quán)重大
  元素作用時：
    1.如果是
        position：relative；
        left：；
        margin：；
        先作用margin，在作用relative；
    2.如果是
        position：absolute；
        left：；
        margin：；
        先作用absolute，在作用margin；
定位元素的居中方式：
方法一：
    1.水平居中：
        position：absolute；
        left：50%；
        margin-left：-自身長度的一半；
    2.垂直居中：
        position：absolute；
        top：50%；
        margin-top：-自身長度的一半；
    3.絕對居中：
        position：absolute；
        left：50%；
        top：50%；
        margin-left：-自身長度的一半；
        margin-top：-自身長度的一半；
方法二：
    1.水平居中：
        position：absolute；
        left：0；
        right：0

2D和3D

2D和3D屬性：
1.平移樣式
    transform:translate(x,y);  向上為負， 向下為正
        transform:translateX(100px);
    transform：rotate（180deg）   ；  （1turn）轉(zhuǎn)一圈
    平移  transform:translate（）   例子：translate（x，y） translateX（）
    旋轉(zhuǎn)  transform:rotate（）   例子rotate（180deg）順時針   -180deg  逆時針
        transform：rotate（）空格translate（）；
           transform-origin:px px;變換的中心點；
            left center；
    縮放  transform:scale（）     例子：scale（2）  放大為原來的2倍  scale（0.n）縮小為原                                        來的0.n   scale（m，n）  x軸m，y軸n
    斜切  transform:skew（）      例子：skew（45peg）  左拉伸45°  skew（45peg，m）
          
2. 過渡transition
    transition：all 0.5s；
           全部 時間
3.過渡的屬性樣式：  transition-property:   ，   ;
    可以為：屬性的全部樣式
4.過度的總時間： transition-duration：；
5.過渡的時間函數(shù)： transition-timing-function：；
        linear（勻速）   ease（開頭結(jié)尾慢，中間快）
        cubic-bezier（1，0.07，0.54，0.21） 貝塞爾曲線
6.延遲   transition-delay：；

3d效果：和2d的一樣transition，transform；
    prespective：給父元素加prespective（滅點的值）
    prespective-origin：x y；滅點的位置   調(diào)整觀察的角度（大多數(shù)情況不設(shè)置）
    transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg）
        transform：ratateY（45deg）
    transform：translate3d（0-1，0-1，px）

父元素：transform-style：preserve-3d；

動畫

動畫規(guī)則：
    @keyframes 動畫名（隨便給）{
        （動畫規(guī)則）
        from{}
        to{}
    }
    @keyframes 動畫名（隨便給）{
        （動畫規(guī)則）
        0%{}
        50%{}
        100%{}
    }
    @keyframes animation1{
        from{
           background-color:red;
        }
        to{
           background-color:blue;
        }
    }

掛載動畫:將動畫加到元素身上
    .元素{
        animation：animation1 時間  步數(shù) 時間函數(shù) 延遲時間 次數(shù) ；
    }
掛載多個動畫：
    .元素{
        animation：animation1 時間,animation2 時間,animation1 時間；
         其他動畫的相同的可以附件通過animation屬性；
    }
animation的樣式
動畫名：animation-name
時間： animation-duration 
步數(shù)：animation-steps：8；
時間函數(shù)：animation-timing-function
延遲： animation-delay
動畫次數(shù)： animation-iteration-count：infinite（無限次）/2；
指定下一次動畫是否逆向：animation-direction：alternate（逆向）/ normal（常規(guī)）；
最后的狀態(tài)：animation-fill-mode：backwards（默認（保持一開始的狀態(tài)））/forwards（保持當(dāng)前的狀態(tài)）；
狀態(tài)即指定動畫是否運動： animation-play-state: running（運行）/paused（靜止）;

元素分類

按照在頁面中的呈現(xiàn)效果：
1.行內(nèi)元素：在一行內(nèi)顯示 ，不可以設(shè)置寬高 ：（存放文字）
    span a b i strong del
2.行內(nèi)塊元素：在一行內(nèi)顯示，可以設(shè)置寬高：（有縫隙   不常用）
    img  表單控件
3.塊元素 ：可以設(shè)置寬高，獨占一行
    div 標(biāo)題標(biāo)簽（h1-h6） 列表標(biāo)簽（ul-li  ol-li     dl>dt+dd  段落標(biāo)簽 （p pre））
元素嵌套規(guī)范：
    1.同一級別可以相互嵌套
    2.級別高的可以嵌套級別低的元素
    3.p標(biāo)簽只能嵌套行內(nèi)元素
    4.a鏈接不能相互嵌套
元素的轉(zhuǎn)換：
    1.塊元素：display：block；
    2.行內(nèi)塊元素：display：inline-block；
    3.行內(nèi)元素：display：inline；

背景圖片以及瀏覽器內(nèi)核

背景圖
    先設(shè)大小，在引background；
    background: url(路徑) no-repeat left bottom/contain；
              //圖片位置    禁止重復(fù)  位置（top bottom left right）
1. 路徑：background-image：url（“”），url（“”）；加載多張背景圖
2. 背景圖大?。?nbsp; background-size：100px auto，100px auto；  會重復(fù)
3. 背景的圖重復(fù)：
          background-repeat：no-repeat，repeat；（無重復(fù)）
          background-repeat：repeat-x（x方向重復(fù)）
          background-repeat：repeat-y（y方向重復(fù)）
4. 背景圖的位置：
          background-position：x  y；（數(shù)值  方位值（top/bottom  left/right center（可以省略））  ）
5. 背景開始渲染的位置： background-origin:    ;
        padding-box；（默認）從padding位置開始渲染
        border-box；從邊框的位置開始渲染
        content-box；從內(nèi)容的位置開始渲染
6. 圖片結(jié)束渲染的位置：background-clip: ;
        padding-box；（默認）從padding位置結(jié)束渲染
        border-box；從邊框的位置結(jié)束渲染
        content-box；從內(nèi)容的位置結(jié)束渲染
7. 使得背景圖加載到瀏覽器中
    background-attachment: fixed;
8.可以簡寫：
    background：空格隔開；
9.  背景圖漸變
    background: linear-gradiend(top，顏色1，顏色2，顏色n)
                       //漸變開始的方向（默認top） 類似25deg（25度）
10.瀏覽器內(nèi)核//背景色漸變
    1.  /* 標(biāo)準(zhǔn)語法 */
        例子：background: linear-gradient(top,#3bbcff,#47eaff);    
    2.  /* 谷歌內(nèi)核 -webkit- */
        例子：background: -webkit-linear-gradient(top,#3bbcff,#47eaff);
    3. /* 火狐內(nèi)核 -moz- */
        例子：background: -moz-linear-gradient(top,#3bbcff,#47eaff);
    4. /* 歐鵬內(nèi)核 -o- */
        例子：background: -o-linear-gradient(top,#3bbcff,#47eaff);
    5. /* IE內(nèi)核 -ms- */
        例子：background: -ms-linear-gradient(top,#3bbcff,#47eaff);

文件的讀取方法路徑

絕對路徑：從盤符開始的一條完整路徑
相對路徑：兩個文件的位置關(guān)系

邊框的相關(guān)屬性【圓角，邊框形狀】

border-radius：邊框的半徑   設(shè)置圓角 n%或者num像素
border-style:dotted solid double dashed; 
      上邊框是點狀
      右邊框是實線
      下邊框是雙線
      左邊框是虛線

透明度

透明性的選擇：（整個容器都變）
opacity：；0-1之間的值；

字體

font-family =“ 字體”     //字體樣式可以被繼承

鼠標(biāo)移入樣式

span標(biāo)簽
  cursor：pointer；   鼠標(biāo)樣式：手型

陰影

box-shadow：x軸偏移量  y軸偏移量  陰影的模糊程度  陰影的大?。?和本身一樣大?。?nbsp; 陰影的顏色；

引入字符圖標(biāo)

引入字符圖標(biāo)：
行內(nèi)元素  隨意  
span  class=“iconfont 圖標(biāo)類名”
可調(diào)節(jié)樣式： 同文字

文檔流

文檔流：
     標(biāo)準(zhǔn)情況下 ，頁面元素從左往右  從上往下  依次排列

flex布局(規(guī)范的設(shè)計稿)-彈性布局

容器（父元素）的屬性：【display:flex;】
    *flex-direction: 決定主軸方向。
        row 主軸在水平方向，從左向右（默認）。
        row-reverse 主軸在水平方向，從右向左
        column 主軸在垂直方向，從上到下
        column-reverse  主軸在垂直方向，從下到上
    *flex-wrap: 決定項目換行
        wrap: 項目換行
        nowrap:  項目不換行（默認值）
        wrap-reverse： 項目換行且反轉(zhuǎn)
    *justify-content: 決定項目在主軸的對齊方式
        flex-start;主軸的起點
        flex-end;主軸的終點
        center;主軸的中心
        space-between;兩端對齊
        space-around;項目兩側(cè)距離相等
    *align-items：項目在交叉軸上的對齊方式（適用于一根軸線與多跟軸線）
        flex-start:交叉軸的起點
        flex-end：交叉軸的終點
        Center：交叉軸的中心
        baseline： 基線對齊（文本底部）
    *align-content:定義項目在交叉軸上的對齊方式（僅適用于多根軸線）
        flex-start;交叉軸的起點
        flex-end;交叉軸的終點
        center;交叉軸的中心
        space-between;兩端對齊
        space-around;兩側(cè)距離相等 
子元素（項目）的屬性：
    *order：定義項目的排列順序，數(shù)值越小，越靠前，默認值為0（可以取負值）。
    *flex-grow:定義項目的放大比例。默認值為0，即使存在剩余空間，也不放大。
    *flex-shrik：定義項目的縮小比例，默認值為1，空間不足，項目縮小;值為0時,空間不足,項目也不縮小.
    *flex-basis: 定義項目占據(jù)的主軸空間.默認auto或者自己添加像素;
    *align-self:定義單個項目在交叉軸的對齊方式.
        flex-start:交叉軸的起點
        flex-end：交叉軸的終點
        Center：交叉軸的中心

滾動條

overflow-x：auto；超出部分在x軸的表現(xiàn)形式。
            auto：自動；（如果超出，就自動以滾動條的形式顯示）
去滾動條：  加在具有overflow屬性的元素身上
    ::-webkit-scrollbar{
        height：0；
    }
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
  值                       描述                         測試
visible         不裁剪內(nèi)容，可能會顯示在內(nèi)容框之外。          測試
hidden          裁剪內(nèi)容 - 不提供滾動機制。                 測試
scroll          裁剪內(nèi)容 - 提供滾動機制。                   測試
auto            如果溢出框，則應(yīng)該提供滾動機制。              測試
no-display      如果內(nèi)容不適合內(nèi)容框，則刪除整個框。           測試
no-content      如果內(nèi)容不適合內(nèi)容框，則隱藏整個內(nèi)容。         測試

輪播圖

swiper(.js).com

表格

<table border="" width="" bgcolor="背景色" cellspacing="設(shè)置單元格間的距離" cellpadding="內(nèi)填充：內(nèi)容到邊框的距離" >
    <tr bgcolor="">[行]
        <td>td>[列]
        
    tr>
table>

table身上的屬性

table身上的屬性：
    border：表格邊框 cellspacing：單元格間的間距
    cellpadding：單元格的內(nèi)容與其邊框的內(nèi)邊距 
    bgcolor：表格的背景顏色 background：表格的背景圖片
    width：表格寬度 height：表格高度
    border-collaspe：collaspe：邊框合并，不疊加 cellspacing：0：邊框合并，但合并之后的邊框?qū)挾鹊扔?nbsp;      前兩個邊框?qū)挾戎?
    caption：表格標(biāo)題
    background:表格背景圖
    cellspacing:單元格之間的間隙寬度
    align:表格的水平對齊方式，通常是left，center，right

表格的標(biāo)題

<caption align="水平對齊方式" valign="標(biāo)題與表格的相對位置">caption>

單元格【tr】【td】

width：單元格寬度height：單元格高度
align：單元格內(nèi)文本的對齊方式,通常是左，中，右 left，center，right
valign：單元格內(nèi)文本的對齊方式,通常是上，中，下 top，middle，bottom
nowrap：在為設(shè)置單元格寬度時，當(dāng)文本長度寬于單元格寬度，將要換行時，該標(biāo)簽會使其不換行

    <tr align="center" valign="bottom">
        <td align="center" nowrap>手機空中免費充值td>
        <td width="100px">IP卡td>
        <td width="100px" bgcolor="#006400" valign="top">網(wǎng)游td>
    tr>

表格的跨行與跨列【td】

rowspan：跨行標(biāo)簽，表示跨了多少行
colspan：跨列標(biāo)簽，表示跨了多少列
<table border="3" bordercolor="plum" width="300" height="100" align="center" cellspacing="0">
    <tr>
        <td rowspan="6" background="../img/4.jpg">td>
        <td rowspan="3">td>
        <td rowspan="2">td>
        <td>td>
    tr>
    <tr>
        <td >td>
    tr>
    <tr>
        <td rowspan="2">td>
        <td>td>
    tr>
    <tr>
        <td rowspan="3">td>
        <td>td>
    tr>
    <tr>
        <td rowspan="2">td>
        <td>td>
    tr>
    <tr>
        <td>td>
    tr>
table>

表格標(biāo)簽拓展及其屬性

    thead：定義表格的表頭。  
    tbody：定義表格主體（正文）。
    tfoot：定義表格的頁腳（腳注或表注）。 
    colgroup：標(biāo)簽用于對表格中的列進行組合，以便對其進行格式化。
    注意：不管thead、tbody、tfoot的代碼先后順序如何，html顯示時，始終是先顯示thead，再顯示tbody，最后顯示tfoot。
1、<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽！
2、<tfoot> 元素內(nèi)部必須包含一個或者多個 <tr> 標(biāo)簽。
3、<tbody> 元素內(nèi)部必須包含一個或者多個 <tr> 標(biāo)簽。
4、必須在 table 元素內(nèi)部使用這些標(biāo)簽。
5、當(dāng)不同行間的單元格合并時各單元格所在的行不要加tbody標(biāo)簽。

GPU云服務(wù)器云服務(wù)器 html的css樣式 php使用css樣式 html中css樣式 css和html的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1146.html

發(fā)表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 736·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3981·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3807·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 3871·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3802·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3904·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6183·2021-11-29 11:00

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！