1 背景相关

　　背景颜色　　　　　　background-color 　　　　　=　　颜色名称/rgb值/十六进制值

　　背景图片　　　　　　background-image　　　　　　=　　url('')

　　背景图片平铺方式　　background-repeat　　　　　 =　　repeat-x(仅水平平铺) repeat-y(仅垂直平铺) no-repeat(不平铺)

　　设置背景图片位置　　background-position　　　　　=　　数字+单位/center/top/bottom/left/right 同上。例如：50px 50px

　　背景图片是否滚动　　background-attachment　　　 =　　fixed(不滚动) scroll（滚动）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>first page</title>

    <style>

        body{

            background-color: aliceblue;

            background-image: url('l.jpg');

            background-repeat: no-repeat;

            background-position: right top;

            background-attachment: fixed;

        }

    </style>

</head>

<body>

<h1 >hello world</h1>

<p >this paragra is only used for test</p>

<br>

<p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

</body>

</html>

2 文本相关

　　文本颜色：　　color　　　　　　　=　　颜色名称/rgb值/十六进制值

　　文本对齐方式：text-align 　　=　　center（居中） right（右对齐） justify（两端对齐）

　　　　通过使用text-align:center; 可以将该元素中的 行内元素 居中显示，也就是图片字体都可以居中显示。

　　文本加工：　　text-decoration =　　underline（下划线）

　　文本缩进：　　text-indent　　　 =　　十进制值+单位。例如：50px

　　文本大小写：　text-transform =　　uppercase（大写） lowercase（小写） capitalize（首字母大写）

　　文本阴影：　　text-shadow　　　 =　　num1(左右) num2(上下) num3(粗细) color

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>first page</title>

    <style>

        .first{

            color:red;

            text-align: center;

            text-transform: uppercase;

            text-decoration: none;

        }

        #sencend{

            color:green;

            text-transform: capitalize;

            text-align: right;

            text-decoration: underline;

            text-indent: 50px;

        }

        .third{

            color:yellow;

            text-indent: 100px;

        }

    </style>

</head>

<body>

<h1 class="first">hello world</h1>

<p id="sencend">this paragra is only used for test</p>

<p class="third">this paragra is only used for test</p>

<p>this paragra is only used for test</p>

</body>

</html>

所有文本属性：

3 字体相关

字体系列　　　　font-family　　　　属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。注意: 如果字　　　　　　　　　　　　　　　　　体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明：

字体样式　　　　font-style　　=　　normal(正常) italic(斜体) oblique (粗体)

字体大小　　　　font-size　　 =　　数字+单位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>first page</title>

    <style>

        body{

            font-family: Sans-serif,Monospace;

            font-style: italic;

            font-size: 16px;

        }

    </style>

</head>

<body>

<h1 >hello world</h1>

<p >this paragra is only used for test</p>

<br>

<p>hello world</p>

</body>

</html>

4 链接

a:link {} 　　　　未访问过的链接
a:visited {} 　　　已访问过的链接
a:hover {} 　　　　鼠标放在链接时
a:active {} 　　　　链接被点击时

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>first page</title>

    <style>

        a:link{color:mediumvioletred;font-size: 16px;text-decoration: none}

        a:visited{color:blue;font-size:16px;text-decoration: none}

        a:hover{color:darkgreen;font-size:24px;text-decoration: underline;background-color: aquamarine;padding: 4px}

        a:active{color:darkgoldenrod;font-size: 44px;text-decoration: overline}

    </style>

</head>

<body>

<h1 >hello world</h1>

<p >this paragra is only used for test</p>

<a href="http://baidu.com" target="_blank">百度</a>

<br>

<p>hello world</p>

</body>

</html>

5 列表

列表项样式　　　　list-style-type　　　　=　　disc(默认实心圆)/circle(空心圆)/square(方块)/decimal(数字)……

列表项图片　　　　list-style-image　　　 =　　url('')

<!DOCTYPE html>

<html>

<head>

<style>

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}

ol.d {list-style-type:lower-alpha;}

</style>

</head>

<body>

<p>Examples of a and b:</p>

<ul class="a">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ul>

<ul class="b">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ul>

<p>Examples of c and d </p>

<ol class="c">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ol>

<ol class="d">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ol>

