小編給大家分享一下CSS中頁(yè)面引用的示例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括連平網(wǎng)站建設(shè)、
連平網(wǎng)站制作、連平網(wǎng)頁(yè)制作以及連平網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，
連平網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到連平省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
css
為了讓網(wǎng)頁(yè)元素的樣式更加豐富，也為了讓網(wǎng)頁(yè)的內(nèi)容和樣式能拆分開(kāi)，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫(xiě)，意思是層疊樣式表。有了CSS，html中大部分表現(xiàn)樣式的標(biāo)簽就廢棄不用了，html只負(fù)責(zé)文檔的結(jié)構(gòu)和內(nèi)容，表現(xiàn)形式完全交給CSS，html文檔變得更加簡(jiǎn)潔。
css基本語(yǔ)法
css的定義方法是：
選擇器 { 屬性:值; 屬性:值; 屬性:值;}
選擇器是將樣式和頁(yè)面元素關(guān)聯(lián)起來(lái)的名稱(chēng)，屬性是希望設(shè)置的樣式屬性每個(gè)屬性有一個(gè)或多個(gè)值。代碼示例：
p{ width:100px; height:100px; color:red }css頁(yè)面引入方法：
1、外聯(lián)式：通過(guò)link標(biāo)簽，鏈接到外部樣式表到頁(yè)面中。
2、嵌入式：通過(guò)style標(biāo)簽，在網(wǎng)頁(yè)上創(chuàng)建嵌入的樣式表。
p{ width:100px; height:100px; color:red }
......
3、內(nèi)聯(lián)式：通過(guò)標(biāo)簽的style屬性，在標(biāo)簽上直接寫(xiě)樣式。
......
css文本設(shè)置
常用的應(yīng)用文本的css樣式：
color 設(shè)置文字的顏色，如： color:red;
font-size 設(shè)置文字的大小，如：font-size:12px;
font-family 設(shè)置文字的字體，如：font-family:'微軟雅黑';
font-style 設(shè)置字體是否傾斜，如：font-style:'normal'; 設(shè)置不傾斜，font-style:'italic';設(shè)置文字傾斜
font-weight 設(shè)置文字是否加粗，如：font-weight:bold; 設(shè)置加粗 font-weight:normal 設(shè)置不加粗
font 同時(shí)設(shè)置文字的幾個(gè)屬性，寫(xiě)的順序有兼容問(wèn)題，建議按照如下順序?qū)懀?font：是否加粗 字號(hào)/行高 字體；如： font:normal 12px/36px '微軟雅黑';
line-height 設(shè)置文字的行高，如：line-height:24px;
text-decoration 設(shè)置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-indent 設(shè)置文字首行縮進(jìn)，如：text-indent:24px; 設(shè)置文字首行縮進(jìn)24px
text-align 設(shè)置文字水平對(duì)齊方式，如text-align:center 設(shè)置文字水平居中
css顏色表示法
css顏色值主要有三種表示方法：
1、顏色名表示，比如：red 紅色，gold 金色
2、rgb表示，比如：rgb(255,0,0)表示紅色
3、16進(jìn)制數(shù)值表示，比如：#ff0000 表示紅色，這種可以簡(jiǎn)寫(xiě)成 #f00
css選擇器
常用的選擇器有如下幾種：
1、標(biāo)簽選擇器
標(biāo)簽選擇器，此種選擇器影響范圍大，建議盡量應(yīng)用在層級(jí)選擇器中。
舉例：
*{margin:0;padding:0}
p{color:red}
....
.... 2、id選擇器
通過(guò)id名來(lái)選擇元素，元素的id名稱(chēng)不能重復(fù)，所以一個(gè)樣式設(shè)置項(xiàng)只能對(duì)應(yīng)于頁(yè)面上一個(gè)元素，不能復(fù)用，id名一般給程序使用，所以不推薦使用id作為選擇器。
舉例：
#box{color:red}
.... 3、類(lèi)選擇器
通過(guò)類(lèi)名來(lái)選擇元素，一個(gè)類(lèi)可應(yīng)用于多個(gè)元素，一個(gè)元素上也可以使用多個(gè)類(lèi)，應(yīng)用靈活，可復(fù)用，是css中應(yīng)用最多的一種選擇器。
舉例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
....
....
....4、層級(jí)選擇器
主要應(yīng)用在選擇父元素下的子元素，或者子元素下面的子元素，可與標(biāo)簽元素結(jié)合使用，減少命名，同時(shí)也可以通過(guò)層級(jí)，防止命名沖突。
舉例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
....
....
....5、組選擇器
多個(gè)選擇器，如果有同樣的樣式設(shè)置，可以使用組選擇器。
舉例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
....
....
....6、偽類(lèi)及偽元素選擇器
常用的偽類(lèi)選擇器有hover，表示鼠標(biāo)懸浮在元素上時(shí)的狀態(tài)，偽元素選擇器有before和after,它們可以通過(guò)樣式在元素中插入內(nèi)容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
....
....
....css元素溢出
當(dāng)子元素的尺寸超過(guò)父元素的尺寸時(shí)，需要設(shè)置父元素顯示溢出的子元素的方式，設(shè)置的方法是通過(guò)overflow屬性來(lái)設(shè)置。
overflow的設(shè)置項(xiàng)：
1、visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
2、hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的，此屬性還有清除浮動(dòng)、清除margin-top塌陷的功能。
3、scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
4、auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
5、inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
塊元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊元素
元素就是標(biāo)簽，布局中常用的有三種標(biāo)簽，塊元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊元素，了解這三種元素的特性，才能熟練的進(jìn)行頁(yè)面布局。
塊元素
塊元素，也可以稱(chēng)為行元素，布局中常用的標(biāo)簽如：p、p、ul、li、h2~h7、dl、dt、dd等等都是塊元素，它在布局中的行為：
內(nèi)聯(lián)元素
內(nèi)聯(lián)元素，也可以稱(chēng)為行內(nèi)元素，布局中常用的標(biāo)簽如：a、span、em、b、strong、i等等都是內(nèi)聯(lián)元素，它們?cè)诓季种械男袨椋?/p>
支持部分樣式（不支持寬、高、margin上下、padding上下）
寬高由內(nèi)容決定
盒子并在一行
代碼換行，盒子之間會(huì)產(chǎn)生間距
子元素是內(nèi)聯(lián)元素，父元素可以用text-align屬性設(shè)置子元素水平對(duì)齊方式，用line-height屬性值設(shè)置垂直對(duì)齊方式
解決內(nèi)聯(lián)元素間隙的方法
1、去掉內(nèi)聯(lián)元素之間的換行
2、將內(nèi)聯(lián)元素的父級(jí)設(shè)置font-size為0，內(nèi)聯(lián)元素自身再設(shè)置font-size
內(nèi)聯(lián)塊元素
內(nèi)聯(lián)塊元素，也叫行內(nèi)塊元素，是新增的元素類(lèi)型，現(xiàn)有元素沒(méi)有歸于此類(lèi)別的，img和input元素的行為類(lèi)似這種元素，但是也歸類(lèi)于內(nèi)聯(lián)元素，我們可以用display屬性將塊元素或者內(nèi)聯(lián)元素轉(zhuǎn)化成這種元素。它們?cè)诓季种斜憩F(xiàn)的行為：
這三種元素，可以通過(guò)display屬性來(lái)相互轉(zhuǎn)化，不過(guò)實(shí)際開(kāi)發(fā)中，塊元素用得比較多，所以我們經(jīng)常把內(nèi)聯(lián)元素轉(zhuǎn)化為塊元素，少量轉(zhuǎn)化為內(nèi)聯(lián)塊，而要使用內(nèi)聯(lián)元素時(shí)，直接使用內(nèi)聯(lián)元素，而不用塊元素轉(zhuǎn)化了。
display屬性
display屬性是用來(lái)設(shè)置元素的類(lèi)型及隱藏的，常用的屬性有：
1、none 元素隱藏且不占位置
2、block 元素以塊元素顯示
3、inline 元素以內(nèi)聯(lián)元素顯示
4、inline-block 元素以內(nèi)聯(lián)塊元素顯示
浮動(dòng)
文檔流
文檔流，是指盒子按照html標(biāo)簽編寫(xiě)的順序依次從上到下，從左到右排列，塊元素占一行，行內(nèi)元素在一行之內(nèi)從左到右排列，先寫(xiě)的先排列，后寫(xiě)的排在后面，每個(gè)盒子都占據(jù)自己的位置。
浮動(dòng)特性
1、浮動(dòng)元素有左浮動(dòng)(float:left)和右浮動(dòng)(float:right)兩種
2、浮動(dòng)的元素會(huì)向左或向右浮動(dòng)，碰到父元素邊界、浮動(dòng)元素、未浮動(dòng)的元素才停下來(lái)
3、相鄰浮動(dòng)的塊元素可以并在一行，超出父級(jí)寬度就換行
4、浮動(dòng)讓行內(nèi)元素或塊元素自動(dòng)轉(zhuǎn)化為行內(nèi)塊元素
5、浮動(dòng)元素后面沒(méi)有浮動(dòng)的元素會(huì)占據(jù)浮動(dòng)元素的位置，沒(méi)有浮動(dòng)的元素內(nèi)的文字會(huì)避開(kāi)浮動(dòng)的元素，形成文字饒圖的效果
6、父元素內(nèi)整體浮動(dòng)的元素?zé)o法撐開(kāi)父元素，需要清除浮動(dòng)
7、浮動(dòng)元素之間沒(méi)有垂直margin的合并
清除浮動(dòng)
父級(jí)上增加屬性overflow：hidden
在最后一個(gè)子元素的后面加一個(gè)空的p，給它樣式屬性 clear:both（不推薦）
使用成熟的清浮動(dòng)樣式類(lèi)，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}清除浮動(dòng)的使用方法：
.con2{... overflow:hidden}
或者
定位
關(guān)于定位
我們可以使用css的position屬性來(lái)設(shè)置元素的定位類(lèi)型，postion的設(shè)置項(xiàng)如下：
relative 生成相對(duì)定位元素，元素所占據(jù)的文檔流的位置不變，元素本身相對(duì)文檔流的位置進(jìn)行偏移
absolute 生成絕對(duì)定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對(duì)于上一個(gè)設(shè)置了相對(duì)或者絕對(duì)或者固定定位的父級(jí)元素來(lái)進(jìn)行定位，如果找不到，則相對(duì)于body元素進(jìn)行定位。
fixed 生成固定定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對(duì)于瀏覽器窗口進(jìn)行定位。
static 默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中，相當(dāng)于取消定位屬性或者不設(shè)置定位屬性
inherit 從父元素繼承 position 屬性的值
定位元素特性
絕對(duì)定位和固定定位的塊元素和行內(nèi)元素會(huì)自動(dòng)轉(zhuǎn)化為行內(nèi)塊元素
定位元素層級(jí)
定位元素是浮動(dòng)的正常的文檔流之上的，可以用z-index屬性來(lái)設(shè)置元素的層級(jí)
典型定位布局
1、固定在頂部的菜單
2、水平垂直居中的彈框
3、固定的側(cè)邊的工具欄
4、固定在底部的按鈕
background屬性
屬性解釋
background屬性是css中應(yīng)用比較多，且比較重要的一個(gè)屬性，它是負(fù)責(zé)給盒子設(shè)置背景圖片和背景顏色的，background是一個(gè)復(fù)合屬性，它可以分解成如下幾個(gè)設(shè)置項(xiàng)：
background-color 設(shè)置背景顏色
background-image 設(shè)置背景圖片地址
background-repeat 設(shè)置背景圖片如何重復(fù)平鋪
background-position 設(shè)置背景圖片的位置
background-attachment 設(shè)置背景圖片是固定還是隨著頁(yè)面滾動(dòng)條滾動(dòng)
實(shí)際應(yīng)用中，我們可以用background屬性將上面所有的設(shè)置項(xiàng)放在一起，而且也建議這么做，這樣做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這里面的“#00ff00”是設(shè)置background-color；“url(bgimage.gif)”是設(shè)置background-image；“no-repeat”是設(shè)置background-repeat；“l(fā)eft center”是設(shè)置background-position；“fixed”是設(shè)置background-attachment，各個(gè)設(shè)置項(xiàng)用空格隔開(kāi)，有的設(shè)置項(xiàng)不寫(xiě)也是可以的，它會(huì)使用默認(rèn)值。
舉例：
下面這些例子使用下面這張圖片做為背景圖：
1、“background:url(bg.jpg)”，默認(rèn)設(shè)置一個(gè)圖片地址，圖片會(huì)從盒子的左上角開(kāi)始將盒子鋪滿。
2、“background:cyan url(bg.jpg) repeat-x”，橫向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。
3、“background:cyan url(bg.jpg) repeat-y”，縱向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重復(fù)，背景和盒子左上角對(duì)齊，盒子其他部分顯示背景顏色“cyan”
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重復(fù)，背景和盒子左中對(duì)齊，盒子其他部分顯示背景顏色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重復(fù)，背景和盒子右中對(duì)齊，也就是背景圖片的右邊對(duì)齊盒子的右邊，盒子其他部分顯示背景顏色“cyan”。
相關(guān)代碼：
test background
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg1{background:cyan url(bg.jpg);}
.bg2{background:cyan url(bg.jpg) repeat-x;}
.bg3{background:cyan url(bg.jpg) repeat-y;}
.bg4{background:cyan url(bg.jpg) no-repeat;}
.bg5{background:cyan url(bg.jpg) no-repeat left center;}
.bg6{background:cyan url(bg.jpg) no-repeat right center;}
重慶分公司
重慶分公司