標籤：tac line 紅色 行高 size osi 圖片 indent family
1.行間樣式
給單獨的標籤添加樣式.
<div style="width:100px; height:100px; background-color:red;"></div>
優點：比較方便可以即時的添加屬性。
缺點：修改屬性非常麻煩、需要一個個去修改。
2.內聯樣式表
<style>
div{ <!--選取器跟{}符號 屬性寫在裡面-->
}
</style>
優點：針對當前HTML檔案有效。
缺點：多頁面修改時繁瑣困難。
3.外聯樣式表
<head>
<link rel="stylesheet" href="xx.css"/>
</head>
邊框：
<style>
div{
width:400px;
height:400px;
border:1px solid red;
}
</style>
<!--
邊框組成：
1、邊框的粗細 1px;
2、邊框的樣式 solid(實線); dashed（虛線）;
3、邊框的顏色 red;
邊框的方向:
top right bottom left
上右下左 可以單獨設定邊框方向和屬性
改變某一個方向邊框的做法：
border-top-color:red;
border-top-style:
border-top-width:
邊框的形狀：非矩形
邊框畫三角形執行個體：
首先設定邊框寬度，背景色跟背景一致(假如背景為白色)。
border:20px solid white
然後設定邊框某一方向樣式（設定TOP為向下三角形）顏色，為三角形顏色。
border-top-color:red;
以上為紅色三角形。
設定某一方向樣式顏色會產生方向相反的三角形。
-->
<body>
<div></div>
</body>
邊框練習的步驟及需求.
1.先分析設計圖的結構.
2.根據所分析的結構,進行結構編碼.
3.根據所書寫的結構,進行CSS編碼.
4.利用PS工具,對設計圖上的模組進行測量以及顏色的拾取.
5.樣式添加.
background 背景
background-color 背景顏色
顏色英文關鍵字
RGB
十六進位
background-image 背景圖
背景圖預設鋪滿整個容器大小
background-repeat
背景是否重複
no-repeat
不重複
repeat-x;
X軸方向橫向平鋪
repeat-y;
Y軸方向縱向平鋪
repeat；
X\Y都重複
background-position:X Y;
背景圖位置
具體數值：
X軸：left right center
Y軸：top bottom center
當第二個Y軸屬性值沒有填寫，預設置中。
background-attachment: fixed;
背景圖是否滾蛋
fixed 固定在瀏覽器可視地區
scroll 跟隨捲軸滾動
background
不分屬性書寫順序的
顏色相關 圖片相關
<!--內容：
<img src="url">這樣的圖片連結樣式會撐開容器寬高
背景不會佔用容器寬高 -->
切圖：
1、頭部地區（第一個塊）切一張完整的圖片
2、內容地區裡的每一個小塊需要有ICO並且還有背景顏色
文字樣式：
font-weight 文字加粗
bold 加粗
normal 正常
font-style 文字傾斜
italic斜體
font-size 文字大小
font-family 字型
line-height 行高 文字在一行裡面所佔用的位置
heigth:400px;
line-height:400px;
當行高的值與容器高度一致時 文字會垂直置中顯示
多行文字測量行高的方法：
1、確認文字大小
2、確認兩行文字之間的空隙大小
3、空隙大小除以2，得出來的值就是每行文字的上下的空隙大小。
3.1當行高為奇數時，那麼文字的上方要比下方少一個像素。
3.2當行高為偶數時，文字上下的空隙一致。
4.通過輔助線測量多行文字的行高。
文字的複合樣式：
font:bold italic 26px "微軟雅黑";
font複合樣式需要注意書寫順序
font: font-weight | font-style | font-size/line-height | font-family
文本設定：
color
文字顏色
text-align
文本對齊（顯示）方式
left（預設值）
right（右邊）
center（中間）
text-indent
首行縮排
HTML5文法基礎學習筆記
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
