css样式代码的基本格式

html-css06

css样式代码的基本格式,第1张

CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。

1.基本语法规范

分析一个典型CSS的语句:

p {COLOR:#FF0000BACKGROUND:#FFFFFF}

其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;

样式声明写在一对大括号"{}"中;

COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号""分隔;

"#FF0000"和"#FFFFFF"是属性的值(value)。

2.颜色值

颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。

3.定义字体

web标准推荐如下字体定义方法:

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif}

字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;

Lucida Grande字体适合Mac OS X;

Verdana字体适合所有的Windows系统;

Lucida适合UNIX用户

"宋体"适合中文简体用户

如果所列出的字体都不能用,则默认的sans-serif字体能保证调用

4.群选择器

当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,: p, td, li { font-size : 12px }

5.派生选择器

可以使用派生选择器给一个元素里的子元素定义样式,例如这样:

li strong { font-style : italicfont-weight : normal;}

就是给li下面的子元素strong定义一个斜体不加粗的样式。

6.id选择器

用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层

<div id="menubar"></div>

然后在样式表里这样定义:

#menubar {MARGIN: 0pxBACKGROUND: #FEFEFECOLOR: #666}

其中"menubar"是你自己定义的id名称。注意在前面加"#"号。

id选择器也同样支持派生,例如:

#menubar p { text-align : rightmargin-top : 10px}

这个方法主要用来定义层和那些比较复杂,有多个派生的元素。

6.类别选择器

在CSS里用一个点开头表示类别选择器定义,例如:

