CSS學習筆記一_ZenDei技術網路在線

CSS 選擇器： CSS id選擇器： id選擇器可以為標有特定 id的HTML元素指定特定的樣式 id選擇器是以 “ ” 來定義的 id選擇器常建立派生選擇器如上，在使用sidebar選擇器時，應用在p標簽上會使用第一個CSS樣式單獨的選擇器 id選擇器即使不被用來創建派生選擇器，也可以單 ...

CSS 選擇器：

CSS id選擇器：

id選擇器可以為標有特定 id的HTML元素指定特定的樣式
id選擇器是以 “#” 來定義的

<!DOCTYPE html>
<html>
<head>
    <title>Node</title>
    <style type="text/css">
        #red {color: red;}
        #green {color: green;}
    </style>
</head>
<body>
    <p id="red">id選擇器：red -- 紅色</p>
    <p id="green">id選擇器：green -- 綠色</p>
</body>
</html>

id選擇器常建立派生選擇器

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
}

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

#sidebar h2 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
    }

如上，在使用sidebar選擇器時，應用在p標簽上會使用第一個CSS樣式

單獨的選擇器

id選擇器即使不被用來創建派生選擇器，也可以單獨使用

#sidebar {
    border: 1px dottde #00;
    padding:10px;
}

CSS 類選擇器：

類選擇器以一個點號定義

.center{text-align:center;}

<h1 class="center">
    Hello!
</h1>

和id選擇器一樣，class也可以被用作派生選擇器

.fancy td {
    color: #f60;
    background:#666;
}

CSS 屬性選擇器：

為所有title屬性的所有元素設置樣式：

[title]
{
    color:red;
}

CSS 創建：

外部樣式表：

每一個頁面可以使用< link >標簽鏈接到樣式表文件（位於文檔頭部）

<head>
    <link rel="stylesheet" type="text/css" href="*.css" />
</head>

內部樣式表：

在文檔頭部的< style >標簽中定義內部樣式表

<head>
    <style type="text/css">
        hr {color: sienna;}
        #nu {color: ber;}
        .nm {color:bre;}
    </style>
</head>

內聯樣式表：

和標簽疊在一起，用 “style”屬性表示設置css樣式

<p style="color:bre">
    Hello！
</p>

如果一個元素擁有多個CSS選擇器，會按照內部 -->外部的次序進行設置渲染 -

CSS 樣式：

背景樣式：

背景色：

background-color屬性： 設置背景色，接受任何顏色值

背景圖像：

background-image屬性：設置背景圖像（url圖像相對位置）
background-repeat屬性：設置背景無限平鋪
background-position屬性：背景定位（居左，居中，居右）
關鍵字：

圖像防止的關鍵字，作用就是可以簡單明瞭；

關鍵字等價和含義

center 中心居中

top 頂部居中

bottom 底部居中

right 右側居中

left 左側居中
百分數值：

（左上角）百分數值同時應用於元素和圖像
長度值：

元素內邊距左上角的偏移

關鍵字	等價和含義
center	中心居中
top	頂部居中
bottom	底部居中
right	右側居中
left	左側居中

背景關聯：

background-attachment屬性：頁面向下滾動時，背景也會一起滾動

文本樣式：

縮進文本：

text-indent屬性： 實現文本縮進，屬性值是px/em/負值/百分數

水平對齊：

text-align屬性： 實現文本的對齊方式

left：左對齊

right：右對齊

center：居中（和< CENTER >標簽不同，後者是對元素操作，而前者只對文本有效）

justify“：兩端對齊

字間隔：

word-spacing屬性： 可以改變字或單詞之間的標準間隔，預設（normal）為 0

正數值：加大間隔

負數值：縮小間隔

字元轉換：

text-transform屬性： 處理文本的大小寫

none：不進行操作

uppercase：全大寫

lowercase：全小寫

capitalize：首字母大寫

文本裝飾：

text-decoration屬性：

none：無

underline：為元素添加下劃線

overline：為文本頂端添加上劃線

line-through：為文本添加刪除線

blink：為文本添加閃爍效果

處理空白符：

white-space屬性： 文檔中對空格、換行、tab字元的處理

下麵的表格總結了 white-space 屬性的行為：

值	空白符	換行符	自動換行
pre-line	合併	保留	允許
normal	合併	忽略	允許
nowrap	合併	忽略	不允許
pre	保留	保留	不允許
pre-wrap	保留	保留	允許

文本方向：

direction屬性： 塊級元素中的文本書寫方向，表中列佈局的方向……
unicode-bidi屬性：行內元素

文本屬性：

屬性	描述
color	設置文本顏色
direction	設置文本方向。
line-height	設置行高。
letter-spacing	設置字元間距。
text-align	對齊元素中的文本。
text-decoration	向文本添加修飾。
text-indent	縮進元素中文本的首行。
text-shadow	設置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。
text-transform	控制元素中的字母。
unicode-bidi	設置文本方向。
white-space	設置元素中空白的處理方式。
word-spacing	設置字間距。

字體樣式：

字體屬性

屬性	描述
font	簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。
font-family	設置字體系列。
font-size	設置字體的尺寸。
font-size-adjust	當首選字體不可用時，對替換字體進行智能縮放。（CSS2.1 已刪除該屬性。）
font-stretch	對字體進行水平拉伸。（CSS2.1 已刪除該屬性。）
font-style	設置字體風格。
font-variant	以小型大寫字體或者正常字體顯示文本。
font-weight	設置字體的粗細。

鏈接樣式：

鏈接的四種狀態：

a:link 普通的，未被訪問的鏈接
a:visited 用戶已訪問的鏈接
a:hover 滑鼠指針位於鏈接上方
a:active 鏈接被點擊時刻

文本修飾：

text-decoration屬性：常用於去掉鏈接中的下劃線

列表樣式：

列表類型：

影響列表的樣式，最簡單的方法就是改變其標誌類型

列表項標記：

list-style-type屬性： 設置列表的列表項的標誌

列表項圖像：

list-style-image屬性： 將列表項標誌設置為一個圖像

列表標誌位置：

list-style-position屬性：

簡寫列表樣式：

list-style屬性：

表格樣式：

表格邊框：

border屬性： 設置表格的邊框樣式（雙線框）
border-collapse屬性：將雙線框摺疊為單線框

寬度和高度：

width屬性： 設置寬度
height屬性： 設置高度

表格對齊：

text-align屬性： （水平對齊）

left：左對齊

right：右對齊

center：居中（和< CENTER >標簽不同，後者是對元素操作，而前者只對文本有效）

justify“：兩端對齊
vertical-align屬性： （垂直對齊）

表格內邊距：

padding屬性： 可以設置 , 元素標簽的內邊距

表格顏色：

border屬性： 設置元素文本和背景顏色

屬性	描述
border-collapse	設置是否把表格邊框合併為單一的邊框。
border-spacing	設置分隔單元格邊框的距離。
caption-side	設置表格標題的位置。
empty-cells	設置是否顯示表格中的空單元格。
table-layout	設置顯示單元、行和列的演算法。

輪廓樣式：

outline屬性：在元素周圍繪製一條線
outline-color屬性：設置輪廓的顏色
outline-style屬性：設置輪廓的樣式
outline-width屬性：設置輪廓的寬度