css教程 从入门到精通.docx
- 文档编号:4604385
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:149
- 大小:249.45KB
css教程 从入门到精通.docx
《css教程 从入门到精通.docx》由会员分享,可在线阅读,更多相关《css教程 从入门到精通.docx(149页珍藏版)》请在冰豆网上搜索。
css教程从入门到精通
当前位置:
远程教育网首页->电脑培训->CSS教程
CSS教程
→CSS快速入门
→怎样编写CSS
→CSS属性
→CSS定位
→CSS滤镜
CSS快速入门
CSS是CascadingStyleSheets(层叠样式表单)的简称。
更多的人把它称作样式表。
顾名思义,它是一种设计网页样式的工具。
借助CSS的强大功能,网页将在您丰富的想象力下千变万化。
图1 图2
看到上面的两幅图片,您可能会认为这是用photoshop或者是其他图形处理软件制作的吧。
可是上面的例子却完全是用CSS编写的。
我们来看一下它的源代码(不要以为讲代码您会搞不懂,很简单的^_^):
//*样式定义结束*//
其中
行书体;font-size: 18pt”> //”>未访问的链接 //*加链接,显示三种不同状态,并且定义了链接文本的字体和大小*// //”>访问过的链接 //”>鼠标激活的链接 您如果想看上述代码的效果,请点击这里。 我们从例子中看到没有访问过的链接以绿色显示,并且去掉了下划线;而访问过的链接以红色且没有下划线显示;另外,当鼠标激活链接时,链接以蓝色显示,并且加上了上划线。 这种效果是怎么实现的呢? 它除了运用了文本属性中的text-decoration属性,而且采用了伪类元素。 通过上面的代码注释,相信您应该对伪类元素有一个大概认识。 实际上我们用到的这种伪类应当称之为“锚伪类”,它规定了链接不同状态下的效果。 怎么样,是不是很简单的就可以实现动态链接的效果,赶紧自己动手试一试吧! 下一节我将向您介绍“容器”属性。 上一节 下一节 当前位置: 远程教育网首页->电脑培训->CSS教程 CSS教程 →CSS快速入门 →怎样编写CSS →CSS属性 1.字体属性 2.颜色和背景属性 3.文本属性 4.“容器”属性 ※边距属性 ※填充距属性 ※边框属性 ※图文混排 5.分级属性 6.鼠标属性 →CSS定位 →CSS滤镜 已有0条发言 三、CSS属性 4、“容器”属性 ※边距属性 听起来是不是很有趣,什么叫“容器”属性呢? CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。 您想,网页中的内容肯定是都需要“装”进这个“容器”里。 “容器”属性是CSS中非常重要的一种属性,我们将分类进行学习。 先来看一下边距属性的详细列表: 和font属性一样,表中的四个属性可以用一个属性一次。 边距顺序是上、右、下、左。 我们还是用定义边距属性前后的两个例子来看一下吧。 请看下面的这幅图: 我们看到上图是没有加上边距属性的效果,而下图则在
body{margin:
1em2em3em4em}
//*定义文本的上、右、下、左的边距分别为1、2、3、4em*//
产生的效果如下图所示:
定义了边距后的页面,无论您怎么改变窗口的大小,它都会按照您定义好的边距样式显示。
如果在margin里有缺失的属性,则按照顺序依次排列。
比如:
body{margin:
1em3em}上面这段代码的含义是:
body的上、右边距为1、3em。
下一节我将向您介绍填充距属性。
上一节 下一节
当前位置:
远程教育网首页->电脑培训->CSS教程
CSS教程
→CSS快速入门
→怎样编写CSS
→CSS属性
1.字体属性
2.颜色和背景属性
3.文本属性
4.“容器”属性
※边距属性
※填充距属性
※边框属性
※图文混排
5.分级属性
6.鼠标属性
→CSS定位
→CSS滤镜
三、CSS属性
※填充距属性
本节我将向您介绍填充距属性。
我们先来看一下填充距的属性列表:
首先我们
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css教程 从入门到精通 css 教程 入门 精通