.14px {color : #f60 font-size:14px }

在页面中,用class="类别名"的方法调用:

<span class="14px">14px大小的字体</span>

这个方法比较简单灵活,可以随时根据页面需要新建和删除。

7.定义链接的样式

CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:

a:link{font-weight : bold text-decoration : none color : #c00 }

a:visited {font-weight : bold text-decoration : none color : #c30 }

a:hover {font-weight : bold text-decoration : underline color : #f60 }

a:active {font-weight : bold text-decoration : none color : #F90 }

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

1、白色。 #fff是十六进制颜色码的简写方式。

十六进制颜色码就是在软件中设定颜色值的代码。在很多软件中,都会遇到设定颜色值的问题。而在日常中,任何颜色都是由三种最基本的颜色叠加形成的,这三种颜色称为“三基色”。一般用RGB值表示。

2、可以用 RGB颜色值与十六进制颜色码转换工具

扩展资料:

发展来源

人的眼睛看到的颜色有两种:

⒈ 一种是发光体发出的颜色,比如计算机显示器屏幕显示的颜色。

⒉ 另一种是物体本身不发光,而是反射的光产生的颜色,比如看报纸和杂志上的颜色。

我们又知道任何颜色都是由三种最基本的颜色叠加形成的,这三种颜色称为“三基色”。

⒈ 对于上面提到的第一种颜色,即发光体的颜色模式,又称为“加色模式”,三基色是“红”、“绿”、“蓝”三种颜色。加色模式又称为“RGB模式”;

⒉ 而对于印刷品这样的颜色模式,又称为“减色模式”,它的三基色是“青”、“洋红”、“黄”三种颜色。减色模式又称为“CMYK”模式。

在HTML语言规范中定义,可以通过两种方式指定颜色。

⒈ 一种方式是以定义好的颜色名称表示,具体的颜色名称针对不同的浏览器也有所不同。

⒉ 另一种方式通过一个以“#”开头的6位十六进制数值表示一种颜色。6位数字分为3组,每组两位,依次表示红、绿、蓝三种颜色的强度。

例如,在网页上要指定一种颜色,就要使用RGB模式来确定,方法是分别指定R/G/B,也就是红/绿/蓝三种基色的强度,通常规定,每一种颜色强度最低为 0,最高为255,并通常都以16进制数值表示,那么255对应于十六进制就是FF,并把三个数值依次并列起来 ,以#开头。

例如,颜色值“#FF0000”为红色,因为红色的值达到了最高值 FF(即十进制的255),其余两种颜色强度为0。在例如“#FFFF00”表示黄色,因为当红色和绿色都为最大值,且蓝色为0时,产生的就是黄色。

参考资料:十六进制颜色码-百度百科

css颜色十六进制对照表-W3School

先看下给你的解释吧..

http://www.baidu.com/search/hi.html#n8

http://www.baidu.com/search/hi/hi_css.html

快点!!

1、关于文字或背景的颜色的16进制代码形式如:#530C0E

可以到如下网页直观查看颜色代码:

http://shirley329.blogchina.com/3501281.html

也可以用颜色的相应英文单词替换,如:Black Fuchsia Gray Gree Lime Maroon Navy Olive Purple Red Silver Teal White Yellow Blue Aqua

2、相关元素“位置”为“center,left,right”,可直接相互替换;

3、文字等元素的大小格式为“13px”数字越大字号或元素就越大,反之则越小;

4、图片地址可直接用可以引用的地址替换,建议将图片传到空间相册后再引用。

5、代码详细注释:

body{background-color:#530C0E}

——背景颜色

#header{height:89pxbackground:url([img]http://img.baidu.com/hi/temp13/hdbg.gif[/i%20mg])%20repeat-x%20#FFDA41}

——主页左上角背景图片

#header div.lc{background:url([img]http://img.baidu.com/hi/temp13/hdl.gif[/i mg]) no-repeat}

#header div.rc{background:url([img]http://img.baidu.com/hi/temp13/hdr.jpg[/i mg]) no-repeat top right}

——主页右上角背景图片

#header div.tit{top:8pxleft:20pxline-height:22pxfont-size:20pxfont-family:黑体}

——空间名字大小颜色

#header div.tit a.titlink{color:#FFC45Etext-decoration:none}

——空间名字链接颜色,未被点击

#header div.tit a.titlink:visited{color:#FFC45Etext-decoration:none}

——空间名字链接颜色,已被点击

#header div.desc{top:33pxleft:20pxcolor:#FFC45Efont-size:13px}

——空间介绍位置大小颜色

#tabline{top:89px}

#tab{top:67pxbackground:url(

) repeat-x}

——页面上方“主页博客|相册……”栏背景图片

#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:3pxline-height:19pxbackground-color:#BC0304color:#FFFFFFfont-size:14px}

——页面上方“主页”栏大小颜色+背景

#tab span{color:#FFFFFFfont-size:14px}

#tab a:link{color:#FFFFFFtext-decoration:nonefont-size:14px}

——页面上方“博客|相册……”栏链接颜色,未被点击

#tab a:visited{color:#FFFFFFtext-decoration:nonefont-size:14px}

——页面上方“博客|相册……”栏链接颜色,已被点击

#tab2{background:#DAE9F5}

#tab2 span{color:#000000font-size:12pxfont-weight:bold}

#tab2 a{font-size:12px}

#tab2 a:link{color:#0000CC}

#tab2 a:visited{color:#0000CC}

.stage{background:url([img]http://img.baidu.com/hi/temp13/bg.gif[/im%20g])%20repeat-x%20#9B1316}

#comm_info{color:#000000font-family:Arialtext-align:left}

——其他中“已有 人次访问本空间”颜色位置

#comm_info div.line{margin-top:5pxline-height:8pxborder-top:1px solid #F4C1B5}

——“已有 人次访问本空间”下面粉红色分割线相关设置

#comm_info a{color:#D77B18}——其它中“什么是RSS?”颜色

#page{height:30pxfont-size:14pxfont-family:Arialtext-align:center}

#page span{padding:3pxcolor:#000000font-size:14pxfont-weight:bold}

#page a.pc{color:#D77B18font-size:14pxfont-weight:bold}

#page a.pc:visited{color:#D77B18}

#page a.pi{padding:3pxcolor:#D77B18font-size:14px}

#page a.pi:visited{color:#D77B18}

.mod{margin-bottom:10px}

——各栏目间的上下间距

.modhandle{cursor:move}

.modth{height:24px}

——各栏目标题和正文之间的间距

.modhead{padding:4px 4px 0 4px}

——各栏目标题的位置

.modopt{padding:4px 4px 0 0}

——各栏目间的上下间距

.modtit{color:#FFFFFFfont-size:12pxfont-weight:bold}a.modtit{color:#FFFFFF}a.modtit:visited{color:#FFFFFF}

——各栏目标题大小颜色

.modtitlink{color:#FFFFFFfont-size:12pxfont-weight:bold}a.modtitlink{color:#FFFFFFtext-decoration:none}a.modtitlink:visited{color:#FFFFFFtext-decoration:none}a.modtitlink:hover{color:#FFFFFFtext-decoration:underline}

.modact{color:#FFFFFFfont-size:12px}a.modact:link{color:#FFFFFF}a.modact:visited{color:#FFFFFF}

——每个栏目右上角“编辑”等链接的相关大小颜色设置

.modbox{padding:10px 10px 0 10pxbackground-color:#FFF6E7border-left:1px solid #FFF6E7border-right:1px solid #FFF6E7}

——每个栏目的主背景颜色等

.modtl{background:url(

) no-repeat top leftline-height:1px}

——每个栏目左上角远郊边沿图片

.modtc{background:url(

) repeat-x}

——每个栏目标题中间的背景图片

.modtr{background:url(

) no-repeat top rightline-height:1px}

——每个栏目右上角远郊边沿图片

.modbl{background-color:#FFF6E7border-left:1px solid #FFF6E7border-bottom:1px solid #FFF6E7line-height:1px}

——每个栏目左下角点的设置

.modbc{background-color:#FFF6E7border-bottom:1px solid #FFF6E7line-height:1px}

——每个栏目最下端一条的设置

.modbr{background-color:#FFF6E7border-right:1px solid #FFF6E7border-bottom:1px solid #FFF6E7line-height:1px}

——每个栏目右下角点的设置

#m_blog div.tit{font-size:14pxfont-weight:bold}

#m_blog div.tit a{color:#000000font-size:14pxfont-weight:bold}

——日志标题大小颜色,未被点击

#m_blog div.tit a:visited{color:#000000}

——日志标题大小颜色,已被点击

#m_blog div.date{margin:5px 0 8px 0color:#666666}

——日志日期文字大小颜色

#m_blog div.cnt{color:#000000line-height:20pxfont-size:14px}

——日志内容大小颜色

#m_blog div.more{margin:14px 0 16px 0}

#m_blog div.more a{color:#D77B18font-size:14px}

——日志“阅读全文>>”的大小颜色,未被点击

#m_blog div.more a:visited{color:#D77B18}

——日志“阅读全文>>”的大小颜色,已被点击

#m_blog div.opt{color:#666666font-size:12px}

——“类别:技术专区 | 编辑……”中的“|”的颜色大小

#m_blog div.opt a{color:#D77B18font-size:12px}

——“类别:技术专区”的大小颜色

#m_blog div.opt a:visited{color:#D77B18}

——“编辑 删除 评论(4) 浏览(21)”的大小颜色

#m_blog div.line{margin-top:17pxline-height:17pxborder-top:1px solid #F4C1B5}

——日之间的分割线的相关设置

#m_blog div.none{padding:100px 0 100px 0color:#000000font-size:14px}

——隐形设置,不需要改变

#m_pro a{color:#D77B18}

——个人档案中“查看详细信息”的颜色,未被点击

#m_pro a:visited{color:#D77B18}

——个人档案中“查看详细信息”的颜色,已被点击

#m_pro div.image{text-align:center}

——个人档案中照片的显示位置,分为“中,左,右——center,left,right”

#m_pro div.act{margin-top:10px}

——个人介绍和照片的间距

#m_pro div.user{margin-top:10pxcolor:#000000font-size:12pxfont-weight:bold}

——个人用户名的大小颜色

#m_pro div.desc{color:#000000font-size:12px}

——个人介绍的大小颜色

#m_pro div.line{margin-top:17pxline-height:17pxborder-top:1px solid #F4C1B5}

#m_pro td{color:#000000line-height:24pxfont-size:14px}

#m_album div.image{text-align:center}

——相册中照片的显示位置,分为“中,左,右——center,left,right”

#m_album div.page{color:#666666font-size:12pxtext-align:center}

#m_album div.page a{color:#0000CCfont-size:12px}

#m_album div.page a:visited{color:#0000CC}

#m_links div.item{color:#000000font-size:12px}

——友情链接的连接描述的大小颜色

#m_links div.item a{color:#D77B18font-size:12pxtext-decoration:none}

——友情链接名的大小颜色,未被点击

#m_links div.item a:visited{color:#D77B18}

——友情链接名的大小颜色,已被点击

#m_links div.line{margin-top:5pxline-height:8pxborder-top:1px solid #F4C1B5}

——友情链接见的分隔符的相关设置

#m_artclg div.item{color:#666666font-size:12px}

——文章分类中各分类后面主题数及括号的大小颜色

#m_artclg div.item a{color:#D77B18font-size:12px}

——文章分类中各分类的大小颜色,未被点击

#m_artclg div.item a:visited{color:#D77B18}

——文章分类中各分类的大小颜色,已被点击

#m_artclg div.line{margin-top:5pxline-height:8pxborder-top:1px solid #F4C1B5}

——文章分类中各分类之间的分割线的相关设置

#m_comment div.item{color:#000000font-size:12px}

#m_comment div.item a{color:#D77B18font-size:12px}

——最新评论中用户名的大小颜色,未被点击

#m_comment div.item a:visited{color:#D77B18}

——最新评论中用户名的大小颜色,已被点击

#m_comment div.item a.cnt{color:#000000font-size:12pxtext-decoration:none}

——最新评论中评论文字的大小颜色,未被点击

#m_comment div.item a.cnt:visited{color:#000000text-decoration:none}

——最新评论中评论文字的大小颜色,已被点击

#m_comment div.item a.cnt:hover{color:#000000text-decoration:underline}

————最新评论中评论文字当鼠标移上去时的颜色

#m_comment div.line{margin-top:5pxline-height:8pxborder-top:1px solid #F4C1B5}

——最新评论中各评论之间的分割线的相关设置