Board logo

标题: 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/) Powered by Discuz! 6.0.0