背景颜色

1. 颜色背景

<style type="text/css">
body { font-size: 16px;">h1 { font-size: 16px;">h2 { font-size: 16px;">p { font-size: 16px;"></style>

2. 图片做为背景

(1)body 
{   background-image:url('/articleimg/2006/07/3744/bgdesert.jpg')}

(2)body

     background-image: url('/articleimg/2006/07/3744/bgdesert.jpg');
     background-repeat: repeat  //垂直重复背景图片
}

(3)   body
{    background-image: url('/articleimg/2006/07/3744/bgdesert.jpg');
     background-repeat: repeat-x   //水平重复背景图片
}

3. 怎样放置背景图片(位置摆放)

body
{   background-image: url('/articleimg/2006/07/3744/smiley.gif');
    background-epeat: no-repeat;
    background-position:center; 
}

4. 固定背景图片(不会滚动)
body 
{
background-image:url('/articleimg/2006/07/3744/smiley.gif');
background-repeat:no-repeat;
background-attachment: fixed
}

Text 文字

1.设置文字颜色

<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>

2.字符间的距

<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>

3.对齐
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}

4.文字的修饰
h1 {text-decoration: overline}                           //上化线
h2 {text-decoration: line-through}                     //中化线
h3 {text-decoration: underline}                         //下化线
a {text-decoration: none}

5.文字缩进
p {text-indent: 1cm}

6.文字大小写
p.uppercase {text-transform: uppercase}     // 全部大写
p.lowercase {text-transform: lowercase}     //全部小写
p.capitalize {text-transform: capitalize}       //全部首字母大写

Font 字体
1.设置文字的字体
h3 {font-family: times}
p {font-family: courier}
font-family: sans-serif
2.大小
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
p {font-size: 12px}
p.sansserif {font-family: sans-serif}

3.样式
h1 {font-style: italic}     斜体
h2 {font-style: normal}   粗体
p {font-style: oblique}  
4.
p.normal {font-weight: normal}
p.thick {font-weight: bold}     字体加粗
p.thicker {font-weight: 900}

Border 边框

1.边框样式
<style type="text/css">
p.dotted {border-style: dotted}     //点化线
p.dashed {border-style: dashed} //
p.solid {border-style: solid}
p.double {border-style: doub le}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>

2.边框设置

<style type="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>

3.四边框的颜色
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}

4.设置底边框宽

{
border-style: solid;
border-bottom-width: 15px
}
5.右边框宽

{
border-style: solid;
border-right-width: 15px
}
6.上边框宽

{
border-style: solid;
border-top-width: 15px
}
7.底边框

{
border-bottom: medium solid #ff0000
}

{
border-left: medium solid #ff0000
}
8.所有边框

{
border: medium double rgb(250,0,255)
}

Margin外补丁(间距)

1.设置文字的左边距
p.leftmargin {margin-left: 2cm}    //左边距
p.rightmargin {margin-right: 8cm}   // 设置文字的右边距
p.topmargin {margin-top: 5cm}     //上边距
p.margin {margin: 2cm 4cm 3cm 4cm}   //所有边距属性一行解决

Padding内补丁(填充)

1.左单元格
td {padding-left: 2cm}   //左单元格填充
td {padding-right: 5cm}   //右单元格填充
td {padding-top: 2cm}    //上单元格填充
td {padding-bottom: 2cm}   //下单元格填充
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}      //所有填充属性一行解决

List 列表
1.无序列表的不同项目标号
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
2.有序的列表的不同项目标号
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
3.设置一个图片做为标号
<style type="text/css">
ul 
{
list-style-image: url('/articleimg/2006/07/3744/arrow.gif')
}
</style>

4.放置标号
<style type="text/css">
ul.inside 
{
list-style-position: inside
}

ul.outside 
{
list-style-position: outside
}
</style>
5.所有列表属性一行解决
<style type="text/css">
ul 
{
list-style: square inside url('arrow.gif')
}
</style>

维度

1.增加两行间距
<style type="text/css">
p.small {line-height: 0.4cm}
p.big {line-height: 0.9cm}
</style>

Classification 分类

图片浮动到右边

<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
建立水平菜单
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
将一个元素的相对定位到它的正常位置
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;

padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover { font-size: 16px;">li {display:inline}

元素不可见
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}

