1. 程式人生 > >CSS簡單介紹

CSS簡單介紹

clip 簡單介紹 分組 ger 超鏈接 事情 auto script light

一、方式

1.內聯式引用

2.內部引用

3.外部引用(鏈接式引用,導入式引用)

4.優先級(由高到低) 內聯式》外部鏈接式》內部式》外部導入式

二、內聯式

1.直接從HTNL標簽上註明格式

2。使用方法簡單,不建議使用

3.維護成本高

三、內部引用

1.將樣式聲明在HTMl頁面中

2.使用<style>和</style>標簽進行聲明

3.把CSS代碼集中在同一個區域,不僅便於維護,頁面結構也清晰了

4.內部定義的樣式不能被其他頁面所使用

5.內部引用只使用與對特殊頁面設置獨特風格。

四、外部鏈接式引用

1.使用頻率最高,最實用

2.將CSS樣式定義在一個獨立的文件中,使用.css作為擴展名,使用HTML的Link對象來引用它。

<link rel="stylesheet" type="text/css" href = "./style/1.css" />

將CSS與HTML分離,同一個CSS文件可以被不同的HTML所使用

3.便於維護

五、外部導入式引用

1.以import方式導入的樣式表,在HTML初始化時,會被導入HTML頁面中,作為文件的一部分。

2.鏈接式引用只有在HTML標簽需要此樣式時才被引入。

3.導入式最大用處就是可以在一個HTML中導入多個樣式表。

<style type="text/css">

 @import url("./style/1.css”)

</style>

六、css註釋與樣式選擇符

1.註釋: /* */

2.樣式選擇符:標簽選擇符 類選擇符 ID選擇符

優先級(由高到低):ID選擇符》類選擇符》標簽選擇符

3.標簽選擇符

@CHARSET "UTF-8";

body{
    color:black /*頁面文字為黑色*/
}
p {
    font-family:"sans serif" /*字體為sans serif"*/
}
p {
    texe-align:center;color:red  /*文字居中,文字紅色*/
}

4.類選擇符

/*類選擇符*/
p.right {
    texe-align:right /*段落向右對齊*/
}
p.center {
    texe-align:center /*段落居中*/
}
/*
<body>
    <p class = "right">段落向右對齊</p>
    <p class = "center">段落居中</p>
</body>
*/
/*另外一種表達方式*/
.center {
    texe-align:center /*段落居中*/
}
/*

    <h1 class = "center">標題居中</h1>
    <p class = "center">段落居中</p>

*/

5.ID選擇符

/*ID選擇符*/
#center {
    texe-align:center /*段落居中*/
}
/*
<body>
    <p id = "center">段落居中</p>
</body>
*/

6.選擇符的嵌套

/*選擇符的鑲嵌*/
#main li{
    color:red  /*文字紅色*/
}
/*
<body>
    <div id="main">
        <ul>
            <li>列表項1</li>
            <li>列表項2</li>
            <li>列表項3</li>
        </ul>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>
</body>
*/

7.樣式表的層疊性

1.層疊性就是繼承性

2.樣式表的繼承規則是:外部元素的樣式會被該元素所包含的其他元素所繼承

3.所有在元素中鑲嵌的元素都會繼承外層元素指定的屬性值

<html>
  <head>
    <title>樣式表的層疊性--繼承</title>
    <style type="text/css">
    <!--
    div{
        font-size: 36px;
        text-decoration: underline;
    }
    p{
        line-height: 80px;
    }
    -->
    </style>
  </head>
  
  <body>
    <div id="main">
        <ul>
            <li>列表項1</li>
            <li>列表項2</li>
            <li>列表項3</li>
        </ul>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>
    
  </body>
</html>

八、CSS盒子模型

1.組成:內容、邊框border、填充padding、邊界margin等四部分組成。

CSS 字體屬性(Font)

屬性描述CSS
font 在一個聲明中設置所有字體屬性。 1
font-family 規定文本的字體系列。 1
font-size 規定文本的字體尺寸。 1
font-size-adjust 為元素規定 aspect 值。 2
font-stretch 收縮或拉伸當前的字體系列。 2
font-style 規定文本的字體樣式。 1
font-variant 規定是否以小型大寫字母的字體顯示文本。 1
font-weight 規定字體的粗細。 1

font-weight:字體粗細

屬性值描述
normal 默認值。定義標準的字符。
bold 定義粗體字符。
bolder 定義更粗的字符。
lighter 定義更細的字符。
100、200…900 400 等同於 normal,而 700 等同於 bold。

font-size:字體大小

