2014年辛星web前端教程贺岁版第二本即css教程

5星(超过95%的资源)
所需积分/C币:9 2014-10-21 17:43:04 3.95MB PDF
29
收藏 收藏
举报

这是2014年辛星web前端教程第二本,希望对您有所帮助。
日录 第一节:CSS简介 第二节:选择器…… 10 第三节:继承、层叠 25 第四节:文字样式 28 第五节:盒模型… n42 第六节:标准流………… ····章 53 第七节:浮动 60 第八节:定位 73 第九节:布局初体验 ∴83 第十节:应用图片… 91 十一节:杂项知识(调色、注释)…....….………9 附录:意见反馈 103 ;;;;;;;;六;六;;;;;;κκκ;κ;;;;;;;κ;κ;;}κ冫;冫;κ;κ;;;;;;;;;次;κ冫;冫 3/104 第一节:CSS简介 >>>>>>>C5历史<<<<<<<<<<<<<<<<<<<<<<< 1.所谓CSs也就是 Cascading Style$het的缩写,即层叠式样式表, 也可以被称为级联样式表,它是用于指定html的样式。 2.在1996年12月17日,CSS的1.0版本发布。 3在1998年5月12日,CSS的2.0版本发布。 4.在2001年5月23日,CSS的3.0版本发布。 5.在2007年7月19日,CSs的2.1版本发布。 6.目前还在用的技术就是CSs的两个版本为2.1和3.0,不过由于 3.0的完善工作还在迸行,虽然它离最初的发布已经有13年之久。 >>>>>>>>>>>CSS的优势<<<<<<<<<<<<<<<<< 1.如果没有CS,那么我们会把网页的格式直接写到htm中去,这 样会造成源代码难以阅读和修改,如果我们想给网页换一个样式 就更麻烦了。 2.于是,把网页内容与其表现形式相分离的思想就出现了,CSS就是 这样一门技术。 3.我们的CSS能对网页中的对象提供精确的控制,支持几乎所有的 字体字号样式,还可以编辑网页对象和模型样式,并且具有较强的 交互设计。 4.而且CS的可读性也很强,而且易学易用。 >>>>>>>>CSS快速入门<<<<<<<<<<<<<<<<<<<< 1.对于cSs的入门,并不比hm难,也是一句话入门 2.我们看一下〔Ss的语法吧: 选择器{声明1;声明2;……声明n} 3.这里的声明都是使用”属性:值”的形式,而且多个声明之间使用逗 号分隔。 4.下面我们就来看一个实倒吧。 4/104 >>>>>>>第一个实例<<<<<<<<<<<<<<<<<<<<< 1.我们先写一个htm文件,代码如下: 1 html> 2 <head> 3 <style type=text/css"> 4 picolor: green; text-align: center] 5 </style> 6 /head> 7 <body> <P>辛星CSs,传播知识,传递温情</P> 9 </body> 1</htm1> 2.那么我们在第3行是用<Stle>标签使用内嵌的方式写入了CS5代 码,而第4行则是样式的内容,乞把p标签的颜色设置为绿色,而 且把文本格式设置为居中。 3那么我们看一下效果吧: , html e>C D file: ///D: /Users/Administrator/Desktop/my. html 辛星CS,传播知识,传递温情 4.我们可以看到,这里的文字内容变成了绿色,而且居中显示。 5.从上面的例子中,我们也看出来(Ss的语法很简洁。 >>>>>>>>>>>开发工具<<<<<<<<<<<<<<<<<< 1.和开发html一样,我们的开发工具依然只需要两个:①文本编辑 景②浏览器。 2.而我这里的文本编辑器依旧使用的是 Sublime text2,而浏览器使 用的依然是谷歌浏览器。 3.包括我们之后写 Javascript教程的肘候,也会一直使用 Sublime Text2,仅仅是因为宅比较帅气 5/104 >>>>>>>>使用CSs的方式<<<<<<<<<<<<<<<<< 1.上面我们使用嵌入式的方式直接在html文件中写入了∝S代码, 那么总共有多少种方式可以导入CS呢? 2.答案是四种,下面我们分别来介绍一下吧。 >>>>>>>>第一种==行内式<<<<<<<<<<<<<<<< 1.第一种就是行内式,也就是在标签的stye属性中直接使用αss代 ,我们给出如下htm代码范例 1 < html> body <p style="color: orange;text-align: center 辛星CSS,传播知识,传递温情 /p> 6 </body> </htmi> 2.那么宅的效果如下 1 my. html CC file: //D: /Users/Administrator/Desktop/my. html 辛星Css、传播知识,传递温情 3.可以看出这样虽然也能够正确的使用CSs的语法,但是却无法发挥 出〔Ss的优势,因为Ss代码还是凌乱的分布在htm的各处,不便 于统一答理 4.因此,这种格式我们不建议大家使用 >>>>>>>>第二种====嵌入式<<<<<<<<<<<<<<< 第二种方式也就是嵌入式啦,也就是第一个范例我给大家演示的。 2.我们通常在<head>标签中添加一个<Stγe>标签,我们在< style> 标签中书写(代码即可。 6/104 3.它比第一种方式有优点,可以把(55代码拿出来统一管理,但是它 仍然和html文件是混杂在一起的 4.如果一个站点的htm文件很多,那么CS文件也就很难统一答理, 而想换一套主題也很难。 >>>>>>第三种===链接式<<<<<<<<<<<<<<<<<<< 1.第三种方式就是链接式,它是在一个<link>标签中把CS5文件导入 进来 2.我们先看一个例子,我们首先写一个文件,命名为myC,然后 写入如下代码: my. html 1p{ color: bluej 3 text-align: cent 3.然后我们在同级目录下新建一个 my. html文件,写入如下代码: ny(55 1 < html 2 head> 3 <link rel="stylesheet"type='text/css" href="my css"> 4 </head 5<body> 辛星CSs,传播知识,传递温情 8< 9</boy〉 10 < /html> 4.我们看到,这里的<link>标签中的rel被指定为“ stylesheet”也 就是样式表,而type則是加载的类型,而href则是说明了要导入的 文件的路径。 5.那么该网页的效果图如下: 7/104 fry.raIl -C L file: ///D: /Users/Administrator/Desktop/my. html 辛星CS3,传播知识,传递温情 6.可以看到,这种方式还是蛮优豸的,每一个<link>标签导入一个 CSS文件。 7.我们要导入多个¢5文件的肘候,直接使用多个<link>标签就可 以了 >>>>>>第四种====导入式<<<<<<<<<<<<<<<<< 1.第四种就是导入式,乞之所以被命名为导入式,很大程度上依赖 于它的 Import这个单词。 2.我们还是使用刚才的my.C文件,但是我们的htm文件的代码修 改为如下形式: my. html my css 1 <html> 2 head> 3 <style type=text/css"> 4 @import my css"; </style> 6 </head> 7 body> 8 p> 辛星CSs,传播知识,传递温情 10 </p> 11 </body> 12</htm1> 3.这里大家需要注意的就是第3到第5行代码,也就是乞在< style> 标签中进行定义,而且它使用@ improt"cs文件地址;的格式。 4.效果和上一个是一样的,就不给大家截图畏示了。 8/104 >>>>对上面四种方式的总结<<<<<<<<<<<<<<<<< 1.首先对上面四种方式做一个总结吧,看下面表格: 种类 评价 结论 行内式C语句和htm语句难以分离不建议用 嵌入式Cs文件和hm文件难以分离不建议用 链接式CSS文件分寓出来 建议使用 导入式cs文件分离出来 不建议用 2.可能新手朋友们对链接式和导入式有点迷茫,它们的区别之一就 是浏览器的加载方式,对于链接式,显示的网页一开始就是带有样 式的,而对于导入式,会首先显示网页内容,然后再去渲染样式。 3.而导入式的一个优点就是可以直接导入一个CSs文件,然后在这个 CSs文件中在导入其他的CS5文件。 4.不过根据我的经验,我不建议大家使用导入式,直接使用链接式 即可 >>>>>>>>>>>>小结<<<<<<<<<<<<<<<<<<<<< 1.这一小节我们只是简要的介绍了一下Cs的概念以及基础知识。 2.我们知迫了〔Ss的导入方式,在之后的学习中我们都会使用链接式 的方式耒导入CSs代码 3.而我们之后的学习中,本着简化的原则,我们就不写<! DOCTYPE> 文档声明了,这一点读者朋友们理解即可。 4.由于C5s中会有大量的属性,其中比较常用的我都会以表格的形式 给出,对于不常用的,请大家自行查阅手册。 9/104 第三节:选择器 >>>>>>回忆CSs语法<<<<<<<<<<<<<<<<<<<<<< 1.我们再回忆一下(s的语法吧,也就是那句: 选择器{声明1;声明2;…明N} 2.也就是说,这个语勺分为两部分,第一部分指明了给谁的样式, 而大括号中的部分则说明了使用什么样的样式。 3.因此,我们需要了解一下〔Ss中的各种选择器,其中选择器的用法 还是非常灵活的,我们逐一来认识 >>>>>>>id选择器<<<<<<<<<<<<<<<<<<<<<< 1.要说i迭择器,就必须说一下id这个属性。在html的元素中, 每个元素都可以设置一个属性,那就是id,它的作用就是唯一的标 识了这个标签。 2.其中id的取名还是很自由的,通常来说建议使用全部小写的英文 字母,可以带有下划线和数字 3.我们在〔Ss中就可以使用弁号加id名的格式来作为选择器。 4.我们看一个例子吧,首先我们在 my. htm中写入如下内容 1 html 2<head〉 Klink rel="stylesheet type="text/css" href="mycss"> 4<head> 5 < body 6(pid=xin">辛星CSs,传播知识,传递温情</p> 7(pid="star")我是宅男,你是吗/p> 8(p)我就想知道,谁能比我更宅{> 9 </body> 10</htm1> 5我们在这个html文件中定义了三个p元素,并且前两个都指定了 相应的i属性,而最后一个则没有指定。 0/104

