学习CSS语言

html-css029

学习CSS语言,第1张

css一定要配合哪种网页设计软件一起使用吗?

不是的。

如果不是的话直观的视觉效果怎么能够通过代码预览呢?

要通过浏览器预览,大家的机器上应该都有IE。不过懂CSS的人都知道,一个网页设计出来了,仅仅能在IE里正常显示是远远不够的,还要在FireFox里正常显示。所以说即使是网页编辑软件里有效果预览,老手仍然要使用两个乃至几个浏览器来测试自己网页的效果。

至于CSS怎么入门,你可以看看我的网站。下面是我写的入门教程的第一页,里面已经回答了你几个问题。

什么是CSS?

CSS是CascadingStyleSheets(层叠样式表)的缩写。它的作用是定义网页的外观(例如字体,颜色等等),它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。

谁需要学习CSS?

对于想要使用XHTML制作符合W3C国际Web标准网站的站长,CSS是必须学习的,它几乎是你定义网页外观的唯一工具;而对于那些毫不关心Web标准,坚持使用HTML的站长,CSS对你可能没有那么重要,不过至少它还能减少你的重复劳动——使你能够只更改一个CSS文件就实现整个网站的风格转变,这对维护大量页面的站长来说是十分重要的。而且在样式的定义方面CSS的内力也要比HTML强很多。

学习CSS的基础

学习CSS之前您应该已经了解了HTML或者XHTML。

学习CSS需要什么特殊的软件吗?

不。同学习XHTML一样,在学习CSS的过程中您只需要使用Windows自带的记事本(Notepad.exe)就可以了。在未来实际制作网页的时候您可能需要用到Dreamweaver等专业的网页设计软件,它们将使得为网页添加CSS的工作变得异常简单。但是再次强调,在学习CSS的过程中,您不需要这些强大的软件。本教程只使用记事本,目的在于训练手写CSS代码的能力,也是为了方便那些还没有Dreamweaver之类软件的读者。

参考资料:http://cainiao8.com/web/css.html

