前端绩效考核范本

DIV+CSS快速入门主讲：刘金榜智搏网联学习群：114808677网络教程：简介•CSS概述•CSS指层叠样式表(CascadingStyleSheets)•样式定义如何显示HTML元素•样式通常存储在样式表中•外部样式表可以极大提高工作效率万维网联盟（W3C），非营利的标准化联盟1996年12月，发布了CSS1.0规范。1998年5月，发布了CSS2.0规范。目前有两个新版本正在处于工作状态，即CSS2.1版和3.0版第一章CSS简介W3C并没有强制软件厂商的产品必须符合规范，因此目前流行的浏览器都没有完全符合规范，这就给设计师设计网页带来了一些难题。目前最主流的浏览器是：IE6.0、IE7.0、IE8.0、Firefox市场占有率为：99%以这4种浏览器为目标，已经完全可以做出显示非常一致的CSS布局页面。随着技术的发展，各种浏览器都会逐渐在这方面做更多的努力，相信情况会越来越好。第一章CSS简介•什么是DIV+CSS?DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。CSS是CascadingStyleSheets(层叠样式表)的简称。•通俗来说：如果把一个网页比作一栋楼房，div就是楼房的框架结构，一个个的砖头就是一个个的标签元素（如图片，文字），CSS就是水泥和玻璃，把砖瓦合理的跟框架连接在一起。DIV＋CSS其实就是布局的一个方法，就是像盖房子的方法一样。第一章CSS简介•css的优势:1、缩减代码，提高页面浏览速度。2、结构清晰，对搜索引擎更加友好。3、支持各种浏览器，兼容性好。4、简单的修改，缩短改版时间。5、强大的字体控制和排版能力。6、使用CSS可以结构化HTML，提高易用性。„„„„„„„„各种好处！第一章CSS简介•学习CSS，需要什么基础1）对HTML和网页设计有初步的基础2）具有钻研的精神和热情其中第1点的权重占10%第2点的权重点90%第二章CSS基础语法•语法是CSS学习的开始，不要小看它。•因为成也语法，败也语法！•CSS语法由三部分构成：选择器、属性、值例如：p{color:red;}h1{border:1pxsolidred;}第二章CSS基础语法•选择器：通常是你希望定义的HTML元素或标签，•属性：是你希望改变的属性，并且每个属性都有一个值。•属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明。•body{color:blue；}•上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中，body是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。第二章CSS基础语法•选择器的分类•标记选择器•ID选择器•类别选择器•复合选择器–交集选择器–并集选择器•后代选择器第二章CSS基础语法•选择器——标记选择器Html结构中：p标记选择器/pCSS中：p{text-align:center;color:black;}此例中CSS中的p标记即为标记选择器。第二章CSS基础语法•选择器——ID选择器Html结构中：divid=“box”这是ID选择器/divCSS中：#box{text-align:center;color:black;}此例中CSS中的#box即为ID选择器。注意：ID选择器用#第二章CSS基础语法•选择器——类别选择器Html结构中：divclass=“box”这类别选择器/divCSS中：.box{text-align:center;color:black;}此例中CSS中的.box即为类别选择器。注意：类别选择器用“.”第二章CSS基础语法•选择器——复合选择器__并集选择器Html结构中：h1这将是并集选择器/h1h2这将也是并集选择器/h2CSS中：h1,h2{text-align:center;background-color:orange;}此例中CSS中的“h1,h2”即为复合选择器中的并集选择器并集选择器是多个选择器通过逗号连接而成的，并集选择器可以同时声明风格相同的样式。第二章CSS基础语法•选择器——复合选择器__交集选择器Html结构中：pid=“box”这是交集选择器/ppclass=“box”这也是交集选择器/pCSS中：p{backgroud-color:orange;}p#box{color：red;}p.box{color:blue;}此例中CSS中的“p#box”和“p.box”都是复合选择器中的交集选择器。第一个必须是标记选择器，第二个必须是类别选择器或ID选择器，这两个选择器之间不能有空格，必须连续书写。第二章CSS基础语法•选择器——后代选择器Html结构中：divid=“father”这是父元素p这是子元素/p/divCSS中：#father{height:150px;background:orannge;}#fatherp{width:50px;height:50px;background:bule;}此例中CSS中的“#fatherp”为后代选择器。注意：后代选择器的写法：外层的标记写在前面，内层的标记写在后面，之间用空格分隔。此p标记就是#father的后代。第二章CSS基础语法•CSS继承CSS继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。divclass=“father”这是父元素的红色divclass=“son”子元素继承了父元素的红色/div/div若对.son设置为紫色，.son{color:purple;}，则并不会影响父元素的颜色。第二章CSS基础语法•CSS的层叠特性CSS的全名：层叠样式表“层叠”是什么意思？为何这个词如此重要，以至于要出现在它的名称里？在一个结构复杂的页面中，某一个元素有可能会从很多地方获得样式，就完全有可能使代码变得非常混乱。可能出现在“无法找到某一个元素的样式来自于哪条规则”的情况。因此，必须要充分理解CSS中的“层叠”的原理。•那么我们如何解决层叠样式中的“冲突”问题呢？第二章CSS基础语法•CSS的层叠特性（续）•优先级：行内样式ID样式类别样式标记样式注意：千万不要混淆了“层叠”与“继承”，二者完全不同！第二章CSS基础语法•如何创建CSS?•插入样式表的方法有三种：•方法一：外部样式表•当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用link标签链接到样式表。link标签在（文档的）头部：headlinkrel=stylesheettype=text/csshref=mystyle.css//head外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。第二章CSS基础语法•创建CSS方法二：内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用style标签在头部分定义内部样式表，就像这样:headstyletype=text/csshr{color:red;}p{margin-left:20px;}body{background-color:blue;}/style/head第二章CSS基础语法•创建CSS方法三：行内样式•由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。•要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距：pstyle=color:red;margin-left:20px这是行内样式，也称为内联样式/p第二章CSS基础语法•多重样式如何显示出来？•例如，外部样式表拥有针对h3选择器的三个属性：h3{color:red;text-align:left;font-size:8pt;}•而内部样式表拥有针对h3选择器的两个属性：h3{text-align:right;font-size:20pt;}假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：h3{color:red;text-align:right;font-size:20pt;}即颜色属性将被继承于外部样式表，而文字排列（text-align）和字体尺寸（font-size）会被内部样式表中的规则取代。第三章盒子模型•盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。•所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。•一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立盒子的内部结构，二是理解多个盒子之间的相互关系。第三章盒子模型•CSS框模型：包括：边框内边距外边距元素内容第三章盒子模型•在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。•假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素，如图。第三章盒子模型__边框属性（1）属性描述border简写属性。作用是在一个声明中用来设置四个边框的所有属性。border-style设置四个边框的样式，可以设置一到四个样式。border-width设置四个边框的宽度，可以设置一到四个值。border-color设置四个边框的颜色，可以设置一到四个颜色。border-bottom简写属性。作用是在一个声明中用来设置下边框的所有属性。border-bottom-color设置元素的下边框的颜色。border-bottom-style设置元素的下边框的样式。border-bottom-width设置元素的下边框的宽度。温馨提示：推荐使用简写属性，灰色属性不推荐使用。第三章盒子模型__边框属性（2）属性描述border-left简写属性。用于在一个声明中设置左边框的所有属性。border-left-color设置元素的左边框的颜色。border-left-style设置元素的左边框的样式。border-left-width设置元素的左边框的宽度。border-right简写属性。将所有用于右边框的属性设置于一个声明中。border-right-color设置元素的右边框的颜色。border-right-style设置元素的右边框的样式。border-right-width设置元素的右边框的宽度。温馨提示：推荐使用简写属性，灰色属性不推荐使用。第三章盒子模型__边框属性（3）属性描述border-top简写属性。将所有用于上边框的属性设置于一个声明中。border-top-color设置元素的上边框的颜色。border-top-style设置元素的上边框的样式。border-top-width设置元素的上边框的宽度。温馨提示：推荐使用简写属性，灰色属性不推荐使用。第三章盒子模型__边框(border-style)border-style描述none定义无边框。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于border-width的值。groove定义3D凹槽边框。其效果取决于border-color的值。ridge定义3D垄状边框。其效果取决于bord