屬性值描述
xx-small、x-small、small、medium、large、x-large、xx-large 把字體的尺寸設置為不同的尺寸,從 xx-small 到 xx-large。默認值:medium。
smaller 把 font-size 設置為比父元素更小的尺寸。
larger 把 font-size 設置為比父元素更大的尺寸。
length 把 font-size 設置為一個固定的值。
% 把 font-size 設置為基於父元素的一個百分比值。

font-family:字體

font-style:斜體

屬性值描述
normal 默認值。瀏覽器顯示一個標準的字體樣式。
italic 瀏覽器會顯示一個斜體的字體樣式。
oblique 瀏覽器會顯示一個傾斜的字體樣式。

CSS 背景屬性(Background)

屬性描述CSS
background 在一個聲明中設置所有的背景屬性。 1
background-attachment 設置背景圖像是否固定或者隨著頁面的其余部分滾動。 1
background-color 設置元素的背景顏色。 1
background-image 設置元素的背景圖像。 1
background-position 設置背景圖像的開始位置。 1
background-repeat 設置是否及如何重復背景圖像。 1
background-clip 規定背景的繪制區域。 3
background-origin 規定背景圖片的定位區域。 3
background-size 規定背景圖片的尺寸。 3

CSS 文本屬性(Text)

屬性描述CSS
color 設置文本的顏色。 1
direction 規定文本的方向 / 書寫方向。 2
letter-spacing 設置字符間距。 1
line-height 設置行高。 1
text-align 規定文本的水平對齊方式。 1
text-decoration 規定添加到文本的裝飾效果。 1
text-indent 規定文本塊首行的縮進。 1
text-shadow 規定添加到文本的陰影效果。 2
text-transform 控制文本的大小寫。 1
unicode-bidi 設置文本方向。 2
white-space 規定如何處理元素中的空白。 1
word-spacing 設置單詞間距。 1
hanging-punctuation 規定標點字符是否位於線框之外。 3
punctuation-trim 規定是否對標點字符進行修剪。 3
text-align-last 設置如何對齊最後一行或緊挨著強制換行符之前的行。 3
text-emphasis 向元素的文本應用重點標記以及重點標記的前景色。 3
text-justify 規定當 text-align 設置為 "justify" 時所使用的對齊方法。 3
text-outline 規定文本的輪廓。 3
text-overflow 規定當文本溢出包含元素時發生的事情。 3
text-shadow 向文本添加陰影。 3
text-wrap 規定文本的換行規則。 3
word-break 規定非中日韓文本的換行規則。 3
word-wrap 允許對長的不可分割的單詞進行分割並換行到下一行。 3

CSS 外邊距屬性(Margin)

屬性描述CSS
margin 在一個聲明中設置所有外邊距屬性。 1
margin-bottom 設置元素的下外邊距。 1
margin-left 設置元素的左外邊距。 1
margin-right 設置元素的右外邊距。 1
margin-top 設置元素的上外邊距。 1

CSS 內邊距屬性(Padding)

屬性描述CSS
padding 在一個聲明中設置所有內邊距屬性。 1
padding-bottom 設置元素的下內邊距。 1
padding-left 設置元素的左內邊距。 1
padding-right 設置元素的右內邊距。 1
padding-top 設置元素的上內邊距。 1

CSS 邊框屬性(Border 和 Outline)

屬性描述CSS
border 在一個聲明中設置所有的邊框屬性。 1
border-bottom 在一個聲明中設置所有的下邊框屬性。 1
border-bottom-color 設置下邊框的顏色。 2
border-bottom-style 設置下邊框的樣式。 2
border-bottom-width 設置下邊框的寬度。 1
border-color 設置四條邊框的顏色。 1
border-left 在一個聲明中設置所有的左邊框屬性。 1
border-left-color 設置左邊框的顏色。 2
border-left-style 設置左邊框的樣式。 2
border-left-width 設置左邊框的寬度。 1
border-right 在一個聲明中設置所有的右邊框屬性。 1
border-right-color 設置右邊框的顏色。 2
border-right-style 設置右邊框的樣式。 2
border-right-width 設置右邊框的寬度。 1
border-style 設置四條邊框的樣式。 1
border-top 在一個聲明中設置所有的上邊框屬性。 1
border-top-color 設置上邊框的顏色。 2
border-top-style 設置上邊框的樣式。 2
border-top-width 設置上邊框的寬度。 1
border-width 設置四條邊框的寬度。 1
outline 在一個聲明中設置所有的輪廓屬性。 2
outline-color 設置輪廓的顏色。 2
outline-style 設置輪廓的樣式。 2
outline-width 設置輪廓的寬度。 2
border-bottom-left-radius 定義邊框左下角的形狀。 3
border-bottom-right-radius 定義邊框右下角的形狀。 3
border-image 簡寫屬性,設置所有 border-image-* 屬性。 3
border-image-outset 規定邊框圖像區域超出邊框的量。 3
border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 3
border-image-slice 規定圖像邊框的向內偏移。 3
border-image-source 規定用作邊框的圖片。 3
border-image-width 規定圖片邊框的寬度。 3
border-radius 簡寫屬性,設置所有四個 border-*-radius 屬性。 3
border-top-left-radius 定義邊框左上角的形狀。 3
border-top-right-radius 定義邊框右下角的形狀。 3
box-decoration-break 3
box-shadow 向方框添加一個或多個陰影。 3

