CSS基本樣式
<p style="font-family:宋體;color: red;font-size: 10pt;">程序員</p>
<style type="text/css"> h1 {font-family: "微軟雅黑";font-size: 12px;} #fromid {font-family: "微軟雅黑";font-size: 12px;} .classid{font-family: "微軟雅黑";font-size: 12px;} </style>
<style type="text/css">
@import url("外部CSS樣式文件名");
<!--
外部文件名是以.css為擴(kuò)展名的CSS文件，如果該文件和當(dāng)前頁面同一個(gè)目錄下，則直接用文件名，
不在同一個(gè)目錄下，則要給出其相對(duì)路徑。
->
</style>
<link type="text/css" rel="stylesheet" type="text/css" href="css/index.css"/>
/* */
h1 {font-family: "微軟雅黑";font-size: 12px;} /*
在HTML文檔中，所有該標(biāo)記保護(hù)的文本都具有定義的CSS樣式*/
.classid{font-family: "微軟雅黑";font-size: 12px;}/*
在HTML文檔中， 所有使用該類名標(biāo)記的都具有定義的標(biāo)簽*/
#fromid {font-family: "微軟雅黑";font-size: 12px;}/*
在HTML文檔中，所有指定為該ID的標(biāo)記都具有定義的標(biāo)簽*/
img{ background-color: red transparent; /* * 用于設(shè)置背景顏色 * 其中transparent表示透明 * 顏色的表示方式有多種 * 1.使用英文名稱，如red,blue等。 * 2.用6位十六進(jìn)制數(shù)（#rrggbb）表示。 * 3.用3位十六進(jìn)制數(shù)（#rgb）表示。 * 4.用rgb(r,g,b)函數(shù)表示，其中3個(gè)參數(shù)的取值可為0~255的整數(shù)或百分比值， * 如rgb(0,0,0)表示黑色，rgb(100%,100%,100%)表示白色。 */ background-image: url("背景圖片的路徑")|none; /* * 用于設(shè)置要加載的背景圖片 */ background-repeat: no-repeat; /* * 用于設(shè)置背景圖片的排列方式，其屬性設(shè)置格式如下： * background-repeat:repeat|repeat-x|repeat-y|no-repeat ; * 其中repeat表示以并列方式排列圖片，是該屬性的默認(rèn)值，repeat-x表示以x軸方向并列排列圖片； * repeat-y表示以y軸方向并列排列圖片，no-repeat表示不以并列方式排列圖片。 */ background-attachment: scroll; /* * 用于設(shè)置移動(dòng)滾動(dòng)條時(shí)背景圖片位置是否固定，其屬性設(shè)置格式如下： * background-attachment: scroll|fixed; * scroll表示移動(dòng)滾動(dòng)條時(shí)背景圖片隨之滾動(dòng)，fixed表示移動(dòng)滾動(dòng)條時(shí)背景圖片不動(dòng)。 */ background-position: x,y; /* * 用于設(shè)置背景圖片的插入位置，其屬性設(shè)置格式如下： * 1.百分比，用于描述圖片距區(qū)域元素邊框的百分比值 * 2.數(shù)值，用具體數(shù)值描述，單位可分為任意的長(zhǎng)度單位：em px in pt pc cm mm等。 * 3關(guān)鍵字，包括left right center top bottom */ }
h1{ text-indent: 20px; /* * 用于設(shè)置文本的首行縮進(jìn)值，默認(rèn)屬性值為0，其屬性數(shù)值用具體數(shù)值描述，
單位可為任意長(zhǎng)度單位：em px in pt pc cm mm等。 */ text-align: left; /* * 用于設(shè)置文本段落的水平對(duì)齊方式，其屬性設(shè)置語法如下； * text-align:left|right|center|justify * 該屬性的取值有4種： * left表示左對(duì)齊 * right表示右對(duì)齊 * center表示居中對(duì)齊 * justify表示左右對(duì)齊 */ vertical-align: baseline; /* * 用于設(shè)置文本段落的垂直對(duì)齊方式，其屬性設(shè)置語法如下： * vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom; * baseline:屬性的默認(rèn)值，表示段落文本與上段落文本的基線對(duì)齊； * sub：表示文本以下標(biāo)方式顯示； * super:表示以上標(biāo)方式顯示； * top:表示垂直向上對(duì)齊； * text-top:表示文本垂直向上對(duì)齊； * middle：表示垂直居中對(duì)齊； * bottom：表示垂直向下對(duì)齊； * text-bottom:表示文字垂直向下對(duì)齊。 */ line-height: normal; /* * 用于設(shè)置文本的行距，屬性設(shè)置語法如下： * line-height：normal|百分比|長(zhǎng)度值 * normal：表示該屬性的默認(rèn)值； * 百分比：表示相對(duì)于字大小font-size的百分比 * 長(zhǎng)度值：用具體的數(shù)值表示，其屬性值可以問任意的長(zhǎng)度單位：em px in pt pc cm mm等。 */ letter-spacing: normal; /* * 用于設(shè)置字符的間距，其屬性設(shè)置語法如下： * letter-spacing：normal|長(zhǎng)度值； * normal：表示該屬性的默認(rèn)值； * 長(zhǎng)度值：用具體的數(shù)值表示，其屬性值可以問任意的長(zhǎng)度單位：em px in pt pc cm mm等。 * 我們也可以把長(zhǎng)度值設(shè)置為負(fù)數(shù)，以打打緊縮字符行距的效果 */ }
h2{
font-family: "微軟雅黑";
/*
* 用于設(shè)置文字的字體，語法設(shè)置如下：
* font-family：字體；
* 可以設(shè)置多種字體，用逗號(hào)隔開，瀏覽器按照順序查找系統(tǒng)可匹配的字體，
若查找不到，瀏覽器會(huì)使用默認(rèn)的字體。
*/
font-style: normal;
/*
* 用于設(shè)置文字的效果，其屬性設(shè)置語法如下：
* font-style:normal|italic|oblique;
* normal:表示默認(rèn)值
* italic：表示斜體
* oblique：表示歪斜體
*/
font-size: 10px;
/*
* 用于設(shè)置字體的大小，其屬性設(shè)置語法如下：
* font-size:長(zhǎng)度|關(guān)鍵字
* 長(zhǎng)度：用具體的數(shù)值描述，單位可以問任意的長(zhǎng)度單位：em px in pt pc cm mm等。
* 關(guān)鍵字;包括：XX-small、X-small、small、medium、large、
XX-large、X-large、larger和smaller.
*/
font-weight: normal;
/*
* 用于設(shè)置文字的粗細(xì)，其屬性設(shè)置語法如下：
* font-weight：normal|bold|bolder|lighter|100~900
*/
font-variant: normal;
/*
* 用于設(shè)置文字的變形屬性，其屬性設(shè)置語法如下：
* font-variant：normal|small-caps
*/
text-decoration:underline;
/*
* 用于設(shè)置文字的顯示效果，其屬性設(shè)置語法如下：
* text-decoration:underline|overline|line-through|blink|none
* 其中none是默認(rèn)值，表示沒有任何效果
* underline表示給文字加下劃線
* overline是加上頂部線
* line-through是加上刪除線
* blink表示文字閃爍
*/
text-transform:none;
/*
* 用于設(shè)置文字的轉(zhuǎn)換效果，其屬性設(shè)置語法如下：
* text-transform:none|capitalize|uppercase|lowrcase;
* none是默認(rèn)值，表示沒有任何的效果，
* capitalize表示英文單詞的首字母轉(zhuǎn)換為大寫；
* uppercase表示所有英文字母轉(zhuǎn)換為大寫；
* lowrcase表示所有的英文字母轉(zhuǎn)換為小寫；
*/
}
img{ margin: 50px; /* * 用margin屬性來控制元素邊界與網(wǎng)頁其他內(nèi)容的水平和垂直間距,屬性的語法如下： * margin：50px； * margin：50px 60px； * margin：50px 60px 70px； * margin：50px 60px 70px 80px； * 距離可以設(shè)置為具體數(shù)值和百分比形式； * 一個(gè)參數(shù)表示上下左右都用同一個(gè)距離； * 兩個(gè)參數(shù)表示，則上下方向用參數(shù)1 水平方向用參數(shù)2 * 三個(gè)參數(shù)表示，則上方用參數(shù)1，左右方向用參數(shù)2，下方用參數(shù)3； * 四個(gè)參數(shù)表示，則上方用參數(shù)1，右方用參數(shù)2，下方用參數(shù)3，左方用參數(shù)4 */ margin-top: 50px; /* * 用于單獨(dú)設(shè)置上邊距 */ margin-bottom: 50px; /* * 用于單獨(dú)設(shè)置下邊距 */ margin-left: 50px; /* * 用于單獨(dú)設(shè)置左邊距 */ margin-right: 50px; /* * 用于單獨(dú)設(shè)置右邊距 */ }
table{
border-width:thin;
/*
* border-width主要設(shè)置邊框?qū)挾?屬性值可以取thin|medium|thick
* border-top-width: thin;主要設(shè)置上邊框?qū)挾?
* border-bottom-width: thin;主要設(shè)置下邊框?qū)挾龋?
* border-left-width: thin;主要設(shè)置左邊框?qū)挾龋?
* border-right-width: thin;主要設(shè)置右邊框?qū)挾龋?
*
*/
border-style: none;
/*
* 主要設(shè)置邊框樣式，屬性值可設(shè)置為：
none|dotted|dashed|solid|double|groove|ridge|inset|outset;
* border-top-style: none;設(shè)置上部邊框樣式
* border-bottom-style: none;設(shè)置下部邊框樣式
* border-left-style: none;設(shè)置左邊邊框樣式
* border-right-style:none;設(shè)置右邊邊框樣式
*/
border-color:none;
/*
* 用于設(shè)置邊框的顏色,屬性值均為顏色值
* border-top-color:none;用于設(shè)置上邊框的顏色
* border-bottom-color:none;用于設(shè)置下邊框的顏色
* border-left-color:none;用于設(shè)置左邊框的顏色
* border-right-color:none;用于設(shè)置右邊框的顏色
*/
}
from{
padding: 50px;
/*
* 用于設(shè)置邊距的樣色，屬性住為距離
* padding-top:none;用于設(shè)置上邊距的大小
* padding-bottom:none;用于設(shè)置下邊距的大小
* padding-left:none;用于設(shè)置左邊框的大小
* padding-right:none;用于設(shè)置右邊框的大小
*/
}
li{
list-style: none;
/*
* 用list-style設(shè)置文字列表屬性，控制列表的符號(hào)和位置；
* list-style-type:none;用于設(shè)置列表的符號(hào)類型，其中取值如下：
* none|disc|circle|square|decimal|lower-roman|upper-roman|
lower-alpha|upper=alpha
* list-style-image:url("該圖片的URL地址");
用于設(shè)定使用指定圖像作為列表的符號(hào)，其值為該圖像的URL地址
* list-style-position:outside;用于設(shè)置列表的項(xiàng)目符號(hào)，取值可以為outside和inside;
*/
}
body{
top: 50px;;
left: 50px;
position: absolute;
z-index: 2;
/*
* top用于設(shè)置元素與瀏覽器窗口上方的距離
* left用于設(shè)定元素與瀏覽器窗口左方的距離
* position用于設(shè)置元素的位置模式，屬性值可以為absolute|relative|static
* 其中static為屬性的默認(rèn)值，表示靜態(tài)位置，absolute表示絕對(duì)位置，relastive表示相對(duì)位置；
* z-index使用該屬性可以將頁面元素分為多層顯示，
產(chǎn)生疊加的效果，該屬性值為整數(shù)，可以是正整數(shù)和負(fù)整數(shù)。
*/
}
【 微信掃一掃 】
