CSS入门操作.docx

上传人:b****2 文档编号:24396786 上传时间:2023-05-27 格式:DOCX 页数:48 大小:226.88KB
下载 相关 举报
CSS入门操作.docx_第1页
第1页 / 共48页
CSS入门操作.docx_第2页
第2页 / 共48页
CSS入门操作.docx_第3页
第3页 / 共48页
CSS入门操作.docx_第4页
第4页 / 共48页
CSS入门操作.docx_第5页
第5页 / 共48页
点击查看更多>>
下载资源
资源描述

CSS入门操作.docx

《CSS入门操作.docx》由会员分享,可在线阅读,更多相关《CSS入门操作.docx(48页珍藏版)》请在冰豆网上搜索。

CSS入门操作.docx

CSS入门操作

CSS快速入门

CSS是CascadingStyleSheets(层叠样式表单)的简称。

更多的人把它称作样式表。

顾名思义,它是一种设计网页样式的工具。

借助CSS的强大功能,网页将在您丰富的想象力下千变万化。

             

图一图二

看到上面的两幅图片,有人可能会认为这是用photoshop或者是其他图形处理软件制作的。

可是上面的例子却完全是用CSS编写的。

我们来看一下它的源代码:

  

   

    cssword

     //*样式定义结束*//

  

  

  

//*以下的区域内采用中

  其中

  

  

  

行书体;font-size:

18pt”>

  

//”>未访问的链接

  //*加链接,显示三种不同状态,并且定义了链接文本的字体和大小*//

  

//”>访问过的链接

  

//”>鼠标激活的链接

  

  

  把上述代码写入到网页中,查想效果。

  从例子中看到没有访问过的链接以绿色显示,并且去掉了下划线;而访问过的链接以红色且没有下划线显示;另外,当鼠标激活链接时,链接以蓝色显示,并且加上了上划线。

这种效果是怎么实现的?

它除了运用了文本属性中的text-decoration属性,而且采用了伪类元素。

  通过上面的代码注释,相信您应该对伪类元素有一个大概认识。

实际上我们用到的这种伪类应当称之为“锚伪类”,它规定了链接不同状态下的效果。

是不是很简单的就可以实现动态链接的效果,赶紧动手试一试!

4、“容器”属性

  ※边距属性

  什么叫“容器”属性?

CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。

  网页中的内容肯定是都需要“装”进这个“容器”里。

“容器”属性是CSS中非常重要的一种属性,后面将分类进行介绍。

  先来看一下边距属性的详细列表:

  和font属性一样,表中的四个属性可以一次用一个属性。

边距顺序是上、右、下、左。

我们还是用定义边距属性前后的两个例子来看一下。

看下面的这幅图:

  我们看到上图是没有加上边距属性的效果,而下图则在中加入了如下代码:

  body{margin:

1em2em3em4em}

  //*定义文本的上、右、下、左的边距分别为1、2、3、4em*//

  产生的效果如下图所示:

  定义了边距后的页面,无论怎么改变窗口的大小,它都会按照你定义好的边距样式显示。

  如果在margin里有缺失的属性,则按照顺序依次排列。

比如:

  body{margin:

1em3em}上面这段代码的含义是:

body的上、右边距为1、3em。

  ※填充距属性

  先看一下填充距的属性列表:

  首先我们得先了解什么叫填充距,它与边距有什么差别?

填充距指的是文本边框与文本之间的距离。

  由于填充距属性与margin一样,都有一个一次定义的属性:

padding,所以我们举个例子,看一下到底什么叫填充距,看下图:

  我们看到上图中红框圈住的地方就是填充距起作用的部分。

实际上上图的效果只是在上一节例子的中把下面这段代码加入到Body定义的margin后面:

  padding:

1em2em3em4em

  从上可以看出,红框标记外的部分属于margin属性在起作用。

  ※边框属性

  先看一下属性列表:

 看上去很多,其实应用起来很方便。

  只要灵活的运用一次定义的属性就会方便很多。

其实还有一个一次设置所有边框的宽度、样式和颜色属性的border属性,但是border只能使四条边框的属性值是一样的。

我们现在来给前面的例子设置一个5像素宽、双边框并且是紫色的边框(如下图):

  这就是在中定义

的属性,代码如下:

  P{border:

5pxdoublepurple}//*定义了四条边框为一样的值*//

你可以找一段文本自己多尝试一下其他的边框属性,看看还有什么效果。

※图文混排

  我们来看看“容器”属性还有什么其他的属性,请看属性列表:

  上表中的float属性很有意思,看看用它作的一个页面效果(如下图):

  很多人以为在图片那里插入了一个表格才实现这种图文混排的效果的

  其实不是,在这里只是在中定义了一下的float和margin属性,代码如下:

   

   margincss

   

   

   

   

   

17pt”>

     

     我公司是一家以软件开发及销售为主业的高新技术企业。

位于高科技产业

    密集的清华大学东门,拥有近4000平米的独立办公楼,全体员工年轻勤奋而富

    有创造力,极具挑战性和竞争性。

   

   

  怎么样,不用表格也能实现图文混排的效果,并且减少了大量的代码。

  充分利用CSS的“容器”属性,将会使页面布局更加合理,样式更加漂亮。

5、分级属性

  如果使用过Word,那你一定知道Word中有一个“项目符号和编号”的功能。

  在html中,无需使用前面提到的一些字体、颜色、容器属性来对字体、颜色和边距、填充距等进行初始化。

因为在CSS中,已经提供了进行分级的专用分级属性。

  分级属性包括了“list-style”(列表样式)、“list-item”(列表项)等多种属性,先来看一下分级属性的详细列表:

  下面我们来看一个分级属性的例子,代码如下所示:

  

  

  fenjicss

  //*定义CSS*//

  

--

  p{display:

block;white-space:

normal}

  //*定义显示属性为“block”,意思是在新的区域里显示;white-space的属性

   normal使多重空白合成为一个*//

  em{display:

inline}

  //*定义EM的显示属性为“inline”目的是为了其控制下的文本显示中不折行*//

  li{display:

list-item;list-style:

square}

  //*定义li的显示属性为“list-item”,显示在列表项中加入一个符号标记,而

  list-style属性值定义为square使列表项前的标记为方块*//

  img{display:

block}//*定义图片属性为block使图片在新的位置打开*//

  -->

  

  

  

  

sampletextsampletextsample

  textsampletextsample

//*定义一段文本*//

   

    //*定义列表项*//
  • list-item1
  •    

  • list-item2
  • list-item3

  

          alt=“invisible”>

//*定义一幅图片*//

  

  

  上段代码的显示效果如下图:

  我们看到由于定义了

的属性为Block,所以文本、列表、图片都在不同的位置上打开,Inline属性使文本不折行,list-style-type的属性值为square使列表项前的符号为方块;

  如果在上面的代码中做一些改动,则将以另一种效果显示,我们在中把“EM”的display属性值改为block,使其都在新的位置打开;li的“list-styl

展开阅读全文
相关搜索

当前位置:首页 > 工作范文 > 制度规范

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1