常用css属性

一、常用css属性

(1) *block（区块）

/*表格宽度自适应*/

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) *box（盒子）

(3) float（漂浮）

漂浮 float: left | right | none; 在页面布局的时候用的最多

常见用法

<div style='float:left;width: 50%;' >div1</div>

<div style='float:right;width: 50%;' >div2</div>

一个问题

子标签使用了float时候，父标签的样式失效

<div style='background-color:red;'>

    <div style="float: left">div1</div>

    <div style="float: left">div2</div>

</div>

解决方案一：clear: both

<div style='background-color:red;'>

    <div style="float: left">div1</div>

    <div style="float: left">div2</div>

    <div style="clear: both;"></div> <!--加上clear：both之后就正常了-->

</div>

解决方案二：clearfix

<div style='' class="clearfix">

    <div style="float: left">div1</div>

    <div style="float: left">div2</div>

</div>

.clearfix:after{

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}

(4) position（定位）

fixed

一般用来写网页顶端的固定导航条，或者两侧的菜单。

<!--对于块级标签来说加上position:fixed之后，该div就不会占一整行，一般需要手动定义宽度，如width:100%-->

<div style="position:fixed;height:10%;color:white;width:100%;top:0px;">我是导航</div>

<div style="">

    <div style="position:fixed;bottom: 0px;top:10%;float: left;width: 20%;我是菜单</div>

    <div style="float: right;width:80%;"><p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

        <p>我是内容</p>

    </div>

</div>

absolute与relative

这两者一般配合使用，用于调整div之间的相对位置

<div style="position:relative;width: 300px;height: 150px;">

    <div style="position:absolute;float: left;width: 20%;bottom: 0px;right: 0px;">我是菜单</div>

</div>

(5) 透明度

.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) 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;(正常)

(4) background（背景）

background-repeat : repeat; /*重复排列-网页默认*/

background-repeat : no-repeat; /*不重复排列*/

background-repeat : repeat-x; /*在x轴重复排列*/

background-repeat : repeat-y; /*在y轴重复排列*/

background-position : 90% 90%; /*背景图片x与y轴的位置*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;

(7) text（文本）

(8) 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}

(9) list-style（列表样式）

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;

(10) margin（边界）

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

(11) padding（填充）

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白

(12) vertical（垂直）

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/

(13) a（链接）

a /*所有超链接*/

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

(14) cursor（光标）

/*也可以自定义*/

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>

        <div style='123</div>

    </body>

</html>

内页样式：写在HTML页面里面的style标签里面

<html>

    <head>

        <title>Test</title>

        <style>

            .logo{

                background-color:red;

            }

        </style>

    </head>

    <body>

        <div class='logo'>123</div>

    </body>

</html>

外部样式：通过link标签引入CSS样式

<html>

    <head>

        <title>Test</title>

        <link rel='stylesheet' href='common1.css'/>

    </head>

    <body>

        <div class="logo">123</div>

    </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, div { color: red;}   /*a或div都使用这个css*/

a div { color: red;}    /*只有a下面的div使用该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>

<div 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>

</div>

</body>

</html>