CSS 列表屬性(List)

屬性描述CSS
list-style 在一個聲明中設置所有的列表屬性。 1
list-style-image 將圖象設置為列表項標記。 1
list-style-position 設置列表項標記的放置位置。 1
list-style-type 設置列表項標記的類型。 1
marker-offset 2

九、使用css控制超鏈接

1.css提供了對超鏈接進行控制的能力,包括了超鏈接不同狀態、偽類、按鈕特效等等。

2.css允許針對超鏈接的未訪問、已訪問、活動、圖標懸停等狀態分別定義了不同的樣式。這樣便於可為網站添加奇妙而實用的效果。可以通過偽類(pseudo-class)來實現這些效果。

3.偽類是針對HTML元素的條件和事件所定義的CSS樣式。

十、css偽類

/*從未訪問過的鏈接樣式*/
a:LINK {
    color: #6699CC;
}
/*已訪問的鏈接樣式*/
a:VISITED {
    color: #660099;
}
/*活動的鏈接*/
a:ACTIVE {
    background-color: #FFFF00;
}
/*有鼠標懸停的鏈接樣式*/
a:HOVER {
    color: orange;
    font-style: italic;
}

十一、按鈕超鏈接

<!DOCTYPE html>
<html>
  <head>
    <title>button.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
    <!--
    a{
        font-family: Arial;
        font-size:1em;
        text-align: center;
        margin:3px; 
    }
    a:LANG,a:VISITED{
        color: #002020;
        padding: 4px 10px 4px 10px;
        background-color: #00d8db;
        text-decoration: none;
        border-top: 1px solid #EE00EE;/*邊框實現陰影效果*/
        border-left: 1px solid #EE00EE;
        border-bottom: 1px solid #710071;
        border-right: 1px solid #710071;
    
    }
    a:HOVER{
        color:#ffffff;
        padding: 5px 8px 4px 12px;
        background-color: #00c4c9;
        text-decoration: none;
        border-top: 1px solid #710071;/*邊框實現陰影效果*/
        border-left: 1px solid #710071;
        border-bottom: 1px solid #EE00EE;
        border-right: 1px solid #EE00EE;
    }
    -->
    </style>
  </head>
  
  <body>
    <a href="#">首頁</a>
    <a href="#">列出所有聯賽</a>
    <a href="#">添加新聯賽</a>
    <a href="#">註冊聯賽</a>
    <a href="#">用戶登入</a>
  </body>
</html>

十二、css/div頁面布局

1.div標簽是實現頁面布局的重要標簽,是英文Division的縮寫,即分區、分塊的意思,是一個大容器。

2.span是另外一個常用語布局的標簽,span在一行內定義一個區域,也就是一行內可以被多個span劃分成好幾個區域,是一個小容器。

3.大容器中可以放置小容器。

4.css與div

<!DOCTYPE html>
<html>
  <head>
    <title>css與div</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        #left{
            background-color: #CCC0CC;
            float: left;
            height: 300px;
            width: 200px;
            border: 9px soid #333333;
        }
            #right{
            background-color: #CCCCCC;
            float: left;
            height: 300px;
            width: 200px;
            border: 2px soid #333333;
        }
    </style>
  </head>
  
  <body>
    <div id="left">左側區域</div>
    <div id="right">右側區域</div>
  </body>
</html>

5.布局居中顯示

<!DOCTYPE html>
<html>
  <head>
    <title>css與div</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        #main{
            width: 408px;
            margin-top: 120px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0px;
        }
        #left{
            background-color: #CCC0CC;
            float: left;
            height: 300px;
            width: 200px;
            border: 9px soid #333333;
        }
            #right{
            background-color: #CCCCCC;
            float: left;
            height: 300px;
            width: 200px;
            border: 2px soid #333333;
        }
    </style>
  </head>
  
  <body>
      <div id = "main">
        <div id="left">左側區域</div>
        <div id="right">右側區域</div>
    </div>
  </body>
</html>

CSS簡單介紹