编程开发论坛 - Powered by Discuz! Board

标题: CSS基础教程（企业内部培训） [打印本页]

作者: qingqing3721 时间: 2011-11-2 10:23 标题: CSS基础教程（企业内部培训）

这是上周为公司内部培训的CSS资料，希望对初学者有所协助。CSS 是 Cascading Style Sheet 的缩写。译作「层叠款式表单」。是用于(增强)控制网页款式并允许将款式信息与网页内容别离的一种标忘性言语。一、如何把款式参加到你的网页。1、链接外部款式。headtitle文档标题/titlelink rel=stylesheet href="dhtmlet/dhtmlet.css" type="text/css"/head特点：格式与代码别离。2、定义内部款式块对象。htmlheadtitle文档标题/titlestyle type="text/css"!–body {font: 10px "Arial"}h1 {font: 15px/17px "Arial"; font-weight: bold; color: maroon}h2 {font: 13px/15px "Arial"; font-weight: bold; color: blue}p {font: 10px/12px "Arial"; color: black}–/style/headbody 特点：页面内部运用，方便，下载流量会适当增加。3、内联定义。p style="margin-left: 0.5in; margin-right:0.5in"这一行被增加了左右的外补丁p 特点：随意、方便。下面三种方式都可以达到我们需求的效果，主要看我们想达到什么效果，还要看团体习气，假设想格式和代码别离，就用第一种；假设是一个页面内部的应用，用第二种和第三种方式都可以；第三种方式很随意，但是有一点不足的中央，下面会讲到。二、语法款式表语法 (CSS Syntax)元素 { 属性:值 } 元素的写法将在下面第三部分讲到，属性和值将在第四部分讲到。三、书写办法1、直接用标签。div{font-size:12px;}div定义的款式/div特点：不必定义额外的元素，直接可以写CSS款式。2、#扫尾的代表的是id。#id{font-size:12px;}div id="text"定义的款式/div特点：可以为独自为某个元素定义的款式。3、.扫尾的代表类.text{font-size:12px;}div class="text"定义的款式/div特点：可以为一个页面外面多个应用此类的元素定义款式。4、连写方式，中间加空格 (*)div #text{font-size:12px;}div id="text"定义的款式/div#text p{font-size:12px;}特点：精准定位到某个元素。div id="text"定义的款式p在p外面的款式/p/div\下面四种写法在我们平常用的都比较多，对于第四种是前三种的一种灵活的写法。具体用哪种方式，大家可以根据自己的情况来定。四、常用的属性。1、字体：font, font-size, font-family, font-weight, text-decoration, line-heightA. font是一个复合属性。一切前面的这几个属性的值都可以放在font外面用。B. font-size定义文字的大小。C. font-family定义字体。D. font-weight定义文字的粗细。E. text-decoration定义文字的装饰。F. line-height定义行高。2、文本：text-indent, vertical-align, text-align, word-breakA. text-indent，设置对象的缩进。B. vertical-align，设置对象的上下对齐方式。C. text-align，设置对象的左右对齐方式。D. word-break，设置字体的强迫换行。3、背景：background, background-color, background-image, background-position, background-repeatA. background定义背景的一个复合属性。和下面的font一样，可以把前面这几个属性的值都放在font外面用。B. background-color定义的是背景的颜色。C. background-image定义的是背景的图片。D. background-position定义背景的地位。E. background-repeat定义背景的能否平铺。4、定位：position, z-index, top, right, bottom, left.A. position定位方式。B. z-index 定义层叠顺序。C. top, right, bottom 和left表示距离他父级的上边，左边，下边和左边的距离。5、尺寸：width, heightA. width定义对象的宽度。B. height定义对象的高度。6、规划：clear, float, displayA. clear 设置不允许又浮动对象的边。B. float设置对象浮动及如何浮动。C. display设置对象能否及如何显示。D. visibility 设置对象能否显示。7、外补丁：margin, margin-top, margin-right, margin-bottom, margin-leftA. margin定义外补丁的一个复合属性。同上。B. margin-top定义对象的上边距离父级的外补丁。C. margin-right 定义对象的左边距离父级的外补丁。D. margin-bottom 定义对象的下边距离父级的外补丁。E. margin-left 定义对象的左边距离父级的外补丁。8、边框：border, border-top, border-right, border-bottom, border-left同上（外补丁）。9、内补丁：padding, padding-top, padding-right, padding-bottom, padding-left同上（外补丁）。10、列表：list-style, list-style-image, list-style-position, list-style-typeA.binger宾格list-style是一个定义列表项目的复合属性。B. list-style-image定义列表项目的图标。C. list-style-type定义列表项目的标记。11、其他：Cursor这里只讲cursor，就是定义鼠标的显示款式，可以用图标。12、伪类：:link, :visited, :hover, :active:link定义链接未被点击时候的款式。:visited定义链接点击之后的款式。:hover定义鼠标移动到链接上的款式。:active定义链接被激活时候的款式。伪类只讲这四个，因为这四个用的最多，而且很多人容易出错，这里强调一个中央，书写顺序。在CSS外面写这四个伪类的时候，就按下面的顺序来写，不要颠倒顺序，否则可能达不到我们想要的效果。13、伪对象：:first-letter这里只讲这一个伪对象，他的作用是定义对象的第一个字母的款式。14、声明：!important提升应用款式的优先权。这个声明在firefox和ie7下面支持，在ie6下面不支持。他的主要作用是用来调整不同阅读器显示效果的差别。五、单位1、长度：Pxpx象素，in英寸等。用得最多的是象素px。2、颜色：rgb(RGB),#RRGGBBRgb(255,255,255)，#FFFFFF3、Color name：red, blue六、留意1、html代码和css代码尽量小写。2、子随父姓，就近原则。

欢迎光临编程开发论坛 (http://bbs.lihuasoft.net/)