...展开详情
试读 104P 2014年辛星web前端教程贺岁版第二本即css教程
立即下载 身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
Henry_Wolf 刚准备HTML前端呢,这简直就是及时春雨,感谢分享!
2018-07-16
回复
苍首 刚准备HTML前端呢,这简直就是及时春雨,感谢分享! .
2015-08-04
回复
DoverMine 刚准备HTML前端呢,这简直就是及时春雨,感谢分享!
2014-11-10
回复
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
关注 私信
上传资源赚钱or赚积分
最新推荐
2014年辛星web前端教程贺岁版第二本即css教程 9积分/C币 立即下载
1/104
2014年辛星web前端教程贺岁版第二本即css教程第1页
2014年辛星web前端教程贺岁版第二本即css教程第2页
2014年辛星web前端教程贺岁版第二本即css教程第3页
2014年辛星web前端教程贺岁版第二本即css教程第4页
2014年辛星web前端教程贺岁版第二本即css教程第5页
2014年辛星web前端教程贺岁版第二本即css教程第6页
2014年辛星web前端教程贺岁版第二本即css教程第7页
2014年辛星web前端教程贺岁版第二本即css教程第8页
2014年辛星web前端教程贺岁版第二本即css教程第9页
2014年辛星web前端教程贺岁版第二本即css教程第10页
2014年辛星web前端教程贺岁版第二本即css教程第11页
2014年辛星web前端教程贺岁版第二本即css教程第12页
2014年辛星web前端教程贺岁版第二本即css教程第13页
2014年辛星web前端教程贺岁版第二本即css教程第14页
2014年辛星web前端教程贺岁版第二本即css教程第15页
2014年辛星web前端教程贺岁版第二本即css教程第16页
2014年辛星web前端教程贺岁版第二本即css教程第17页
2014年辛星web前端教程贺岁版第二本即css教程第18页
2014年辛星web前端教程贺岁版第二本即css教程第19页
2014年辛星web前端教程贺岁版第二本即css教程第20页

试读结束, 可继续阅读

9积分/C币 立即下载