技術標籤：css 溢位隱藏css 黑體css按鈕樣式css設定input框長度css滑鼠懸停樣式javaee 超連結提交表單

一、表單

1. 表單元素

用來宣告資料提交的範圍,只有在此元素內的資料可以提交給伺服器.

• action：宣告資料提交的目標

• method：

• enctype：

 action="https://www.yuque.com"/>

2. 表單控制元件

用來讓用書輸入資料

input元素(9個),用type屬性區分

• 文字框：

• value：設定預設值

• maxlength：設定最大長度

• readonly：設定只讀

    賬號：type="text" value="YuQue" maxlength="10" readonly/>
 

• 密碼框：屬性值同文本框

    密碼：type="password"/>

• 單選框

• name：組名，同一組radio互斥

• checked：設定預設選中

• value：?

    性別：  type="radio" name="sex" checked/>  type="radio" name="sex"/>

• 多選框

• checked：設定預設選中

• name：?

• value：?

    興趣：  type="checkbox" checked/>音樂  type="checkbox"/>看書
 

• 檔案框

    頭像：type="file"/>P>

• 隱藏框

    type="hidden"/>P>

• 按鈕

• submit：提交表單中的資料

• reset：將表單中的資料重置為初始值

• button：沒有任何功能，須通過js定義功能

    type="submit" value="註冊"/>  type="reset" value="重置"/>  type="button" value="稽核通過"/>
 

其他元素(3個)

• label(標籤)

• lable：用來管理表單中的文字，可以將文字與控制元件繫結在一起，從而增加了控制元件的受力面積.

• id：元素的唯一標識，相當於元素的身份證號.任何元素都可以有id，程式設計師有義務保障元素的id不重複.

    type="checkbox" id="c1"/>  for="c1">我已閱讀並自願遵守此協議

• selected(下拉選)

• selected：設定預設選中

• value：？

    城市:      請選擇        selected>北京    上海    廣州  

• textarea(文字域)

• cols：列數

• rows：行數

    簡介：    cols="30" rows="5">

二、CSS(Cascading Style Sheets)

1. CSS定義：

• CSS：層疊樣式表，又叫級聯樣式表，簡稱樣式表

• 用於HTML文件中元素的樣式定義

• 實現了將內容與表現分離

• 提高程式碼的可重用性和可維護性

2. CSS的基礎語法

• 選擇器：決定哪些元素使用這些規則

• 宣告：由一個或多個屬性/值對組成，用於設定元素的外觀表現

3. CSS樣式表

• 內聯樣式

定義：在元素 style屬性內直接寫樣式，此樣式無法複用

• 內部樣式

• 定義：在head元素裡面的style標籤裡寫樣式,次樣式可以被當前頁面上眾多元素複用.

• 外部樣式

• 定義：單獨在CSS檔案中寫的樣式，哪個網頁引用該檔案，這網頁就能複用這些樣式

• codeDemo:

charset="UTF-8">CSS樣式表    h2 {
        color: blue;
    }
rel="stylesheet" href="myStyleSheet.css"/>      

sytele="color:red;">CSS內聯樣式

• css檔案

@charset "UTF-8";p {    color: green;}

4. CSS樣式表特徵

• 繼承性

• 父元素的樣式可以被子元素所繼承(顏色、字型)

• 層疊性

• 給一個元素設定不同的宣告,其效果會疊加.

• 優先順序

• 給同一個元素設定相同的宣告，效果以後這為準,也叫就近原則.

charset="UTF-8">Insert title here    /* 1.繼承性：父元素的樣式可以被子元素所繼承.(顏色、字型) */
    body {
        font-family:"微軟雅黑", "文泉驛正黑", "黑體";
    }
    /* 2.層疊性：給一個元素設定不同的宣告，其效果會疊加. */
    h1 {
        color: red;
    }
    /* ... */
    h1 {
        font-size: 50px;
    }
    /* 3.優先順序：給同一個元素設定相同的宣告,效果以後者為準,也叫就近原則. */
    h2 {
        color: green;
    }
    /* ... */
    h2 {
        color: yellow;
    }
    
    

5. CSS 選擇器

• 元素選擇器

• HTML文件中的元素就是選擇器，比如：

  ,

  等

• 類選擇器

• 選擇class等於某值的所有原色.

• class 是程式設計師根據邏輯自己給元素增加的分類

  .girl {
    color: pink;
  }
style>

• id選擇器

• 選擇 id 等於某值的唯一的元素

  #p4 {
    color: yellow;
  }

• 選擇器組

• 寫出一組選擇器，選中每個選擇器所對應的目標的並集

  .girl, #p4 {
    font-weight: bold;
  }

• 派生選擇器

• 選擇某元素的子孫

#p5 b {

color: red;

}

• 選擇某元素的兒子

#p5>b {

font-size: 30px;

}

• 偽類選擇器：根據元素的狀態選擇元素

• link：選擇未訪問過的超連結

a:link {

color: green;

}

• visited：選擇已訪問過的超連結

