css屬性有哪些？css常用屬性的總結（執行個體）

css屬性有哪些？css 屬性有很多，今天在這裡，我給大家總結一下我們經常用的一些css屬性，包括css文字屬性，css邊框屬性，css定位屬性，列表樣式等等，除此之外，還給大家介紹了一下css的寫法樣式。

常用的css屬性

1. css區塊屬性（*block）

行高 line-height:數值 | inherit | normal;
字間距 letter-spacing: 數值 | inherit | normal;
詞間距 word-spacing: 數值 | inherit | normal;
空格 white-space: pre(保留) | nowrap(不換行) | normal;

/*表格寬度自適應*/th {white-space: nowrap;}

顯示 display:

none; /*不顯示，使用的情境非常多*/
block; /*把內聯標籤變成塊級標籤*/
inline; /*把塊級標籤變成內聯標籤*/
list-item; /*清單項目*/
run-in; /*追加部分*/
compact; /*緊湊*/
marker; /*標記*/
table;
inline-table;
table-raw-group;
table-header-group;
table-footer-group;
table-raw;
table-column-group;
table-column;
table-cell;
table-caption; /*表格標題*/

2.css盒子屬性（*box）

寬度 width: 長度 | 百分比 | auto;
高度 height: 長度 | 百分比 | auto;
清除 clear: none | left | right | both;
邊界 margin: 上 右 下 左 ;
填充 padding: 上 右 下 左 ;
定位 position: absolute | relative | static;
透明度 visibility: inherit | visible | hidden;
溢出 overflow: visible | hidden | scroll auto;

3.css漂浮屬性（float）

漂浮 float: left | right | none; 在頁面配置的時候用的最多

常見用法：

<p style='background-color:red;float:left;width: 50%;' >p1</p><p style='background-color:green;float:right;width: 50%;' >p2</p>

一個問題：

子標籤使用了float時候，父標籤的樣式失效

<p style='background-color:red;'>    <p style="float: left">p1</p>    <p style="float: left">p2</p></p>

解決方案一：clear: both

<p style='background-color:red;'>    <p style="float: left">p1</p>    <p style="float: left">p2</p>    <p style="clear: both;"></p> <!--加上clear：both之後就正常了--></p>

解決方案二：clearfix

<p style='background-color:red;' class="clearfix">    <p style="float: left">p1</p>    <p style="float: left">p2</p></p>

.clearfix:after{    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}

4.css定位屬性（position）

fixed

一般用來寫網頁頂端的固定導航條，或者兩側的菜單。

<!--對於塊級標籤來說加上position:fixed之後，該p就不會佔一整行，一般需要手動定義寬度，如width:100%--> <div style="position:fixed;height:10%;background-color:lightskyblue;color:white;width:100%;top:0px;">導航</div><div style="">    <div style="position:fixed;bottom: 0px;top:10%;float: left;width: 20%;background-color:indianred">菜單</div>    <div style="float: right;width:80%;">        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>        <p>php中文網</p>    </div></div>

運行效果：

absolute與relative

這兩者一般配合使用，用於調整div之間的相對位置

<div style="">   <div style="position:relative;width: 300px;height: 150px;">    <div style="position:absolute;float: left;width: 20%;background-color:indianred;bottom: 0px;right: 0px;">這是一個菜單</div></div>

運行效果如下:

5.css 透明度

.image{    opacity: 0.5}

<img src="http://www.jotlab.com/wp-content/uploads/2008/08/python.jpg" style="opacity: 0.5; width:50%; height:50%; ">

6.css字型屬性（font）

顏色 color: 數值;
大小 font-size: 數值;
字型 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)
粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)
變體 font-variant: small-caps;(小型大寫字母) normal;(正常)

7.css背景屬性(background)

背景 background: transparent; /透視背景*/
顏色 background-color: 數值;
圖片 background-image: url() | none;
重複 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

background-repeat : repeat; /*重複排列-網頁預設*/background-repeat : no-repeat; /*不重複排列*/background-repeat : repeat-x; /*在x軸重複排列*/background-repeat : repeat-y; /*在y軸重複排列*/

滾動 background-attachment: fixed | scroll;
位置 background-position:數值 | top | bottom | left | right | center;

background-position : 90% 90%; /*背景圖片x與y軸的位置*/background-position : top; /*向上對齊*/background-position : buttom; /*向下對齊*/background-position : left; /*向靠左對齊*/background-position : right; /*向靠右對齊*/background-position : center; /*置中對齊*/

簡寫 background:背景顏色 | 背景圖象 | 背景重複 | 背景附件 | 背景位置 ;

8.css文字屬性(text)

大小寫 text-transform: capitalize | uppercase | lowercase | none;
修飾 text-decoration: underline;(底線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)
排列 text-align: justify | left | right | center;
縮排 text-indent: 數值 | inherit;
陰影 text-shadow:數值;

9.css邊框屬性（border）

