CSS中頁面引用（詳解）-css教學-PHP中文網

為了讓網頁元素的樣式更豐富，也為了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分錶現樣式的標籤就廢棄不用了，html只負責文檔的結構和內容，表現形式完全交給CSS，html文檔變得更加簡潔。

css基本語法

css的定義方法是：

選擇器{ 屬性:值; 屬性:值; 屬性:值;}

器是將樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性每個屬性有一個或多個值。程式碼範例：

p{ width:100px; height:100px; color:red }

登入後複製

css頁面引入方法：

1、外接式：透過link標籤，連結到外部樣式表到頁面中。

<link>

登入後複製

2、嵌入式：透過style標籤，在網頁上建立嵌入的樣式表。

<style>
    p{ width:100px; height:100px; color:red }
        ......
</style>

登入後複製

3、內聯式：透過標籤的style屬性，在標籤上直接寫樣式。

        <p>......</p>

登入後複製

css文字設定

常用的應用程式文字的css樣式：

color 設定文字的顏色，如： color:red;
font-size 設定文字的大小，如：font-size:12px;
font-family 設定文字的字體，如：font-family:'微軟雅黑';
#font-style 設定字體是否傾斜，如：font-style:'normal';設定不傾斜，font-style:'italic';設定文字傾斜
font-weight 設定文字是否加粗，例如：font-weight:bold; 設定加粗font-weight :normal 設定不加粗
font 同時設定文字的幾個屬性，寫的順序有相容問題，建議依照下列順序寫： font：是否加粗字號/行高字體；如： font:normal 12px/36px '微軟雅黑';
line-height 設定文字的行高，如：line-height:24px;
#text-decoration 設定文字的底線，如：text-decoration:none; 將文字下劃線去掉
text-indent 設定文字首行縮排，如： text-indent:24px; 設定文字首行縮排24px
text-align 設定文字水平對齊方式，如text-align:center 設定文字水平居中

css顏色表示法

css顏色值主要有三種表示方法：

1、顏色名表示，比如：red 紅色，gold 金色

2.rgb表示，例如：rgb(255,0,0)表示紅色

3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

css选择器

常用的选择器有如下几种：

1、标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

*{margin:0;padding:0}
p{color:red}   

<p>....</p>   <!-- 对应以上两条样式 -->
<p>....</p>   <!-- 对应以上两条样式 -->

登入後複製

2、id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

举例：

#box{color:red} 

<p>....</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

登入後複製

3、类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<p>....</p>
<h1 id="">....</h1>
<p>....</p>

登入後複製

4、层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

举例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<p>
    <span>....</span>
    <a>....</a>
</p>

<h3 id="">....</h3>

登入後複製

5、组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。

举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<p>....</p>
<p>....</p>
<p>....</p>

登入後複製

6、伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<p>....</p>
<p>....</p>
<p>....</p>

登入後複製

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的設定項目：
        1、visible 預設值。內容不會被修剪，會呈現在元素框外。
        2、hidden 內容修剪，且其餘內容是看不見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
        3、scroll 內容會被修剪，但瀏覽器會顯示捲軸以便查看其餘的內容。
        4、auto 若內容已修剪，瀏覽器會顯示捲軸以便查看其餘的內容。
        5、inherit 規定從父元素應繼承 overflow 屬性的值。

塊元素、內聯元素、內聯塊元素

元素就是標籤，佈局中常用的有三種標籤，塊元素、內聯元素、內聯塊元素，了解這三種元素的特性，才能熟練的進行頁面佈局。

區塊元素
區塊元素，也可以稱為行元素，佈局中常用的標籤如：p、p、ul、li、h1~h6、dl、dt、 dd等等都是區塊元素，它在佈局中的行為：

支援全部的樣式
##如果沒有設定寬度，預設的寬度為父級寬度100%
盒子佔據一行、即使設定了寬度

##內嵌元素

