CSS樣式的處理

這篇文章主要介紹了關於CSS樣式的處理 ，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

4/23/2018 8:23:35 AM

CSS

晨測：

1. 標準的一個html檔案的結構2. 指定顏色和資源位置的方式3. 常用標籤    設定各級標題：    設定段落：    設定文字格式設定：    超連結：    圖片標籤：    表格的基本形式：    表單標籤：    架構標籤：

回顧

今日概要

一、CSS概述二、CSS的選取器（認識）三、CSS樣式和屬性（練習）四、重構商城首頁p+CSS(頁面配置)（重點） 浮動/更改顯示方式

一、CSS概述

<1>概念

p,就是一個HTML元素，區塊層級元素，通常結合CSS進行頁面的布局。CSS,層疊樣式表，給HTML元素增強顯示。

<2>作用

樣式定義如何顯示HTML元素，頁面的布局（美化HTML效果）

<3>使用方式

內聯樣式方式：在當前的元素屬性中直接設定style屬性，適用性差，只能作用於當前元素。    style屬性是HTML元素通用的屬性內部樣式方式：在head標籤中，使用<style>標籤來設定樣式，適用性強，可以同時作用於一個頁面的多個元素。外部樣式方式：建立.css樣式檔案，在此檔案中設定元素的樣式，在需要使用的頁面中使用<link>元素引入。適用性最強，            可以通過作用於多個頁面。

<4>文法

選取器｛    樣式申明｝1. 尋找需要設定樣式的元素  ，選取器可以用來尋找元素2. 設定樣式  ，屬性名稱：屬性值 ；屬性名稱：屬性值 ；3. 例如：    h1{        color:#ff0000;        font-size:25px;        ...:...;    }       注意：樣式申明中，如果不是最後一個屬性值，後面的分號不可以省略。

<5>特點

繼承性：子項目可以繼承父元素的樣式層疊性：同一個元素可以使用多個樣式，如果不衝突，效果疊加優先順序：預設的樣式 ---外部樣式  --- 內部樣式---  內聯樣式 （由低到高，就近原則）

二、選取器

<1>元素選取器

文法格式：元素名稱{            樣式申明；          }       特點：適用於相同元素的樣式設定

<2>類別選取器

文法格式： .類屬性值{          class屬性：屬性值            樣式申明；         }特點：適用於不相同元素的樣式設定    例如：通過類別選取器尋找h1元素        <h1 class="h1class"></h1>        .h1class{        }

<3>id選取器

文法格式： #id屬性值{            樣式申明；        }特點：使用於一個具體的元素的樣式設定例如：通過id選取器尋找一個具體的h1標籤        <h1 id="idvalue"></h1>        #idvalue{        }

<4>選取器組

文法格式：選取器1，選取器2，...{            樣式申明；        }特點：可以在多個不同的選取器中重用樣式例如：    #idvalue , h1 , .classvalue,p,#idvalue2,.classvalue2{        background-color:yellow;    }

<5>衍生類別選取器

文法格式1：父元素名稱 > 子項目名稱 {                樣式申明；          }特點：子項目選取器，只作用於指定兒子輩的元素文法格式2：父元素名稱   子項目名稱 {                樣式申明；          }特點：後台選取器，作用於指定的所有後輩元素例如：    <p>        <p>                <p>                    <p></p>                </p>        </p>        <p></p>        <h1><h1>        <h3></h3>        <span></span>    </p>    <p></p>

<6>屬性選取器

文法格式：元素名稱[屬性="屬性值"]{            樣式申明；        }例如：<input type="text" />     input[type="text"]{        background-color:orange;     }

<7>偽類別選取器

當一個元素的狀態發生改變的時候，更改元素的樣式文法格式：    :link  適用於超連結    :visited  適用於超連結    :active   通常適用於按鈕        :focus    通常適用於輸入框    :hover  滑鼠懸浮在元素上時例如：    <a hred="#" id="a1"> 請點擊我1 </a>    <a hred="#" id=""> 請點擊我2 </a>    <a hred="#" id=""> 請點擊我3 </a>    #a1:link{        樣式申明；    }    #a1:visited{        樣式申明；    }

三、樣式和屬性

<1>背景的樣式

background-color:顏色值，設定背景顏色background-image:圖片的url，設定背景圖片background-repeat:相片順序，設定背景圖片的相片順序                repeat;                repeat-x;                repeat-y;                no-repeat;background-attachment:方式，設定背景圖片是否跟隨內容移動                scroll;                fixed;

<2>邊框

border: 寬度   樣式   顏色  border: 樣式值，（ 設定四個邊框的樣式 ）       border-left/right/top/bottom:樣式值  (設定各個邊框的樣式)

<3>浮動的設定和取消（重點）

將元素脫離文檔的普通流中，可以向左或者向右浮動，直到他的邊框遇到其父邊框或者其他浮動元素的邊框時停止。添加元素：<p id="clearp"></p>         #clearp{            clear:both;              }

<4>盒子模型(重點)

外邊距：margin    margin-left/right/top/bottom:距離；    margin:距離；    margin:auto;    //置中效果內邊距：padding    padding-left/right/top/bottom:距離；    padding:距離；

<5>文本樣式

color:顏色font-size:字型大小font-fimaily:字型font-weight:粗體

<6>表格屬性

border:邊框border-collapse:collapse;去除儲存格之間的間距

<7>列表屬性

list-style-type: 樣式；     列表顯示的樣式list-style-image:url(“圖片資源位置”)； 列表顯示的樣式

<8>滑鼠樣式

    cursor:help;          wait;          default;          pointer;          ... ...

<9>顯示方式

display屬性，更改元素的顯示方式：    block ,將行內元素的顯示方式轉換成區塊層級元素的顯示方式；（上下顯示）    inline，將區塊層級元素的顯示方式轉換成行內元素的顯示方式；（左右顯示，不能設定寬高）    inline-block，將元素轉換成行內塊元素；（左右顯示，設定寬高的）<p></p><p></p><p></p>p{    display:inline;}

作業：

使用p+重css構簡易的商城首頁