標籤：lin 內聯 order lov 標準 文字陰影 round 固定 選擇
0、CSS概念
層疊樣式表（Cascading Style Sheets）,CSS的來曆就不必多說了。可以簡單的理解為全球資訊網聯盟（w3c）為了豐富HTML頁面的布局和外觀而指定的一種標準。
1、CSS執行個體：
CSS規則主要由選取器和至少一條聲明組成：
/*注釋格式*/
p{
color:red;?text-align:center;
}
2、id 選取器和calss 選取器
/*id 是唯一的標籤 id 為 idName 的那個標籤會遵循以下樣式*/
#idName
{
text-align:center;
color:red
}
/* class 是一類標籤 ，樣式表範圍下 頁面中所有標籤中類名為 className 的 都會遵循以下 樣式*/
.className
{
text-align:center;
color:red
}
3、優先順序：1，2，3，4 優先順序依次升高
1、瀏覽器預設樣式
2、外部樣式
3、內部樣式
4、內聯樣式
多重樣式表會重疊為一個
外部樣式表樣本
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
內部樣式表示例：
<head>
<style>
hr
{
color:sienna;
}
p {
margin-left:20px;
}
body{
background-image:url("images/image.gif”);
}
</style>
</head>
內聯樣式表 樣本：（在標籤內寫 style）
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
4、CSS背景：
background-color:
body {
/* CSS中 顏色的表示方法：
十六進位：”#ff0000”
RGB:”RGB(255,0,0)”
顏色名稱：”red”
*/
background-color:#003344
}
background-image
body{
background-image:url(“xxx.jpg”);/* 預設映像只在水平和垂直方向平鋪*/
}
background-repeat/*映像的重複方式*/
body{
background-image:url(“xxx.jpg”);
background-repeat:repeat-x;/* 映像只在水平方向平鋪*/
}
background-attachment/*映像是否在頁面上固定*/
body{
background-image:url(“xxx.jpg”);
background-attachment:fixed;/*固定背景映像位置*/
/*背景映像是否固定或者隨著頁面的其餘部分滾動。預設 scroll 背景圖片隨頁面的其餘部分滾動。inherit 繼承父元素
*/
}
background-position/*背景映像的位置*/
/*有9個網站可選取，類似9宮格
left top center top right top
left center center center right center
left bottom center bottom right bottom
也可以使用百分百 x%，y%是預設值 左上方 0%0%（前一個數字代表水平位移量，後一個代表垂直位移量）
也可以xpos ypos （前一個數字代表水平位移量，後一個代表垂直位移量）
ps:用百分比會有一個特殊的演算法，
0% 0% 映像的左上方會和父元素的左上方重合，
50% 50% 映像會在 父元素的正中間，
100% 100% 映像的右下角會與父元素的右下角重合
inherit 繼承自父元素
*/
body{
background-position:right top;/*控制背景映像的位置*/
}
/*背景簡寫：簡寫時 屬性值順序： color image repeat attachment position*/
body {
background:#ffffff url(image.png) no-repeat right top;
}
background-size
{
background:url(image/xxx.gif);
background-size:100% 100%;/*展開並佔滿真格背景範圍*/
}
/*background-Origin屬性指定background-position屬性應該是相對位置注意如果背景映像background-attachment是"固定"，background-origin屬性沒有任何效果。*/
/* background-clip屬性指定背景繪製地區
*border-box預設值。背景繪製在邊框方框內（剪下成邊框方框）。
*content-box 背景繪製在內容方框內（剪下成內容方框）。
*padding-box 背景繪製在襯距方框內（剪下成襯距方框）。
*/
body
{
/*多個背景圖片*/
background-image:url(/upload/love/css.gif),url(/upload/love/html.gif);
}
5、text 文字
5.1 text color 文本個顏色
W3C標準規定：如果你定義了顏色屬性，那麼你還必須定義背景色屬性
body{
color:blue;
}
h1 {
color:#00ff00;
}
h2{
color:rgb(255,0,0);
}
5.2 text-align 文本對齊
h1{
text-align:center;
}
p.date {
text-align:right;
}
p.main{
text-align:justify;
}
5.3 text-decoration 修飾
h1{
text-decoration:overline;/* 文本上面劃線*/
}
h2{
text-decoration:line-through;/*文本中間劃線 */
}
h3{
text-decoration:lint-underline;/*文本下部劃線*/
}
h4 {
text-decoration : blink;/* 定義閃爍文本*/
}
/* 還可以是 none 和 inherit */
5.4 text-transform :uppercase 文本 轉大寫
/*text-transform:lowcase 文版轉小寫 text-transform:capitalize 首字母大寫*/
p.uppercase{
text-transform:uppercase
}
5.5 text-indent: 文本縮排
p {
text-indent:5px;
}
/*主要屬性：
屬性 描述
color 設定文本顏色
direction 設定文本方向。
letter-spacing 設定字元間距
line-height 設定行高
text-align 對齊元素中的文本
text-decoration 向文本添加修飾
text-indent 縮排元素中文本的首行
text-shadow 設定文本陰影
text-transform 控制元素中的字母
unicode-bidi
vertical-align 設定元素的垂直對齊
white-space 設定元素中空白的處理方式
word-spacing 設定字間距
*/*
5.6 direction 文字方向
ltd 預設 left to right 預設，文本方向從左至右
rtl right to left 文本方向 從右至左
inherit 規定應該從父元素 繼承direction 屬性值
5.7 letter-spacing
字母間距
h1 {
letter-spacing:2px;/* 預設 normal 還可以繼承 inherit*/
}
h2{
letter-spacing:-3px;
}
5.8 line-hight 行高
p.small {
line-height:90%;
}
p.big{
ling-hight:200%;
}
5.8 text-shadow：基本文字陰影
text-shadow: h-shadow v-shadow blur color;
/*h-shadow: 必須 水平陰影的位置： 允許為負值
*v-shadow: 必須 豎直陰影的位置： 允許為負值
*blur : 可選 模糊距離
*color: 陰影的顏色
*/
5.9 vertical-align:text-top
設定一個元素的垂直對齊
值 描述
/*baseline 預設。元素放置在父元素的基準上。
*sub 垂直對齊文本的下標。
*super 垂直對齊文本的上標
*top 把元素的頂端與行中最高元素的頂端對齊
*text-top 把元素的頂端與父元素字型的頂端對齊
*middle 把此元素放置在父元素的中部。
*bottom 把元素的頂端與行中最低的元素的頂端對齊。
*text-bottom 把元素的底端與父元素字型的底端對齊。
*length
*% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
*inherit 規定應該從父元素繼承 vertical-align 屬性的值。
*/*
5.10 white-space: 段落中空白屬性
/*
normal 預設。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤為止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合并空白符序列，但是保留分行符號。
inherit 規定應 該從父元素繼承 white-space 屬性的值。
*/*
5.11 word-spacing:30px; 定義單詞間的距離為 30px
6、a樣式串連
a：link - 正常，未被訪問過的串連
a:visited 使用者已經訪問過的串連
a:hover 當使用者滑鼠放在串連上時
a:active 當使用者點擊的那一刻
a:link {
color:#FF0000;
} /* unvisited link */
a:visited {
color:#00FF00;
} /* visited link */
a:hover {
color:#FF00FF;} /* mouse over link */
a:active {
color:#0000FF;} /* selected link */
CSS 學習筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