改变鼠标样子

<html>

<body>
<p>Move the mouse over the words to see the cursor change:</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:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>

</html>

将一个元素放到另一个元素的后面
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
将一个元素放到另一个元素的后面2
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}

Pseudo-classes 伪类

给超级链接加上不同的颜色

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

给超级链接增加其他样式

a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}

使用:first-child伪类
a:first-child
{
text-decoration:none
}

Pseudo-elements 伪元素

第一个字母特殊化

p:first-letter 
{
color: #ff0000;
font-size:xx-large
}
文字第一行特殊化 
p:first-line 
{
color: #ff0000;
font-variant: small-caps
} 宁静致远,淡泊明志   <div id="commentDIV" oldhtml="<A id=commentTop href="javascript:;"></A> <DIV class="bt_page"><SPAN class="right"><SPAN class="bt_comment" onclick=document.diary_form.content.focus()>发表评论</SPAN></SPAN><SPAN class="left">共<SPAN class="bluenum" id=commentCount1></SPAN>条评论,第<SPAN class="rednum" id=commentPageNo1>1</SPAN>页/共<SPAN class="bluenum" id=commentPageCount1>1</SPAN>页</SPAN><SPAN class="bt_pre_e" title=第一页 onclick="focusTop('commentTop');loadComment(-999)"> </SPAN><SPAN class="bt_pre" title=上一页 onclick="focusTop('commentTop');loadComment(-1)">上一页</SPAN><SPAN class="bt_next" title=下一页 onclick="focusTop('commentTop');loadComment(1)">下一页</SPAN><SPAN class="bt_next_e" title=最后一页 onclick="focusTop('commentTop');loadComment(999)"> </SPAN></DIV>[%repeat_0 match="/rss/channel/item/comment"%] <TABLE class="mode_table" cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD class="mode_table_title_guest"><SPAN class="right"><SPAN class="ownerMode" title=您要拥有照妖镜道具才可以使用照妖镜,照妖镜道具请在藏宝阁兑换 style="CURSOR: pointer" onclick="magicMirror('[%=@id%]','[%=@archive%]')"><%repeat_1 match="magicMode"%><IMG hspace=2 src="http://imgcache.qq.com/qzone/mall/bt_show.gif" align=middle border=0>使用照妖镜&nbsp;<%_repeat_1%></SPAN><SPAN class="bt_qute loginMode" onclick="ubbquote(this.parentNode.nextSibling.nextSibling.firstChild.firstChild.firstChild.firstChild.firstChild.nodeValue,'[%=@pubDate%]','[%=@escapeComment%]',document.diary_form.content)">引用</SPAN><SPAN class="bt_del ownerMode" onclick="deleteComment('[%=@id%]','[%=@archive%]')">删除</SPAN></SPAN>[%=@layer%]楼&nbsp;[%repeat_1 match="author"%] <TABLE class=[%=@rainbow%] cellSpacing=0> <TBODY> <TR> <TD class=[%=@ttt%]>[%=@uin%]</TD></TR></TBODY></TABLE>[%repeat_2 match="angelMode"%]<IMG alt=天使之爱 src="http://imgcache.qq.com/qzone/client/tsza.gif" align=absMiddle border=0>[%_repeat_2%]&nbsp;&nbsp;评论时间:[%_repeat_1%]<SPAN>[%=@commentTime%]</SPAN></TD></TR> <TR> <TD class="mode_table_mains fixTD" style="OVERFLOW: hidden; WIDTH: 100%" vAlign=top> <DIV>[%=@description%]</DIV></TD></TR> <TR class="showSign"> <TD class="mode_sign" vAlign=top>[%=@autograph%]</TD></TR></TBODY></TABLE>[%_repeat_0%]<A name=signCommentBottom></A> <DIV class="bt_page"><SPAN class="mode_blogr_menu"><IMG class="hand" id=previousButton onclick="getArticle('prev')" height=20 alt=上一篇 hspace=3 src="/qzone/images/client/bt_pre_blog.gif" width=20 align=absMiddle>|<IMG class="hand" id=nextButton onclick="getArticle('next')" height=20 alt=下一篇 src="http://imgcache.qq.com/qzone/images/client/bt_next_blog.gif" width=20 align=absMiddle>|<IMG class="hand" onclick=returnBlogList() height=20 alt=返回 src="http://imgcache.qq.com/qzone/images/client/bt_back_blog.gif" width=20 align=absMiddle></SPAN><SPAN class="left">共<SPAN class="bluenum" id=commentCount2></SPAN>条评论,第<SPAN class="rednum" id=commentPageNo2>1</SPAN>页/共<SPAN class="bluenum" id=commentPageCount2>1</SPAN>页</SPAN><SPAN class="bt_pre_e" title=第一页 onclick="focusTop('commentTop');loadComment(-999)"> </SPAN><SPAN class="bt_pre" title=上一页 onclick="focusTop('commentTop');loadComment(-1)">上一页</SPAN><SPAN class="bt_next" title=下一页 onclick="focusTop('commentTop');loadComment(1)">下一页</SPAN><SPAN class="bt_next_e" title=最后一页 onclick="focusTop('commentTop');loadComment(999)"> </SPAN></DIV>">发表评论共5条评论,第1页/共1页 上一页下一页  引用删除1楼   Web Develope    评论时间:2007年1月20日 11时34分 黄色方块