a:visited {

color: red;

}

• active：選擇啟用態的(正在點選的)按鈕

#i1:active {

background-color: blue;

}

• focus：選擇有焦點(游標)的文字框/密碼框/文字域

#i2:focus {

background-color: green;

}

• hover：選擇滑鼠懸停態(觸碰)的圖片

img: hover {

width: 250px;

height: 250px;

}

• codeDemo:

charset="UTF-8">Insert title here    /* 2.類選擇器：選擇class等於某值的所有元素.class是程式設計師根據邏輯自己給元素增加的分類. */
    .girl {
        color: pink;
    }
    /* 3.id選擇器：選擇id等於某值的唯一的元素. */
    #p4 {
        color: yellow;
    }
    /* 4.選擇器組:寫出一組選擇器，選中每個選擇器所對應的目標的並集. */
    .gril,#p4 {
        font-weight: bold;
    }
    /* 5.派生選擇器 */
    /* 5.1選擇某元素的子孫 */
    #p5 b {
        color: red;
    }
    /* 5.2選擇某元素的兒子 */
    
    #p5>b {
        font-size: 30px;
    }
    
    /* 6.偽類選擇器：根據元素的狀態選擇元素 */
    /* 6.1選擇未訪問過的超連結 */
    a:link {
        color: green;
    }
    /* 6.2選擇已訪問過的超連結 */
    a:visited {
        color: red;
    }
    /* 6.3選擇啟用太(正在點)的按鈕 */
    #i1:active {
        background-color: blue;
    }
    /* 6.4選擇有焦點的文字框/密碼框/文字域 */
    
    #i2:focus {
        background-color: green
    }
    /* 6.5選擇滑鼠懸停太(觸碰)的圖片 */
    
    img:hover {
        width: 250px;
        height: 250px;
    }
    

class="girl">

class="girl">lucy

id="p4">Tom

id="p5">

北京市海淀區肖家河西區農大南路10號回遷樓小區16號樓 href="http://www.baidu.com">百度 href="www.csdn.com">CSDN href="https://www.yuque.com">YuQue type="button" value="按鈕" id="i1"/> 選擇有焦點的文字框type="text" id="i2"/> P> src="../images/01.jpg" /> p>body>html>

BOX模型

• border 邊框

• 四個邊設定相同的邊框

p {

border: 1px dashed red;

}

• 單個邊設定邊框(left/right/top/bottom)

h1 {

border-left: 10px solid blue;

}

• overflow: auto 內容溢位

塊元素一般寬度預設是100%，高度會自適應,內容越多，它越高.當給他固定的高度時,可能會導致內容溢位.

p {

width: 300px;

height: 60px;

/* 溢位時的處理 */

overflow: auto;

}

charset="UTF-8">Insert title here    /*1.四個邊框設定相同的邊框*/
    p {
        border: 1px dashed red;
    }
    /*2.單個邊設定邊框*/
    h1 {
        border-left: 10px solid blue;
    }
    /*3.塊元素一般寬度預設是100%，高度會自適應,內容越多,它越高.當給他固定的高度時,可能會導致內容溢位 */
    p {
        width: 300px;
        height: 60px;
        /*溢位時的處理*/
        overflow: auto;
    }
    

框模型設定

1. 四個邊設定相同的邊距

• #d0

• #d1

  #d1 {
    padding: 20px;
    margin: 30px;
  }
sytle>

2. 四個邊設定不同的邊距(順時針 上右下左)

• #d2

  #d2 {
    padding: 10px 20px 30px 40px;
    margin: 40px 30px 20px 10px;
  }

3. 單個邊設定邊距 (left/right/top/bottom)

• #d3

  #d3 {
    padding-left: 20px;
    margin-bottom: 40px;
  }

4. 對邊設定相同的邊距(順訊：上下、左右)

• #d4

  #d4 {
    padding: 20px 40px;
    margin: 30px 10px;
  }

5. 對邊設定邊距的特例

• #d5

• 在設定外邊距時，若左右外邊距值為auto，則該元素水平居中.

  #d5 {
    margin: 20px auto;
  }

• codeDemo

charset="UTF-8">Insert title here    div {
        border: 1px solid red;
        width: 100px;
        height: 100px;
    }
    /* 1.四個邊設定相同的邊框 */
    #d1 {
        padding: 20px;
        margin: 30px;
    }
    /* 2.四個邊設定不同的邊距(順時針：上右下左) */
    #d2 {
        padding: 10px 20px 30px 40px;
        margin: 40px 30px 20px 10px;
    }
    /* 3.單個邊設定邊距 */
    #d3 {
        padding-left: 20px;
        margin-bottom: 40px;
    }
    /* 4.對邊設定相同的邊距  順序：上下 左右*/
    #d4 {
        padding: 20px 40px;
        margin: 30px 10px;
    }
    /* 5.對邊設定邊距的特例
        在設定外邊距時，若左右外邊距值為auto，則該元素水平居中 */
    #d5 {
        margin: 20px auto;
    }