</body>

</html>

6 表格

边框全面设置：　　　　border　　　　=　　　　1px solid(实线) 颜色后两个属性可以省略

边框颜色：　　　　　　border-color　 =　　　　颜色

边框样式：　　　　　　border-style　 =　　　　solid（只记住这一个就可以了）

单独边框：　　　　　　border-top　　

　　　　　　　　　　　border-top-color

　　　　　　　　　　　border-top-style

　　　　　　　　　　　border-top-width

详情请看：http://www.w3school.com.cn/cssref/index.asp

<!DOCTYPE html>

<html>

<head>

<style>

#customers

{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

width:100%;

border-collapse:collapse;

}

#customers td, #customers th

{

font-size:1em;

border:1px solid #98bf21;

padding:3px 7px 2px 7px;

}

#customers th

{

font-size:1.1em;

text-align:left;

padding-top:5px;

padding-bottom:4px;

background-color:#A7C942;

color:#ffffff;

}

#customers tr.alt td

{

color:#000000;

background-color:#EAF2D3;

}

</style>

</head>

<body>

<table id="customers">

<tr>

  <th>Company</th>

  <th>Contact</th>

  <th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr class="alt">

<td>Berglunds snabbköp</td>

<td>Christina Berglund</td>

<td>Sweden</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

<tr class="alt">

<td>Ernst Handel</td>

<td>Roland Mendel</td>

<td>Austria</td>

</tr>

<tr>

<td>Island Trading</td>

<td>Helen Bennett</td>

<td>UK</td>

</tr>

<tr class="alt">

<td>Königlich Essen</td>

<td>Philip Cramer</td>

<td>Germany</td>

</tr>

<tr>

<td>Laughing Bacchus Winecellars</td>

<td>Yoshi Tannamuri</td>

<td>Canada</td>

</tr>

<tr class="alt">

<td>Magazzini Alimentari Riuniti</td>

<td>Giovanni Rovelli</td>

<td>Italy</td>

</tr>

<tr>

<td>North/South</td>

<td>Simon Crowther</td>

<td>UK</td>

</tr>

<tr class="alt">

<td>Paris spécialités</td>

<td>Marie Bertrand</td>

<td>France</td>

</tr>

</table>

</body>

</html>

个性表格

7 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

可以对轮廓指定样式，颜色和外边框的宽度。

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    .b{

        outline:10px solid black;

    }

</style>

</head>

<body>

<p><span class="b">hello world</span></p>

</body>

</html>

轮廓演示

8 盒子模型

边框：

　　-border: 2px solid red; 表示边框宽度(border-width)为2px，边框样式(border-style)为实线，边框颜色(border-color)为红色

　　-其中常用的边框样式有：solid 实线 dashed 虚线 dotted 点线

　　-可以单独设置上右下左边框：border-top/border-right/border-bottom/border-left

外边距 margin：

　　 -若margin后面跟一个数字，则表示上右下左外边距相同，且值为该数字；若margin后面跟两个数字，第一个表示垂直，第二个表示水平；若　　margin后面跟4个数字，则按照上右下左的顺序设置。

　　-可以单独设置上右下左外边距：margin-top/margin-right/margin-bottom/margin-left

　　-使用margin:0px auto;可以将定宽的 块元素 设置为居中显示

内边距 padding：

　　同上。

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    .a{

        padding:10px;

        border:1px solid red;

        width:100px;

    }

    p {

        margin:50px;

        width:200px

    }

</style>

</head>

<body>

<p class="a">hello world </p>

</body>

</html>

9 尺寸

10 元素分类

html元素分为三类：

　　块元素 block：如<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>等。

　　　　特点：　每个块级元素都从新的一行开始，其后的元素另起一行，也就是说，块级元素很霸道，要占一整行。

　　　　　　　　块级元素可以设置宽高行高顶边距和底边距

　　　　　　　　元素宽度在不设置的情况下，是其父容器的100%

　　行内(内联)元素 inline：如<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>等

　　　　特点：　前后无换行符

　　　　　　　　元素的高宽顶边距和底边距不可设置

　　　　　　　　元素的宽度就是他包含的文本或者图片的宽度。

　　行内块元素 inline-block：如<img>、<input>

　　　　特点：　前后无换行符

　　　　　　　　元素的高宽顶边距和底边距可以设置

我们可以使用css中的display属性改变元素类型：

display　　　　=　　inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

　　　　　　　　　 block 此元素将显示为块级元素，此元素前后会带有换行符。

　　　　　　　　　 none 此元素会被隐藏，且隐藏的元素不会占用任何空间

　　　　　　　　　 inline-block 设置为行内块元素

css中的display属性对元素进行转换，也可以隐藏元素。

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <style>

 li{

     display: inline;

     background-color: #A7C942;

     font-size: 28px;

 }

 </style>

 </head>

 <body>

 <ul >

     <li>a</li>

     <li>b</li>

     <li>c</li>

     <li>d</li>

 </ul>

 </body>

 </html>

块元素转为行内元素

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <style>

 span{

     display: block;

     background-color: #A7C942;

     font-size: 28px;

 }

 </style>

 </head>

 <body>

 <p><span>hello</span><span>world</span></p>

 </body>

 </html>

行内元素转换为块元素

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    span{

        display: block;

        background-color: #A7C942;

        font-size: 28px;

    }

    .a{

        display: none;

    }

</style>

</head>

<body>

<p><span class="a">hello</span><span>world</span></p>

</body>

</html>

隐藏元素

11 布局模型

CSS 有三种基本的定位机制：普通流、绝对定位、浮动。

css中有三种布局模型：

　　1 流动模型，默认模型。在这种模型下：

　　　　1 块元素都会在所处的包含元素自上而下按照顺序垂直延伸分布，因此在默认状态下，块元素的宽度都是100%

　　　　2 内联元素则会在所处的包含元素内从左到右水平分布显示

　　2 浮动模型，float

　　　　使用float属性可以让两个块元素并排显示,浮动的元素仍处在标准文档流中。

　　3 层模型，使用css中的position

　　css的position属性有四个值：

　　　　static：HTML元素的默认值，即没有定位，元素出现在正常的流中，也就是普通流。静态定位的元素不会受到top, bottom, left, right影响。

　　　　fixed：元素的位置相对于浏览器窗口是固定位置，相当于定位基准为视窗本身的绝对定位。即使窗口是滚动的它也不会移动。通过 left right top bottom 来确定元素在正常流中的偏移位置。

　　　　relative：相对定位元素的定位是相对其正常位置，也是出现在普通流。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动，相对定位元素它原本占的空间不会改变（也就是在普通流中原来的位置仍保留）。通过 left right top bottom 来确定元素在正常流中的偏移位置。

　　　　absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute定位的元素会和其他元素重叠。Absolute定位使元素的位置与文档流无关，因此不占据空间。通过 left right top bottom 来确定元素在正常流中的偏移位置。

　　　　absolute可以和relative组合使用，定位元素以某个元素作为参照物进行定位。但有几个前提条件：

　　　　　　1 参照元素必需是定位元素的父元素

　　　　　　2 参照元素必需使用position:relative

　　　　　　3 定位元素使用position:absolute进行定位

另外，我们可以使用z-index属性来设置元素的堆叠次序（垂直方向的前后）

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    .b{

        position:fixed;

        z-index: -1;

    }

</style>

</head>

<body>

<img class='b' src="l.jpg">

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p>

</body>

</html>

position=fixed实例

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    .b{

        position:relative;

        top: 30px;

    }

</style>

</head>

<body>

<p class="b">test  test test</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

</body>

</html>

position=relative实例

注意：在relative介绍中，有这样一句话“相对定位元素它原本所占的空间不会改变（也就是在普通流中原来的位置仍保留）”。这句话在relative实例中，得到了体现。hello world并不会占用第一行，而是从第二个段落位置开始排列。

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    .b{

        position:absolute;

        top: 30px;

    }

</style>

</head>

<body>

<p class="b">test  test test</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>

</body>

</html>

position=absolute实例

Absolute定位使元素的位置与文档流无关，因此不占据空间。可以和relative的实例结果进行比较。

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    .b{

        position:absolute;

        z-index: -1;

    }

</style>

</head>

<body>

<img class='b' src="l.jpg">

<p>hello world</p>

</body>

</html>

z-index实例

浏览器显示：

另外，定位属性还有很多，贴张图：

<!DOCTYPE html>

<html>

<body>

<p>Mouse over the words to change the cursor.</p>

<span style="cursor:auto">auto</span><br>

<span style="cursor:crosshair">crosshair</span><br>

<span style="cursor:default">default</span><br>

<span style="cursor:e-resize">e-resize</span><br>

<span style="cursor:help">help</span><br>

<span style="cursor:move">move</span><br>

<span style="cursor:n-resize">n-resize</span><br>

<span style="cursor:ne-resize">ne-resize</span><br>

<span style="cursor:nw-resize">nw-resize</span><br>

<span style="cursor:pointer">pointer</span><br>

<span style="cursor:progress">progress</span><br>

<span style="cursor:s-resize">s-resize</span><br>

<span style="cursor:se-resize">se-resize</span><br>

<span style="cursor:sw-resize">sw-resize</span><br>

<span style="cursor:text">text</span><br>

<span style="cursor:w-resize">w-resize</span><br>

<span style="cursor:wait">wait</span><br>

</body>

</html>

更改光标cursor实例

<!DOCTYPE html>

<html>

<head>

<style>

div.scroll

{

background-color:#00FFFF;

width:200px;

height:100px;

overflow:scroll;

}

div.hidden

{

background-color:#00FF00;

width:100px;

height:100px;

overflow:hidden;

}

</style>

</head>

<body>

<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>

<p>overflow:scroll</p>

<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

<p>overflow:hidden</p>

<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

</body>

</html>

溢出overflow实例

css常用属性1的更多相关文章

好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
CSS常用属性-xy
一.文本Text CSS text-align 属性文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
css常用属性汇总
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...
23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容复习之前的知识点 02演示VS创建元素 03div和span区别通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
css常用属性总结：颜色和单位
在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般 ...
javascript之css常用属性
1. position : 属性值有absolute .fixed.relative absolute:生成绝对定位的元素,相对第一父元素进行定位: fixed : 生成绝对定位的元素,相对于浏览 ...
css常用属性2
1 浮动和清除浮动在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动 ...

随机推荐

QQ推广神器：批量加群、好友、群发。支持批量搜索关键词加群分享下载
V2.1版本更新说明: 1.新增邮箱导出功能 2.新增一键添加关键词查询结果所有群 3.新增好友验证数学自动计算 4.新增好友验证答案判断 ------------------------------ ...
appium python api收集
1.contexts contexts(self): Returns the contexts within the current session. 返回当前会话中的上下文,使用后可以识别H5页面的 ...
JS判断当前使用设备是pc端还是web端（转MirageFireFox）
js判断当前设备最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实. 仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站. 站点 PC端url we ...
chrome开发工具指南（五）
Main Menu Click More to open the Main Menu. Settings To open Settings, do one of the following: Pre ...
group by 多字段分组
在平时的开发任务中我们经常会用到MYSQL的GROUP BY分组, 用来获取数据表中以分组字段为依据的统计数据.比如有一个学生选课表,表结构如下: Table: Subject_Selection S ...
PHP初入,基础知识点分享（a标签&表格的嵌套&文字的处理）
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
自制VTP实验总结
(packet tracer模拟器) 6.1)实验拓扑 //绿色:通:橙色:不通 //sw0是根桥:全通 Pc0:ip 192.168.1.1 Pc1: ip 192.168.1.2 Pc2:ip 1 ...
[转载]浏览器事件window.onload、onfocus、onblur、ons
原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...
【Alpha】第四次Daily Scrum Meeting
GIT 一.今日站立式会议照片二.会议内容 1.采取老师提出的建议,考虑对送礼对象进行一个分类,这个在服务功能模块中完善. 2.回顾之前几次会议的内容,做一个小的总结,各抒己见,对每个人哪方面做得比 ...
第一周作业.四则运算生成器（基于python）
题目从<构建之法>第一章的 "程序" 例子出发,像阿超那样,花二十分钟写一个能自动生成小学四则运算题目的命令行 "软件",满足以下需求: 除了整数 ...

css常用属性1

1 背景相关

CSS 有三种基本的定位机制：普通流、绝对定位、浮动。

css常用属性1的更多相关文章

随机推荐

热门专题