內嵌元素，也可以稱為行內元素，佈局中常用的標籤如：a、span、em、b、strong、i等等都是內聯元素，它們在佈局中的行為：

解決內嵌元素間隙的方法

## 1 、去掉內嵌元素之間的換行 2、將內聯元素的父級設定font-size為0，內聯元素自身再設定font-size

內嵌元素元素

內聯塊元素，也稱為行內塊元素，是新增的元素類型，現有元素沒有歸於此類別的，img和input元素的行為類似這種元素，但是也歸類於內聯元素，我們可以用display屬性將區塊元素或內聯元素轉換成這種元素。它們在佈局中表現的行為：

支援全部樣式

#如果沒有設定寬高，寬高由內容決定
盒子並在一行
程式碼換行，盒子會產生間距
子元素是內嵌區塊元素，父元素可以用text-align屬性設定子元素水平對齊方式，用line-height屬性值設定子元素垂直對齊方式
這三種元素，可以透過display屬性來相互轉化，不過實際開發中，塊元素用得比較多，所以我們常把內聯元素轉化為塊元素，少量轉化為內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。

display属性
      display属性是用来设置元素的类型及隐藏的，常用的属性有：
        1、none 元素隐藏且不占位置
        2、block 元素以块元素显示
        3、inline 元素以内联元素显示
        4、inline-block 元素以内联块元素显示

浮动

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

4、浮动让行内元素或块元素自动转化为行内块元素

5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

7、浮动元素之间没有垂直margin的合并

清除浮动

父级上增加属性overflow：hidden
在最后一个子元素的后面加一个空的p，给它样式属性 clear:both（不推荐）

使用成熟的清浮动样式类，clearfix

.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}

登入後複製

清除浮动的使用方法：

.con2{... overflow:hidden}
或者
<p></p>

登入後複製

定位

关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 產生固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。
static 預設值，沒有定位，元素出現在正常的文件流程中，相當於取消定位屬性或不設定定位屬性
inherit 從父元素繼承position 屬性的值

定位元素特性
絕對定位與固定定位的區塊元素與行內元素會自動轉換為行內區塊元素

定位元素層級
定位元素是浮動的正常的文檔流之上的，可以用z-index屬性來設定元素的層級

典型定位佈局
        1、以頂部固定的選單
        2、水平垂直居中的彈框
     按鈕

屬性解釋 background屬性是css應用比較多，且比較重要的屬性，它是負責為盒子設定背景圖片和背景顏色的，background是一個複合屬性，它可以分解成如下幾個設定項：

background-color 設定背景顏色
background-image 設定背景圖片位址
background-repeat 設定背景圖片如何重複平鋪
background-position 設定背景圖片的位置
background-attachment 設定背景圖片是固定還是隨著頁面捲軸滾動

CSS中頁面引用（詳解）

2、“background:cyan url(bg.jpg) repeat-x”，橫向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。

CSS中頁面引用（詳解）

3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。

CSS中頁面引用（詳解）

4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”

CSS中頁面引用（詳解）

5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。

CSS中頁面引用（詳解）

6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。

CSS中頁面引用（詳解）

相关代码：

nbsp;html>


    <meta>
    <title>test background</title>
    <style>
        .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;}
    </style>


    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>

登入後複製

例子说明：
代码中使用到的背景图片，可以直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，并且和网页文件存在同一个目录下。

关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景。

比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：

CSS中頁面引用（詳解）

用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，如果不设置background-position，默认背景图的左上角会和盒子的左上角对齐，如果设置，可以用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：

CSS中頁面引用（詳解）

对应代码：

nbsp;html>


    <meta>
    <title>test background</title>
    <style>
        .backshow{
            width:320px;
            height:160px;
            border:3px solid #333;
            float:left;
            margin:10px;            
        }        
        .bg{width:94px;
            height:94px;
            border:3px solid #666;
            background:url(location_bg.jpg) -110px -150px;
        }
    </style>


    <p></p>

登入後複製

以上是CSS中頁面引用（詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn