CSS 樣式、布局、盒子模型
---恢復內容開始---
Css內容：
常用樣式： 字體 顏色 背景
布局： 浮動 定位 標簽特性
標簽盒子模型： 邊距 邊框
動畫： 旋轉 漸變
註意：Css引路徑從css文件裏找
Html和js引路徑從html文件裏找
樣式：
字體：
Font-size 字體大小
實例：
p {
font-size:14px;
}
用em來設置字體大小
瀏覽器默認文字大小為16px
1em=16px
Font-family
實例：
p{
font-family:"Times New Roman",Georgia,Serif;
}
Font-style 字體樣式
實例：
p.normal {
font-style:normal
}
p.italic {
font-style:italic
}
p.oblique {
font-style:oblique
}
屬性值：
Font-weight 字體粗細
實例：
p.normal {
font-weight:normal;
}
p.thick {
font-weight:bold;
}
p.thicker {
font-weight:900;
}
屬性值：
文本：
文本顏色：color
- 十六進制值 - 如: ＃FF0000
- 一個RGB值 - 如: RGB(255,0,0)
- 顏色的名稱 - 如: red
實例：
body {
color:red;
}
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}
文本對齊方式：text-align
文本排列屬性是用來設置文本的水平對齊方式。
文本可居中或對齊到左或右,兩端對齊.
當text-align設置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜誌和報紙）
實例：
h1 {
text-align:center;
}
p.date {
text-align:right;
}
p.main {
text-align:justify;
}
文本修飾：text-decoration 屬性用來設置或刪除文本的裝飾。
從設計的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：
實例：
a {
text-decoration:none;
}
none為刪除下劃線
h1 {
text-decoration:overline;
}
h2 {
text-decoration:line-through;
}
h3 {
text-decoration:underline;
}
overline為上劃線；
line-through為刪除線；
underline為下劃線
文本轉換：
text-transform
文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。
可用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。
實例：
p.uppercase {
text-transform:uppercase;
}
p.lowercase {
text-transform:lowercase;
}
p.capitalize {
text-transform:capitalize;
}
文本縮進：
text-index
文本縮進屬性是用來指定文本的第一行的縮進。
實例：
p {
text-indent:50px;
}
line-height 行高
實例：
p.small
{
line-height: 10px
}
p.big
{
line-height: 30px
}
vertical-align 設置元素的垂直對齊
實例：
img{
vertical-align:text-top;
}
背景：background
背景顏色：background-color
實例：
body {
background-color:#b0c4de;
}
背景圖像：background-image
實例：
body {
background-image:url(‘paper.gif‘);
}
背景圖像水平或垂直平鋪：background-image-repeat-x/y
實例: 水平方向平鋪
body{
background-image:url(‘gradient2.png‘);
background-repeat:repeat-x;
}
背景圖像設置定位與不平鋪
實例：
body{
background-image:url(‘img_tree.png‘);
background-repeat:no-repeat;
}
可以利用 background-position 屬性改變圖像在背景中的位置:
實例：
body{
background-image:url(‘img_tree.png‘);
background-repeat:no-repeat;
background-position:right top;
}
背景簡寫屬性：
實例：
body {
background:#ffffff url(‘img_tree.png‘) no-repeat right top;
}
當使用簡寫屬性時，屬性值的順序為：:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
布局：
浮動
float: 給要浮動的元素加父標簽 設定標簽的寬高
實例：
img{
float:right;
}
屬性值：
清除浮動: clear
實例：
.text_line{
clear:both;
}
定位：
Postion
屬性： fixed relative absolute
top bottom left right : 100px
fixed:相對於窗口定位 不在乎是否嵌套
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p>
<b>註意:</b>
IE7 和 IE8 支持只有一個 !DOCTYPE 指定固定值.
</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p><p>Some text</p>
</body>
</html>
結果為; 不會隨頁面浮動
absolute：絕對定位
相對於標簽定位 body
相對於最近的有poistion屬性的父標簽定位 最終標簽是body
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>這是一個絕對定位了的標題</h2>
<p>用絕對定位,一個元素可以放在頁面上的任何位置。標題下面放置距離左邊的頁面100 px和距離頁面的頂部150 px的元素。.</p>
</body>
</html>
結果為： 不會隨窗口大小改變距離
relative:相對自身定位 位置還有 常用在微調上和父標簽
實例：
h2.pos_left{
position:relative;
left:-20px;
}
bottom
實例：設置圖像的底部邊緣，在元素的底邊上面5px：
img{
position:absolute;
bottom:5px;
}
cursor光標屬性：
top：
實例：把圖像的上邊緣設置在其包含元素上邊緣之下5像素高的位置
img{
position:absolute;
top:5px;
}
left: 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
right: 屬性規定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
標簽特性 display: block inline-block inline
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>這是一個可見標題</h1>
<h1 class="hidden">這是一個隱藏標題</h1>
<p>註意, 實例中的隱藏標題不占用空間。</p>
</body>
</html>
結果為：
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>這是一個可見標題</h1>
<h1 class="hidden">這是一個隱藏標題</h1>
<p>註意, 實例中的隱藏標題仍然占用空間。</p>
</body>
</html>
結果為：
塊元素是一個元素，占用了全部寬度，在前後都是換行符。
塊元素的例子：
- <h1>
- <p>
- <div>
內聯元素只需要必要的寬度，不強制換行。
內聯元素的例子：
- <span>
- <a>
實例： 把列表項顯示為內聯元素
li {
display:inline;
}
下面的示例把span元素作為塊元素：
span {
display:block;
}
---恢復內容結束---
CSS 樣式、布局、盒子模型