我直接给你贴出来吧,毕竟点入了别人的地址不一定能找到你想要的,好就是好,不好就是不好,请看本人写的教程首先声明本人不是CSS高手,所以有些错误是难免的,本攻略以本人现在使用的CSS代码讲解,全方面的涉及到背景图片,播放器,模块透明,设定页面宽度等问题.大家需要明白的,要装扮好自己的空间除了需要熟知百度空间的CSS外,还要有一定的美工基础,毕竟图片是漂亮的关键.还有,对于新手来讲,最好先看一下百度官方的CSS帮助,不知道地址的请点此进入,这样可以让你了解CSS代码所对应的模块.我对自己的代码作了详细注释,很多下问题可以在我的注释里找到,如不懂的请留言给我. 一:背景图片 一般人设计空间一般是把百度空间分成上下两部分,上指的是空间名称,空间简介那部分,下指的是导航栏以下部分,就是文章内容以及其他小模块.对于新手来讲,这是最好的拆分方法.空间名称这一部分一般是装扮空间的前提,如果有精美的图片,只要改下这里的背景就可以让空间焕然一新.修改这里的背景很简单,打开CSS编辑页面,找到#header,在后面插入BACKGROUND: url(图片地址) no-repeat 0px 0px 在这里讲解下背景图片的几个属性:repeat是指定图片是否平铺和以何种方式平铺.有四个属性:repeat : 默认值。背景图像在纵向和横向上平铺 no-repeat : 背景图像不平铺 repeat-x : 背景图像仅在横向上平铺 repeat-y : 背景图像仅在纵向上平铺 后面的两个PX是指定图片左边距和上边距,这是比较重要的,可以调整图片到你喜欢的位置.这里注意下,在空间名称这部分添加背景图片的时候请同时调整这里的高度和TAB里的距顶部距离.高度代码:height,把高度调整为你图片的高度. 示例:现在我要在空间名称部分放一张高度为160的图片,我们就需要修改两个地方: 1:#header{ HEIGHT: 160px BACKGROUND: url(图片地址) no-repeat 8px 0px} 2:#tab{top:160pxleft:0px} 对于上部分的背景图片就讲到这里.下部分和上部分的方法一样,不过插入代码的地方是.stage 找代码可以按CTRL+F搜索. 我们还可以设定下总体背景,把背景图片代码插在BODY里就可以了.还有很重要的一点,百度的模块都是有背景色的,这样的话,我们就算放入背景图片,基本上也被遮住了,这就需要用到背景透明代码:background:transparent在你想设置透明的模块里放入此代码就可以了. 具体代码对应模块请参考百度官方CSS帮助,上面已经有连接了. 二:播放器设置 不多说废话,提供代码一个: #phx{FILTER:Alpha(Opacity=66,FinishOpacity=26,Style=2,StartX=20,StartY=40,FinishX=0,FinishY=0)gray()WIDTH: 209pxHEIGHT:45pxmargin-top:12px} 这个代码可以任意插在CSS任何位置,只要知道width和height是分别改变播放器宽度和高度的就可以任意改变播放器大小了. 三:指定页面宽度 有些人觉得百度空间的页面看起来太宽,想设计的小一点,这其实不难.甚至简单的只需要知道一个宽度代码:width 当然,为了更方便的设置,我们最好再加入一些自己的代码. #layout td.c2t3{padding-right:0pxpadding-top:0pxwidth:250} #layout td.c2t1{padding-left:170pxpadding- top:0pxwidth:600pxborder-right:#930000 0px solid} #layout td.c2t2{width:60px} 可以把这段代码放在.stage后面C2T3是指定页面右边属性,c2t1指定左边属性,c2t2是左和右的间距.(注意:此代码只针对把空间分成两列的) padding:检索或设置对象四边的内补丁,有上下左右 padding-right:在这里不讲专业术语了,为了大家便于了解,可以当作是指定对象距离右边的位置 padding-top:(同上,指定顶部) padding-left:(同上,指定左边) PADDING-BOTTOM:(同上,指底部) 如果你有很好的美工基础,也可以在这里插入相应的背景图片美化空间. 下面我以我的CSS代码作注释.如要使用,请去掉注释内容. 注意:不小心有些文字搞成黑色了,居然修改不回来,如果看不清楚,请用鼠标选取后再看/* 浪儿制作 http://hi.baidu.com/jsqk/ ◎浪儿出手,必是精品◎ All Rights reserved. css by jsqk. *//* green style VER 3.1 */#phx{FILTER:Alpha(Opacity=66,FinishOpacity=26,Style=2,StartX=20,StartY=40,FinishX=0,FinishY=0)gray()WIDTH: 209pxHEIGHT:45pxmargin-top:12px} (播放器代码).f14 {color:#668214}BODY { PADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 12pxPADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-TOP: 0pxFONT-FAMILY: Verdana, Arial, Helvetica, sans-serifcolor:#668214background:url(

)(指定页面总体属性,注意,在这里可以添加鼠标效果.最简单的鼠标效果代码:CURSOR: url('http://xiaobing8155.googlepages.com/Plusnaarrow.cur'))overflow-y:autooverflow-x:hiddenmargin:0padding:0} (这四个代码对于要移动空间导航栏的一定要记得使用,如要把导航栏移动到中间,不使用此代码将使页面变宽,出现横向拉条,影响美观.简单的说下overflow:overflow : visible | auto | hidden | scroll 取值:visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 auto : 在必需时对象内容才会被裁切或显示滚动条 hidden : 不显示超过对象尺寸的内容 scroll : 总是显示滚动条 )#main {BACKGROUND: url(

) no-repeat 8px 0px} (这个是指定空间名称那部分属性的,如添加背景图片之类的.百度默认CSS里没有这个代码,可以自己加入,方便设计空间)#header{ HEIGHT: 380pxmargin-left:10px} (这个是很重要的,如果用#main加空间名称那里的背景图片,千万记得这里的高度要和背景图片的高度一样.margin-left检索或设置对象左边的外补丁.)#header div.tit a.titlink{font-size:0pxcolor:#fffffftext-decoration:none}#header div.tit a.titlink:visited{font-size:0pxcolor:#fffffftext-decoration:none}#header div.desc{top:217pxleft:300pxcolor:#fffffffont-size:12px}#header div.tit{top:197pxleft:300px}#tab{top:14pxleft:-35pxbackground:transparent} (这个代码是空间导航栏位置的,你可以修改TOP和left来移动导航拦位置.)#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:3pxline-height:19pxbackground-color:transparentcolor:#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:transparent}#tab2 span{color:#000000font-size:12pxfont-weight:bold}#tab2 a{font-size:12px}#tab2 a:link{color:#0000CC}#tab2 a:visited{color:#0000CC} 对于这段代码本人没有研究.stagepad {width:600pxmargin-left:55px }.stagepad a:link{text-decoration:nonefont-weight:bold}.stagepad a:visited{text-decoration:nonefont-weight:bold}#layout {width:974pxmargin-left:0pxbackground:url(

) no-repeat bottom -18pxpadding-bottom:50px}(这个是页面下方的背景图片,大家可以看我的空间下方有个页面制作:午夜浪儿的字样,靠的就是这个代码.).stage {background:url(

) no-repeat 0px 10px}(这个代码上面已经有讲解,就是设置导航栏下部分的背景图片的)#layout td.c2t3{padding-right:0pxpadding-top:0pxwidth:250}#layout td.c2t1{padding-left:170pxpadding-top:0pxwidth:600pxborder-right:#930000 0px solid}#layout td.c2t2{width:60px}(此段代码上面已经有详细讲解)#comm_info{color:#fffffffont-family:Arialtext-align:centerpadding-top:19pxTEXT-INDENT:px}#comm_info div.line{margin-top:0pxborder-top:0px solid #5C85BB}#comm_info a{color:#fffffftext-decoration:none}#comm_info a:visited{color:#fffffftext-decoration:none}#page{height:30pxfont-size:12pxfont-family:Arialtext-align:center}#page span{padding:3pxcolor:#1a4a8afont-size:14pxfont-weight:bold}#page a.pc{color:#fffffffont-size:14pxfont-weight:bold}#page a.pc:visited{color:#ffffff}#page a.pi{padding:3pxcolor:#fffffffont-size:14px}#page a.pi:visited{color:#ffffff}.mod{margin-bottom:20px}.modhandle{cursor:move}.modth{height:0px}.modhead{padding:0px 4px 0 4pxpadding-top:pxpadding-bottom:3pxLINE-HEIGHT:17pxborder-bottom:#ffffff1px solidtext-align:center}.modopt{padding:4px 4px 0 0}.modtit{color:#fffffffont-size:14pxfont-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:#FF5100text-decoration:none}.modact{color:#fffffffont-size:12pxtext-align:center}a.modact:link{color:#ffffff}a.modact:visited{color:#ffffff}.modbox{padding:0px 0px 0 0px}.modtl{background:url(

) 0px -1px}.modtc{background:url(

)}.modtr{background:url(

) -2px -1px}.modbl{line-height:1px}.modbc{line-height:1px}.modbr{line-height:1px}(本段代码请参考百度空间官方CSS帮助)#mod_bloglist{padding-top:0px}#m_blog {padding-top:0px}(指定文章内容距离#header部分的距离.)(下面的代码请大家参考百度官方CSS帮助)#m_blog div.cnt a {text-decoration:nonecolor:#344500}#m_blog div.cnt a:visited {text-decoration:nonecolor:#344500}#m_blog div.cnt a:hover {border-bottom:1px #344500 dashedcolor:#344500}#m_blog {padding-left:15pxpadding-right:15pxmargin-top:20px}#m_blog div.tit{padding-top:0pxpadding-bottom:0pxcolor:#4E7304font-size:13pxfont-weight:boldtext-decoration:noneborder-bottom:1px solid #4E7304border-top:0px solid #ffffffTEXT-INDENT: 119pxline-height:17px}#m_blog div.tit a{color:#4E7304font-size:13pxfont-weight:boldtext-decoration:none}#m_blog div.tit a:visited{color:#4E7304text-decoration:none}#m_blog div.date{font-size:13pxmargin:-20px 0 8px 0color:#4E7304TEXT-INDENT: 7pxfont-weight:bold}#m_blog div.cnt{color:##005533line-height:20pxfont-size:15pxfont-weight:700PADDING-RIGHT: 10pxPADDING-LEFT: 10pxPADDING-TOP: 10pxPADDING-bottom: 10px}#m_blog div.more{margin:14px 0 16px 0text-decoration:nonefont-weight:bold}#m_blog div.more a{color:#fffffffont-size:14pxtext-decoration:nonefont-weight:bold}#m_blog div.more a:visited{color:#fffffftext-decoration:nonefont-weight:bold}#m_blog div.opt{color:#689411font-size:12px}#m_blog div.opt a{color:#689411font-size:12pxtext-decoration:none}#m_blog div.opt a:visited{color:#689411text-decoration:none}#m_blog div.line{margin-top:17pxline-height:17px}#m_blog div.none{padding:100px 0 100px 0color:#1a4a8afont-size:14px}#m_pro {text-align:leftpadding-left:18pxpadding-right:10px}#m_pro a{color:#995C00font-weight:boldtext-decoration:nonetext-align:center}#m_pro a:visited{color:#995C00font-weight:boldtext-decoration:none}#m_pro div.image{text-align:centerborder-bottom:#ffffff 1px solidpadding-top:5pxpadding-bottom:5px}#m_pro div.act{margin-top:10px}#m_pro div.user{color:#995C00font-size:12pxfont-weight:bold}#m_pro div.desc{color:#995C00font-size:12px}#m_pro div.line{margin-top:17pxline-height:17pxborder-top:1px solid #1A4A8A}#m_pro td{color:#995C00line-height:24pxfont-size:14px}#m_album div.image{text-align:centerpadding-top:30px}#m_album div.page{color:#995C00font-size:12pxtext-align:center}#m_album div.page a{color:#995C00font-size:12px}#m_album div.page a:visited{color:#330000}#m_links {padding-left:18pxpadding-right:18pxtext-align:leftborder-top:0px solid #995C00text-align:lift}#m_links div.item{color:# 6E981Afont-size:12pxLINE-HEIGHT: 21px}#m_links div.item a{color:#995C00font-size:12pxtext-decoration:none}#m_links div.item a:visited{color:#995C00}#m_links div.linediv.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_artclg {border-top:0px solid #5C85BBpadding-top:5px}#m_artclg {padding-left:18pxpadding-right:18pxtext-align:leftborder-top:0px solid #995C00text-align:lift}#m_artclg div.item{color:#995C00font-size:12pxtext-align:leftpadding-left:0px}#m_artclg div.item a{color:#995C00font-size:12pxtext-decoration:none}#m_artclg div.item a:visited{color:#995C00text-decoration:none}#m_artclg div.linediv.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_comment {padding-left:18pxpadding-right:18pxtext-align:leftborder-top:0px solid #995C00text-align:lift}#m_comment div.item{color:#D2E9F4font-size:12px}#m_comment div.item a{color:#995C00font-size:12px}#m_comment div.item a:visited{color:#995c00text-decoration:none}#m_comment div.item a.cnt{color:#995C00font-size:12px}#m_comment div.item a.cnt:visited{color:#995c00text-decoration:nonefont-weight:normaltext-align:center}#m_comment div.item a.cnt:hover{color:#D2E9F4text-decoration:underlinetext-align:left}#m_comment div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_albumlist div.note{color:#995C00font-size:14px}#m_albumlist div.desc{margin-bottom:12pxpadding:3px 10px 3px 10pxline-height:22pxbackground-color:#F2F2F2font-size:14px}#m_albumlist div.none{padding:100px 0 100px 0color:#995C00font-size:14px}#m_albumlist div.line{margin-top:10pxline-height:16pxborder-top:1px solid #ffffff}#m_albumlist div.tit{margin:6px 0 7px 0color:#995C00font-size:14px}#m_albumlist div.tit a{color:#995C00font-size:14px}#m_albumlist div.tit a:visited{color:#995C00}#m_albumlist span.count{color:#995C00font-size:12pxfont-weight:bold}#m_albumlist span.size{color:#999999font-size:12pxfont-family:Arial}#m_albumlist a.act{color:#995C00font-size:12px}#m_albumlist a.act:visited{color:#995C00}#m_albumlist a.page{color:#330000font-size:14px}#m_albumlist a.page:visited{color:#330000}#m_albumlist td.image{padding:5pxborder:1px solid #999999background:#995C00}#m_friend div.filter{margin-bottom:10pxpadding-left:10pxpadding-top:10pxheight:27pxline-height:27px}#m_friend div.catalog{margin-bottom:10pxpadding-left:10pxheight:27pxline-height:27pxbackground-color:#F2F2F2font-size:14px}#m_friend div.user{margin-top:4pxcolor:#995C00font-size:12px}#m_friend div.user a{color:#995C00font-size:12px}#m_friend div.user a:visited{color:#995C00}#m_friend div.line{margin-top:10pxline-height:16pxborder-top:1px solid #995C00}#m_mylink1 {padding-left:18pxpadding-right:18pxtext-align:leftborder-top:0px solid #995C00text-align:lift}#m_mylink1 div.item{color:#995C00font-size:12px}#m_mylink1 div.item a{color:#995C00font-size:12pxtext-decoration:none}#m_mylink1 div.item a:visited{color:#995C00}#m_mylink1 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_mylink2 {padding-left:18pxpadding-right:18pxtext-align:leftborder-top:0px solid #995C00text-align:lift}#m_mylink2 div.item{color:#995C00font-size:12px}#m_mylink2 div.item a{color:#995C00font-size:12pxtext-decoration:none}#m_mylink2 div.item a:visited{color:#995C00}#m_mylink2 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_mylink3 {padding-left:18pxpadding-right:18pxtext-align:leftborder-top:0px solid #995C00text-align:lift}#m_mylink3 div.item{color:#995C00font-size:12px}#m_mylink3 div.item a{color:#995C00font-size:12pxtext-decoration:none}#m_mylink3 div.item a:visited{color:#995C00}#m_mylink3 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_mylink4 {padding-left:18pxpadding-right:18pxtext-align:leftborder-top:0px solid #995C00text-align:lift}#m_mylink4 div.item{color:#995C00font-size:12px}#m_mylink4 div.item a{color:#995C00font-size:12pxtext-decoration:none}#m_mylink4 div.item a:visited{color:#995C00}#m_mylink4 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_filed {padding-left:18pxpadding-right:18pxtext-align:leftborder-top:0px solid #995C00text-align:lift}#m_filed div.item{color:#995C00font-size:12px}#m_filed div.item a{color:#995C00font-size:12px}#m_filed div.item a:visited{color:#995C00}#m_filed div.line{margin-top:5pxline-height:8pxborder-top:1px solid #D2E9F4}#m_setting a{color:#995C00}#m_setting a:visited{color:#995C00}#m_setting{line-height:22pxcolor:#995C00font-size:14px}#m_setting img.sel{border:4px solid #FFDB7B}#m_setting img.unsel{border:1px solid #D2D2D2}#m_setting span.tit{font-size:14px}#m_setting span.usr{color:#995C00}#m_setting div.sel{padding-top:6pxfont-size:14pxfont-weight:bold}#m_setting div.line{margin-top:20pxline-height:16pxborder-top:1px solid #ffffff}#m_sysinfo a{color:#995C00}#m_sysinfo a:visited{color:#995C00}#m_sysinfo{line-height:22pxcolor:#995C00font-size:14px}#m_sysinfo span.new{color:#FF0000font-size:10pxfont-family:Arial}#m_sysinfo span.date{color:#995C00font-size:14px}#m_setbase{color:#995C00font-size:14px}#m_setbase td{color:#995C00font-size:14px}#m_setbase div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ffffff}{all rights reserved,http://hi.baidu.com/jsqk}#in_comment div.tit{margin-bottom:12pxcolor:#995C00font-size:14pxfont-weight:bold}#in_comment div.user{margin-bottom:6pxcolor:#995C00font-size:12px}#in_comment div.user a{color:#995C00font-size:12px}#in_comment div.user a:visited{color:#995C00}#in_comment div.user span.date{color:#995C00font-size:12px}#in_comment div.desc{color:#995C00font-size:12px}#in_comment div.line{margin-top:17pxline-height:17pxborder-top:1px solid #995C00}#in_send div.tit{margin:10px 0 10px 0color:#995C00font-size:14pxfont-weight:bold}/* 请不要随意修改版权,尊重别人的劳动成果.如有需要,请和浪儿本人联系 */

css语法由哪几部分组成?

CSS语法由三部分构成,分别:选择器、属性和值。【相关教程推荐:css视频教程】

selector {property: value}

选择器 (selector) 通常是你希望定义的 HTML 元素或标签,属性 (property) 是你希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration):

body {color: blue}

上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中,body 是选择器,而包括在花括号内的的部分是声明。声明依次由两部分构成:属性和值,color 为属性,blue 为值。

值的不同写法和单位

除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:

p { color: #ff0000}

为了节约字节,我们可以使用 CSS 的缩写形式:

p { color: #f00}

我们还可以通过两种方法使用 RGB 值:

p { color: rgb(255,0,0)}

p { color: rgb(100%,0%,0%)}

请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。

记得写引号

提示:如果值为若干单词,则要给值加引号:

p {font-family: "sans serif"}

多重声明:

提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:

p {text-align:centercolor:red}

你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:

p {

text-align: center

color: black

font-family: arial

}

空格和大小写敏感

大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

body {

color: #000

background: #fff

margin: 0

padding: 0

font-family: Georgia, Palatino, serif

}

是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

CSS高级语法:选择器的分组

你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。

用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。