邊框樣式 border-style: dotted;(點線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset;
邊框寬度 border-width: ;
邊框顏色 border-color: top值 right值 bottom值 left值;
簡寫 border: width style color;

邊　　框 {border:border-width border-style color}上 邊 框 {border-top:border-top-width border-style color}右 邊 框 {border-right:border-right-width border-style color}下 邊 框 {border-bottom:border-bottom-width border-style color}左 邊 框 {border-left:border-left-width border-style color}

10.css列表樣式（list-style）

類型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

list-style-type:none; /*不編號*/list-style-type:decimal; /*阿拉伯數字*/list-style-type:lower-roman; /*小寫羅馬數字*/list-style-type:upper-roman; /*大寫羅馬數字*/list-style-type:lower-alpha; /*小寫英文字母*/list-style-type:upper-alpha; /*大寫英文字母*/list-style-type:disc; /*實心圓形符號*/list-style-type:circle; /*空心圓形符號*/list-style-type:square; /*實心方形符號*/

位置 list-style-position: outside | inside;
映像 list-style-image: URL;
簡寫 list-style:目錄樣式類型 | 目錄樣式位置 | url;

11.css邊界屬性（margin）

margin-top:10px; (上邊界)
margin-right:10px; (右邊界)
margin-bottom:10px; (下邊界值)
margin-left:10px; (左邊界值)
margin-inside:;
margin-outside:;

12.css填充屬性（padding）

padding-top:10px; /*上邊框留空白*/padding-right:10px; /*右邊框留空白*/padding-bottom:10px; /*下邊框留空白*/padding-left:10px; /*左邊框留空白

13.css垂直屬性（vertical）

vertical-align:sub; /*下標字*/vertical-align:super; /*上標字*/vertical-align:top; /*垂直向上對齊*/vertical-align:bottom; /*垂直向下對齊*/vertical-align:middle; /*垂直置中對齊*/vertical-align:text-top; /*文字垂直向上對齊*/vertical-align:text-bottom; /*文字垂直向下對齊*/

14.連結 （a）

a /*所有超連結*/a:link /*超連結顯示文字格式*/a:visited /*瀏覽過的連結文字格式*/a:active /*按下連結的格式*/a:hover /*滑鼠轉到連結*/

15.css游標（cursor）

游標形狀 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;

/*也可以自訂*/cursor: hand; /*連結手指*/cursor: crosshair /*十字型 */cursor: s-resize /*箭頭朝下 */cursor: move /*十字箭頭, 朝右*/cursor: help /*加一問號 */cursor: w-resize /*箭頭朝左 */cursor: n-resize /*箭頭朝上 */cursor: ne-resize /*箭頭朝右上 */cursor: nw-resize /*箭頭朝左上 */cursor: text /*文字型*/cursor: se-resize /*箭頭斜右下 */cursor: sw-resize /*箭頭斜左下*/cursor: wait /*漏鬥*/

css實踐

1. css的三種寫法

行內樣式：寫在對應標籤的style屬性裡面

<html>    <head>          <title>Test</title>    </head>    <body>        <p style='background-color:red'>123</p>    </body></html>

內頁樣式：寫在HTML頁面裡面的style標籤裡面

<html>    <head>        <title>Test</title>        <style>            .logo{                background-color:red;            }        </style>    </head>    <body>        <p class='logo'>123</p>    </body></html>

外部樣式：通過link標籤引入CSS樣式

<html>    <head>        <title>Test</title>        <link rel='stylesheet' href='common1.css'/>    </head>    <body>        <p class="logo">123</p>    </body></html>

.logo {    background-color: red;    color: white;}

2. 常規用例

p {font-family: "sans serif";}  /*值為若干單詞，則要給值加引號*/.logo {background-color: red;}.logo a,.logo p {background-color: red;}#morra {background-color: green;}a, p { color: red;}   /*a或p都使用這個css*/a p { color: red;}    /*只有a下面的p使用該css*/

註：css 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。

Demo

<!DOCTYPE html><html><head>    <title>This is a demo</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <style type="text/css">        body {            background-color: #e1ddd9;            font-size: 12px;            font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;            color: #564b47;            padding: 0px;            margin: 0px;        }        #inhalt {            position: absolute;            height: 200px;            width: 400px;            margin: -100px 0px 0px -200px;            top: 50%;            left: 50%;            text-align: center;            padding: 0px;            background-color: #f5f5f5;            border: 1px dotted #000000;            overflow: auto;        }        p, h1 {            margin: 0px;            padding: 10px;        }        h1 {            font-size: 11px;            text-transform: uppercase;            text-align: center;            color: #564b47;            background-color: #90897a;        }        a {            color: #ff66cc;            font-size: 11px;            background-color: transparent;            text-decoration: none;        }    </style></head><body><p id="inhalt">    <p>    <h1>Morra's Demo</h1><br/><br/>    This area should be horizontally and vertically centered.<br/>    This text stays left aligned<br/>    <a href="http://www.cnblogs.com/whatisfantasy/">what is fantasy?</a>    </p>    <p></p></body></html>

運行如下：