<div style="width:140px; height:140px; cursor:pointer;"></div>

CSS 实用实例的更多相关文章

  1. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  2. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  3. CSS 表格实例

    CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...

  4. css sprite实例

    css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...

  5. CSS 分页实例

    CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html> ...

  6. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  7. CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  8. JavaScript和CSS实用工具、库与资源

    JavaScript和CSS实用工具.库与资源 JavaScript 库 Particles.js  - 一个用于在网页上创建漂亮的浮动粒子的 JS 库: Three.js  - 用于在网页上创建 3 ...

  9. 15个实用的CSS在线实例教程

    前端技术可以说是必须学习的一个技术,现在做网站都需要懂DIV.CSS,在国内很多企业招网页设计师都要求会写基本的前端代码,所以前端技术是 必须了解的,对网页设计师本身也有帮助,今天向大家推荐一些不错的 ...

随机推荐

  1. 用画布canvas画安卓logo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 用JavaScript编写简单斗地主效果Es6

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. [Oracle]记一次由sequence引发的enq sv-contention等待事件

    数据库版本:11.2.0.4 RAC(1)问题现象从EM里面可以看到,在23号早上8:45~8:55时,数据库等待会话暴增,大约到了80个会话.通过查看EM的SQL信息,发现等待产生于SQL语句 se ...

  4. Navicat Premium 12 激活

    链接:https://pan.baidu.com/s/1R4WB2JjKd0UYnN00CpUPSA 提取码:e3wy (破解工具及软件安装包) 破解流程:https://www.jianshu.co ...

  5. Ubuntu下VsCode+CMake 交叉编译

    在安装配置好VsCode后,下载相关插件.如图: 其中CMake Tools是为了方便使用CMake的扩展工具. 在创建工程前,先在VSCode打开一个空的目录(你的Project目录),再对CMak ...

  6. Mysql数据库-DAY2

    查找 Select 字段(全部查找为*)from 表 增加 Insert into 字段(全部增加为表) values(需要增加的内容,用'','隔开') 删除 Delete from 表 where ...

  7. linux 学习第十三天(screen不间断会话、apache服务、SELinux安全子系统)

    一.screen 命令不间断会话 1.安装screen(从系统镜像作为yum仓库安装) 1.1.加载系统镜像 1.2.mount /dev/cdrom /media/cdrom/  (挂在系统镜像) ...

  8. 在node中使用jwt签发与验证token

    1.什么是token token的意思是“令牌”,是服务端生成的一串字符串,作为客户端进行请求的一个标识. token是在服务端产生的.如果前端使用用户名和密码向服务端发送请求认证,服务端认证成功,那 ...

  9. 实验吧 Fair Play

    知识点:playfair密码以前没见过 Playfair密码(英文:Playfair cipher 或 Playfair square)是一种使用一个关键词方格来加密字符对的加密法,1854年由查尔斯 ...

  10. 笔记本电脑、VM虚拟机、开发板三者网线连接互ping

    笔者在做NFS挂接练习时,发现网上的资料大部分是笔记本电脑(以下简称PC)和虚拟机PING.PC和开发板PING,这样的方式不是我想要的.笔者需要使用无线网卡上网,使用有线网卡进行三者互PING.在开 ...