html css 樣式表

1.層疊樣式表：

• 外部樣式表 - link

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

• 內部樣式表 - style

<style type="text/css">
            *{
                margin: 0px;  
                padding: 0px; 
            }</style>

• 行內樣式表 - 不推薦使用

<div style="background-color: #006633;color: #00FFFF;" >請交做業</div>

2.選擇器：

• 通配符選擇器 - *

*{  }

• 標籤選擇器 - p

p{  }

• 屬性選擇器 - input[type=text]

input[type=text]{   }

• 類選擇器 - .foo

.foo{    }

• ID選擇器 - #bar

#bar{  }

• 組合類型的選擇器
  ~ 後代：p h1
  ~ 父子：p>h1
  ~ 兄弟：p~h1
  ~ 相鄰兄弟：p+h1

p h1{  }  
p>h1{  }
p~h1{  }
p+h1{  }

3.三條原則：

• 重要性原則 - !important

p {
    background: red !important;
}

• 具體性原則 - # > . > tag[...] > tag > *
• 就近原則

4.經常使用屬性：

• 顏色：color - red / rbg / rgba / hsl / hsla / hex code

p {
    color: red;
    color: #000000;
    color: rgb(0,0,0);
    color: rgba(111,111,111,0.5); /* 0.5是透明度 */
    color:hsla(120,65%,75%,0.3); /* HSL（色調，飽和度，明度）。色相是在色
輪上的程度（從0到360）-0（或360）是紅色的，120是綠色的，240是藍色的。飽和度是一個百分比值;0％意味着灰色和100％的陰影，是全綵。亮度也是一個百分點;0％是黑色的，100％是白色的。
α是Alpha參數定義的不透明度。 Alpha參數是一個介於0.0（徹底透明）和1.0（徹底不透明）之間的參數。 */
}

• 尺寸：width / height - px / cm / em / percentage

name	做用
height	設置元素的高度
	max-height
	max-width
	min-height
	min-width
	width

• 字體：font

@font-face {            /* 加載本地字體加載後命名爲fatdog*/
                font-family:fatdog;
                src: url(fonts/chunkfive.ttf);
            }
h3{
                text-transform: uppercase;   /* 字母大寫 */
                font-family: fatdog;  /* 使用字體fatdog*/               
            }
body {
                font-size: 80%;
                font-family: "Courier New", Courier, monospace;
    }

• 文本：text-align / line-height / text-decoration / letter-spacing / vertical-align

text-align:right;   /* center居中;left左對齊; */
    line-height:20px;   /* 行高 */
    text-decoration:underline;  /* none 默認。定義標準的文本。
                                           underline 定義文本下的一條線。
                                           overline 定義文本上的一條線。
                                           line-through 定義穿過文本下的一條線。
                                           blink    定義閃爍的文本。 */
    letter-spacing: -3px  ; /*字符間距 */
    vertical-align      /*
baseline    默認。元素放置在父元素的基線上。
sub 垂直對齊文本的下標。
super   垂直對齊文本的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top    把元素的頂端與父元素字體的頂端對齊
middle  把此元素放置在父元素的中部。
bottom  把元素的底端與行中最低的元素的頂端對齊。
text-bottom 把元素的底端與父元素字體的底端對齊。
length   
%   使用 "line-height" 屬性的百分比值來排列此元素。容許使用負值 */

• 邊框/輪廓：border / outline

border:5px solid red;      
border-style:dotted solid double dashed;
/* 上邊框是點狀
右邊框是實線
下邊框是雙線
左邊框是虛線 */
outline:green dotted thick;
/* thin 規定細輪廓。
medium  默認。規定中等的輪廓。
thick   規定粗的輪廓。
length  容許您規定輪廓粗細的值。 */

• 列表：list-style-type / list-style-image / list-style-position

list-style-type:none;/*
none    無標記。
disc    默認。標記是實心圓。
circle  標記是空心圓。
square  標記是實心方塊。
decimal 標記是數字。
decimal-leading-zero    0開頭的數字標記。(01, 02, 03, 等。)
lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。) */
list-style-image:url('sqpurple.gif');
list-style-position: inside;
/*inside    列表項目標記放置在文本之內，且環繞文本根據標記對齊。
outside 默認值。保持標記位於文本的左側。列表項目標記放置在文本之外，且環繞文本不根據標記對齊。*/

• 表格：border-collapse / border-spacing / empty-cells / table-layout

table
{
    border-collapse:separate;
    border-spacing:10px 50px;
}
/*border-spacing:0; 能夠用來合併邊框效果超好 */
/*collapse  若是可能，邊框會合併爲一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性
separate    默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性*/
empty-cells:hide;
/*empty-cells 屬性設置是否顯示錶格中的空單元格（僅用於"分離邊框"模式）。
hide    不在空單元格周圍繪製邊框。
show    在空單元格周圍繪製邊框。默認。
 */
table-layout:fixed;
/*automatic 默認。列寬度由單元格內容設定。
fixed   列寬由表格寬度和列寬度設定。*/

• 背景：background-color / background-image / background - CSS摳圖

#img1{
                display: inline-block;
                width: 100px;
                height: 100px;
                background-image: url(images/icons.jpg);
                background-repeat: no-repeat no-repeat;
                background-position: -150px -80px;
            }

• 內外邊距：margin / padding

#page {
                margin: 10px auto 10px auto;
                padding: 20px;

• 定位：position / z-index / float / clear

z-index:10;  圖層能夠是負數 值大的會覆蓋值小的
float: left ;
clear:both;/*
left    在左側不容許浮動元素。
right   在右側不容許浮動元素。
both    在左右兩側均不容許浮動元素。
none    默認值。容許浮動元素出如今兩側。*/
h2
{
    position:absolute;
    left:100px;
    top:150px;
}
/* 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
absolute生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
fixed 生成固定定位的元素，相對於瀏覽器窗口進行定位。
relative生成相對定位的元素，相對於其正常位置進行定位。
所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
sticky粘性定位，該定位基於用戶滾動的位置。

*/

• 其餘：display / visibility / cursor

/* 隱藏 不佔位置 */
display:  none  ;
/* 隱藏 佔位置 */
 visibility: hidden;
/* visibility: inherit; */
cursor:wait;/*
url 需使用的自定義光標的 URL。
註釋：請在此列表的末端始終定義一種普通的光標，以防沒有由 URL 定義的可用光標。
default 默認光標（一般是一個箭頭）
auto    默認。瀏覽器設置的光標。
crosshair   光標呈現爲十字線。
pointer 光標呈現爲指示連接的指針（一隻手）*/

• 動畫：@keyframes animation

5.僞類/僞元素

• :first-letter / :first-line

:first-letter 首字符
:first-line  首行

• :focus / :hover / :visited / :active

input:focus /* 輸入框得到焦點,背景顏色改成黃色*/
{ 
background-color:yellow;
}
a:hover  鼠標移到連接上的樣式
visited選擇器樣式連接到你已經訪問過的頁面。
active選擇器樣式觸發時連接到連接頁面

• :first-child / :last-child / :nth-child(n)