div+css视频 _生活百科

文章插图
div+css视频【div+css视频】div+css视频旨在帮助网页开发初学者直观的掌握div+css基础知识。
基本介绍中文名：div+css视频
外文名：Cascading Style Sheets
英文的缩写：CSS
效果：动态
中文别名：层叠样式表
作用：将网页的表现形式与结构代码分离
百科名片中文可以翻译成层叠样式表。它的作用是将网页的表现形式与结构代码分离，定义网页的外观（例如字型，颜色等等），也可以和javascript等浏览器端脚本语言合作做出许多。所有的浏览器都支持CSS 。div+css由来起初，一些天才发明了网路，随之研发了出了Html语言，即建立了网页，但最早的网页可不像现在这样，它是相当丑陋的，仅仅有一些简单的定义能让你分辨出哪些是标题哪些是段落内容。随着网路的迅速发展，网页被广泛地套用、浏览，用户的需求也变得多样化，单一丑陋的网站落伍了，人们希望网页做的漂亮些，因此老式Html页面的局限性就暴露了。人们为了使页面更漂亮研究了许多方法，用table排版的方法盛行一时，但它会造成页面代码臃肿的弊端马上就暴露出来。直到CSS出现，它就像救世主一样拯救了网页。css的优点1.大大缩减页面代码，提高页面浏览速度,缩减频宽成本;2.结构清晰，容易被搜寻引擎搜寻到，天生最佳化了seo3.缩短改版时间。只要简单的修改几个CSS档案就可以重新设计一个有成百上千页面的站点。4.强大的字型控制和排版能力。CSS控制字型的能力比糟糕的FONT标籤好多了，有了CSS ，我们不再需要用FONT标籤或者透明的1 px GIF图片来控制标题，改变字型颜色，字型样式等等。5.CSS非常容易编写。你可以象写html代码一样轻鬆地编写CSS 。6.提高易用性。使用CSS可以结构化HTML ，例如：<p>标籤只用来控制段落， heading标籤只用来控制标题， table标籤只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint 。8.更好的控制页面布局。不用多说。9.表现和内容相分离。将设计部分剥离出来放在一个独立样式档案中，你可以减少未来网页无效的可能。10.更方便搜寻引擎的搜寻。用只包含结构化内容的HTML代替嵌套的标籤，搜寻引擎将更有效地搜寻到你的内容，并可能给你一个较高的评价(ranking) 。11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标準语法最好有序的写。12.另外如果你不是javascrput的高手，你可以不必去写ID ，只用class就可以。当客户端程式设计师写完程式，需要调整时候，你可以在利用他的ID进行控制。13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。14.在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻鬆实现，从而更快地下载页面。16.使页面的字型变得更漂亮，更容易编排，使页面真正赏心悦目。17.你可以轻鬆地控制页面的布局。18.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS档案进行控制，只要修改这个CSS档案中相应的行，那幺整个站点的所有页面都会随之发生变动。css的不足之处浏览器支持的不一致性浏览器的漏洞或缺乏支持的CSS功能，导致不同的浏览器显示出不同的CSS版面编排。例如在微软Internet Explorer6.0的旧版本，执行了许多自己的CSS2.0属性，曲解了很多重要的属性，例如：width ， height ，和float 。许多所谓的CSS人员，必须在最热门的或常用的浏览器中达到一致的版面编排。在不同的浏览器中，要达到像素精準的版面编排，有时候是不可能的。CSS没有父层选择器 CSS选择器无法提供元素的父层或继承性，以符合某种程度上的标準。先进的选择器（例如 XPath）有助于複杂的样式设计。然而，浏览器的性能和增加彩现的问题关係着父层选择器，却是CSS的工作群组拒绝建议的主要原因。不能明确地指定继承性样式的继承性，建立在浏览器中DOM元素的层级和具体的规则上。垂直控制的局限元素的水平放置普遍地易于控制，垂直控制则非凭直觉性的、较迂迴的甚至是不可能的。简单来说，例如：垂直地围绕一个元素、页尾的放置不能高于可见视窗（viewport ，视窗或萤幕的可见範围）的底部範围、需要複杂而非凭直觉性的样式规则，或是简单但不被广泛支持的规则。显示的缺乏目前的CSS没有办法明确又简单的显示属性值（例如：margin-left: 10% - 3em +4px;）。这在很多情况下都是非常有用的，例如：总栏位中计算栏位的尺寸限制。无论如何， CSS WG发表了CSS局限性的草案，而InternetExplorer 5 以后的版本支持相似功能的语法显示。缺乏正交性同样的效果可以用不同的属性来完成，这经常会造成困扰。例如position、display与float定义了不同的配置方式，而且不能有效的交替使用。一个display: table-cell元素不能指定 float或是position: relative ，因为指定float:left的元素不应该受到display效果的影响。再者，没有考虑到新建立属性所造成的影响，例如在表格中你应该使用border-spacing而不是margin-*来指定表格元素。这是因为依照CSS準则，表格内部元素是没有边界（margin）的。设计师经验一、用class_name方式写类名。以前喜欢用class-name写，不过好像两样也没什幺差别。但我比较反对用className写类名，因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式，理由见下一条。二、样式都用class而不用id 。有三个理由，一， id不可以重複，所以用class的话，可以肆无忌惮的用无数次。二， id的优先权太高，若是写了一个#page_content a {color:#f60} ，那你完蛋了，里面要改连结颜色，都必须加上#page_content才能越过这个优先权。三， id专门留给JS用，这样才符合表现与行为分离的原则。所以id我用驼峰式，也是为了体现这一点。三、margin和padding ，儘量省略最后一个值。比如margin: 20px 10px 5px 10px; ，左右值是一样的，就应该省略掉最后一个值，写成margin: 20px 10px 5px; 这样到时候要改左右间距，改一个就好，免得改漏了。其实这个问题虽然很细小，但是可以看得出对margin四个值省略规则的熟练程度。css要点精髓1.CSS是英文Cascading Style Sheets的缩写，即层叠样式表；2.CSS样式是用来定义HTML元素如何显示的；3.CSS样式一般保存在样式表中；4.CSS样式能解决了Html页面的局限性；5.外部CSS样式表保存在一个CSS档案里；6.外部CSS样式表能让你做网页事半功倍；7.多项样式定义将会层叠成一项；css的学习方法书本学习css的学习和其他的学习一样,都需要特定的方法才能比较快的去掌握它.要想掌握CSS, 首先要学会HTML ，我刚开始是从零开始学习的，花了一个月时间学习HTML ，没有老师，书就是我唯一的老师，也没有上网的条件！一个月过后，我就开始学习CSS ，刚开始看的第一本CSS书是《CSS网页样式设计》看了几天后发现根本看不懂！，之后换了一本《HTML参考大全》，这本书是网页製作师的案头常备之书！之所以更换这本书来学习CSS ，是因为这里面有一部分是CSS ，就成了我的CSS启蒙书。看了几段后，觉得外国人写的教程很有条理，由浅入深，一步一步引领你向前走，让你明白他们在说什幺，而不是象国内的书讲的深浅不一，缺乏条理，好象怕你不知道他很有学问！就象前面所说的那本书《CSS网页样式设计》当时看了，对于初学CSS的我来说，真的不知道它在说什幺！再来谈一下学习过程中的细节，因为一个样式它是不可能脱离HTML页面的， HTML不与样式结合的话, CSS就失去了存在的意义。所以一般书中都会举一个例子，然后让你上机测试效果，这是笔者想让你有对样式表CSS有一个初步的印象，告诉你CSS能做什幺。一个小例子：“麻雀虽小，五脏俱全” ，你可能看不懂每一个语句的真正意思。但是你可以记得例子的模式，以后在实践中不断地用，不断用的过程就是不断记的过程，所以不能恢心，不能总认为自己记忆力不好，但不管你骑的是牛也好，千里马也罢，只要有恆心，一定会到达终点的。阅读一本书，一般来说第一次要先把整个书通读一遍，不理解的也要往下看，在往下看的过程中你也许会找到那个问题的答案。看完后你有一个大概的印象，但一定有很多不明白的地方，没关係，继续往下看。第二遍你就要边看边做学习笔记了，把你认为是重点的部分写上，还有，你觉得有疑问的部分也要记下，带着疑问看下去，如果没有答案，你可以去BBS上发一个贴子，好心人还是很多的，提示一句：“一定要学会如何去问问题！” 这里就不说了。你还要上机去练习书上的例子，最让你困惑的：“一是记不住，二是对概念的理解有误（这一条可能是书译的不好，另外就是你的理解不对）” ，对于第一条你就要树立信心，坚持再坚持下去。当你到达终点时你回发现一切都是顺理成章的事。因为你努力了，努力了就会有回报，有结果。有好多人也看了，但是没有什幺进步，我分析主要有以下几个原因：原因一：压力不够，因为有不少人比如美工学CSS ，因为是看别人学，所以学之，不学就没优势！这样的压力是很小的，学不好还有美工这碗饭。原因二：只是业余学习，这样学还只是玩一玩，因为你不一定非要以这门技术吃饭。原因三：方法不对，有的人只是在看教程，但他不动手去做，我以前就是看的太多，做的太少，所以有了实践你才能把理论的东西揉进去。视频学习随着网际网路的广泛套用，一种新的教学模式应运而生——网上教学。众多的视频教学网站如雨后春笋般诞生。在div+css是网页设计的基础技术，学起来有一定难度，如果能採用视频教学模式，一定能取得更好的学习效果。发展历史从20世纪90年代初，在HTML被发明开始，样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML的成长，为了满足设计师的要求， HTML获得了很多显示功能。随着这些功能的增加，使用外来定义样式的语言越来越没有意义了。1994年哈坤·利提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS 。当时已经有过一些样式表语言的建议了，但CSS是第一个含有"层叠"的主意的。在CSS中，一个档案的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或"层叠"作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议， 1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立， W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底， CSS已经完成。1996年12月CSS要求的第一版本发布。1997年初， W3C内组织了专门管理CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月发布的第二版要求。到2007年为止，第三版还未完备。网页设计发展趋势——css将会得到更多关注这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5 ，但在2011年CSS3+HTML5将会得到更广泛的套用。网页设计师最终会抛弃Flash 。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之。2011年， Flash渐行渐远，魔术师“HTML5”成为舞台的主角：当然，说HTML5代替Flash为时还早。从上面的两幅截图你可以知道Flash和HTML5还是有差距的。因此， 2011年两者会各自保持属于自己的位置。不过2010年以前网页设计师滥用Flash的现象会慢慢减少。现在很少设计师会整个网站都是用Flash设计，他们会在一些可用的地方使用HTML5替代Flash ，使网站变得简单运行更快速。然而，目前HTML5还不能够取代Flash ， Flash的某些效果HTML5暂时还不能够实现。然而最值得人兴奋的是CSS3的套用越来越广，在某些地方甚至超越PS（Adobe表示有鸭梨），因为利用CSS3来实现文字阴影、图片圆角和图片透明实在是easy job 。如果你还不会，是时候去了解CSS3和HTML5 。CSS标籤大全颜色与背景类color 设定文字颜色#rgb#rrggbbrgb(255,255,255)rgb(100%,100%,100%) H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-color 设定背景颜色，格式同上。BODY{background-color:red}BODY{background-color:#f00}BODY{background-color:#ff0000}BODY{background-color:rgb(255,0,0)}BODY{background-color:rgb(100%,0%,0%)}background-image 设定背景图片， url(/imageURL) body{backround-image:url(/back.jpg);}background-repeat 设定背景图片是否重複排列:repeat-x(X轴重複排列);repeat-y(Y轴重複排列);No-repeat(不重複排列) BODY{background-repeat:repeat-x;}BODY{background-repeat:No-repeat;}background-attachment 设定背景图片是否捲动，默认为捲动。scroll(捲动)fixed(不捲动) BODY{background-attachment:fixed;}background-position 设定背景图片或背景颜色开始显示的位置，取值格式：top,buttom,left,right,center(用关键字)70px 10px(用长度值)50% 30%(用百分比) BODY{background-position:right top;}BODY{background-position:50px 10px;}BODY{background-position:20% 50%;}background 定义背景综合属性，不要求顺序，各属性值以空格分开。BODY{background:#ffcc00 url(/bg.jpg) fixed center}字型类font-family 设定字型属性，取值可以是任何字型名称，预设为浏览器内定字型，可以设多个以逗号(,)分开，有空格的英文字型可用单引号或双引号括起来。P{font-family:宋体,楷体,黑体,"Time New Rom";} font-style 设定字型样式：Normal(正常),italic、objlique(斜体) P{font-style:italic;}font-variant 取值：Normal(默认) ， small-caps(如果是中文字型则将字型缩小显示，如果是英文则全部改为较小的大写) H3{font-variant:small-caps;}font-weight 设定字型粗细，取值有：Normal(默认),bold,lighter,border,100,200...900由于浏览器支持程度不同，一般只用normal和bold两种属性。P{font-weight:bold;}font-size 设定字型的大小；绝对大小：xx-small,x-small,small,mediumlarge,x-large,xx-large;相对大小：larger,smaller;数字表示可用单位：磅(pt),像素(px),英寸(in),厘米(cm);亦可用百分比表示。H2{font-size:36pt;}P{font-size:200%;}font 设定字型的综合属性，其顺序如下：{font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;}文字类letter-spacing 设定文字间距。P{letter-spacing:5pt;}text-decoration 设定文字加上下划线、删除线等效果：none(无)underline(下划线)overline(上划线)line-through(删除线)vertical-align 设定文字或图片垂直方向的对齐方式：baseline:默认值 sub:下标 super:上标 top:垂直向上对齐 middle:垂直居中 bottom:垂直向下对齐。text-transform 转换英文字母大小写：none:默认值 capitalize:首字母大写 uppercase:所有英文字母大写 lowercase:所有英文字母小写。text-align 设定文字的水平对齐方式：left:左对齐 right:右对齐 center:水平居中 justify:左右对齐。text-indent 设定标记元素内文字的首行缩进或配合margin-left属性设定首行凸排。line-height 设定行高，声明方式有标準行高、固定值表示法、百分比行高、字型大小比例行高等。列表类list-style-type 有序列表的编号方式（供<OL>标记使用）：none:无编号 decimal:阿拉伯数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字 lower-alpha:小写英文字母 upper-alpha:大写英文字母。list-style-type 无序列表的符号样式（供<UL>使用）：none:无符号 disc:实心圆符号 circle:空心圆符号 square:实心方形符号。list-style-image 无序列表的自定义符号样式：格式：url(图片名称) UL{list-style-imag:url(/dd.gif);}list-style-position 设定列表清单符号缩排属性：outside:凸排 inside:缩排 UL{list-style-imag:url(/dd.gif); list-style-position:outside;}list-style 列表清单项目的综合设定，属性之间用空格隔开。UL{list-style-imag:url(/dd.gif) inside;}边界及其相关类margin 标记元素边界值的综合设定。（其规则见右边範例）亦可以用margin-top、margin-right、margin-bottom、margin-left分开设定各边的边界。声明4个值，其顺序为上、右、下、左边界，如：DIV{margin:12pt 15pt 20pt 16pt;}声明3个值，其顺序为上、右、下，缺少的左边界取其对边（右），如：DIV{margin:12pt 15pt 16pt;}声明2个值，其顺序为上、右，缺少的下、左边界取其对边，如：DIV{margin:12pt 15pt;}声明1个值，则4个边界同一个值，如：DIV{margin:15pt;}padding 设定标记内容与标记框线之间的留白的综合设定（规则见margin属性的範例）。也可分开设定padding-top、padding-right、padding-bottom、padding-left各值。border-width 标记元素框线宽度的综合设定（规则类似于margin属性）。也可分开设定border-top-width、border-right-width、border-bottom-width、border-left-width各值。border-color 标记元素框线颜色的综合设定（规则类似于margin属性）。颜色取值见color属性。也可分开设定border-top-color、border-right-color、border-bottom-color、border-left-color各值。border-style 标记元素框线样式的综合设定（规则类似于margin属性）。框线样式有solid,double,goove,ridge,inset,outset等。也可分开设定border-top-style、border-right-style、border-bottom-style、border-left-style各值。border 标记元素4个框线的综合设定，可以分别声明框线宽度、框线样式、和框线颜色。DIV{border:5pt solid #ff0000;}width 设定标记元素的宽度。height 设定标记元素的高度。float 设定标记元素与文字间的相对位置（文字绕排方式）。取值：none:以默认方式显示；left:标记元素靠左，文字在右边绕排；right:标记元素靠右，文字在左边绕排；clear 设定标记元素与文字间的相对位置（与float不同的是标记元素两边都不绕排）。取值：none:以默认方式显示；left:标记元素靠左，右边无文字绕排；right:标记元素靠右，左边无文字绕排；其他类z-index 设定标记元素的堆叠层次，取值为整数，也可以是负数，数值大的在上层。visibility 设定标记元素是否可见，取值有：inherit:取默认值 visible:可见 hidden:不可见（隐藏）DIV+CSS是现在比较普遍的企业网站建设布局架构。