CSS入门教学十四个问与答

猫妖妙妙0

猫妖妙妙0

2016-02-19 20:25

有了下面这个CSS入门教学十四个问与答教程,不懂CSS入门教学十四个问与答的也能装懂了,赶紧get起来装逼一下吧!

  CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一点,没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是Netscape Navigator在网上冲浪,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,为什么同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB,CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信提问的问题整理出来,供诸位参考。

  1、CSS在网页制作中一般有三种方式的用法,那么具体在使用时该采用哪种用法?

  当有多个网页要用到的CSS,采用外连CSS文件的方式,这样网页的代码大大减少,修改起来非常方便;只在单个网页中使用的CSS,采用文档头部方式;只有在一个网页一、两个地方才用到的CSS,采用行内插入方式。

  2、CSS的三种用法在一个网页中要以混用吗?

  三种用法可以混用,且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因,浏览器在显示网页时是这样处理的:先检查有没有行内插入式CSS,有就执行了,针对本句的其它CSS就不去管它了;其次检查头部方式的CSS,有就执行了;在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出,三种CSS的执行优先级是:行内插入式、头部方式、外连文件方式。

  3、在Dreamweaver3中如何使外部文件式CSS?

  在Dreamweaver3中使用外连文件式CSS并没有特殊要求,同样是用记事本创建一个*.css文件,在网页的与之间加上一句这样的代码: 就行了。

  4、如何用Dreamweaver3快速创建CSS外连式文件?

  对于一个初接触CSS的网页设计人员来讲,要用记事之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于Dreamweaver3对CSS支持的很好,用它来帮助就轻松多了。具体可以这样操作:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  1)先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver3的编辑窗中调出CSS面板,一个一个地定义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;

  2)全部定义好后,再用记事本创建一个空的CSS外连式文件,把在与之间的那段定义好的CSS复制到CSS文件中去,就大功告成了。整个过程就是点鼠标,方便吧?

  5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗?

  不用!先用CSS面板定义好要用的CSS,然后,在要插入CSS的标记插入:style="",再把你刚才定义的CSS从后面拖到这个双引号中来,把花括号以外的部分删去就行了。

  6、在方档头部方式和外连文件方式的CSS中都有“”,好象没什么用,不要可以吗?这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS,它将忽略其中的内容。虽然现在使用不支持CSS浏览器的人已很少了,由于互联网上几乎什么可能都会发生,所以还是留着为妙。

  7、如何给一部分文字加背景色?

  给文字加上不同颜色,在DW3中只要在属性面板上选取文字的颜色就行了,非常方便,但要给部分文字加不同的背景色却没有相应的功能,我们可以先做一个定义背景色的CSS(如:bgstyle),在DW3中点几下鼠就完成了。如一个定义淡黄色

  背景的CSS是这样的:

  在要用时选取那段文字,再在CSS面板上点一下“bgstyle”就行了。

  8、如何给部分文字加背景图像?

  与加背景色操作类似,中是在背景在选择加载图象就是了,一个定义好的加背景图象的CSS例子的代码是这样的: 在要用时选取那段文字,再在CSS面板上点一下“imgbgstyle”就行了。

  9、如何使页面的背景在文字“滚动”时背景图案静止不动?

  要使背景图案不随文字“滚动”的CSS是这样的:

  10、如何定义字间距?

  在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就是字间距,它指的是每一个字符之间的额外间距,经长度为单位,正负值均可,当取负值时产生字符挤在一起的效果。

  11、如何给文字加上划线、下划线、删除线和闪烁?

  在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些内容,要注意的是闪烁属性有些版本的浏览器不支持,少用为好。下面是一个定义好上述效果的CSS例子:

style type="text/css"
!--
.style1 { text-decoration: underline overline line-through blink}
--
/style 

  其中: “underline”是定义下划线;“overline ”是定义上划线;“ line-through”定义的是删除线;“blink”

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  定义的是文字闪烁。

  12、如何使网页具有“首行缩进”功能?

  由于DW3输入空格不方便,利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”,所谓“首行”是指每段内容的第一行,也就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉字,设置好的CSS如下所示:

style type="text/css"
!--
.style1 { text-indent: 2em}
--
/style

  在DW3要注意:在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“text-indent”右面的缩进单位选择框中“ems”指的就是“em”。

  13、在用表格进行排版时,能使某一方向上的内容离开表格线一点吗?

  可以!在DW3中CSS的属性定义对话框(style Definition for .style1)的“Box”上的“margin”定义的就是内容离开边缘的距离,分别可定义四个方向:“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例子代码:

style type="text/css"
!--
.style1 { margin: 0px 0px 0px 10px}
--
/style

  14、能给某部分内容加边框吗?

  用CSS可以给某部分内容加边框,在DW3中CSS的属性定义对话框(style Definition for .style1)的“Border”定义

  的就是边框线,“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色,这些定义好后不要忘记在下面的

  “style”中定义线型,否则将看不边框线,因为默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框

  为:绿色中粗线的CSS例子:

style type="text/css"
!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--

/style

展开更多 50%)
分享

猜你喜欢

CSS入门教学十四个问与答

Web开发
CSS入门教学十四个问与答

CSS运用的二十四个技巧

Web开发
CSS运用的二十四个技巧

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

十四个牛奶的生活妙招

生活常识
十四个牛奶的生活妙招

人类十四个遗传现象大揭秘

孕妇
人类十四个遗传现象大揭秘

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

十四个致癌因素 吸烟的危害最大

男人养生
十四个致癌因素 吸烟的危害最大

女人的十四个排毒养颜妙方

女人
女人的十四个排毒养颜妙方

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

五款精品U盘装机工具推荐

五款精品U盘装机工具推荐

对JAVA的多线程浅析

对JAVA的多线程浅析
下拉加载更多内容 ↓