|
锁定老帖子 主题：转载：CSS基础教程（企业内部培训）
精华帖 (0) :: 良好帖 (0) :: 新手帖 (4) :: 隐藏帖 (1)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-05-25
CSS基础教程（企业内部培训）
这是上周为公司内部培训的CSS资料，希望对初学者有所帮助。 CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 一、如何把样式加入到你的网页。 1、链接外部样式。 <head> <title>文档标题</title> <link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css"> </head> 特点：格式与代码分离。 2、定义内部样式块对象。 <html> <head> <title>文档标题</title> <style 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> </head> <body> 特点：页面内部使用，方便，下载流量会适当减少。 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-height A. 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-break A. text-indent，设置对象的缩进。 B. vertical-align，设置对象的上下对齐方式。 C. text-align，设置对象的左右对齐方式。 D. word-break，设置字体的强制换行。 3、背景：background, background-color, background-image, background-position, background-repeat A. 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, height A. width定义对象的宽度。 B. height定义对象的高度。 6、布局：clear, float, display A. clear 设置不允许又浮动对象的边。 B. float设置对象浮动及如何浮动。 C. display设置对象是否及如何显示。 D. visibility 设置对象是否显示。 7、外补丁：margin, margin-top, margin-right, margin-bottom, margin-left A. 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-type A.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、长度：Px px象素，in英寸等。用得最多的是象素px。 2、颜色：rgb(RGB),#RRGGBB Rgb(255,255,255)，#FFFFFF 3、Color name：red, blue 六、注意 1、html代码和css代码尽量小写。 2、子随父姓，就近原则。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-05-27
w3school更好用
|
| 返回顶楼 | |
|
发表时间：2010-05-27
这些都很基础的东西啊...
|
| 返回顶楼 | |
|
发表时间：2010-05-27
太基础价值就不大了，随便在哪儿都查得到。
|
| 返回顶楼 | |
|
发表时间：2010-05-27
汗。。公司还给上基础课啊。。。
|
| 返回顶楼 | |
|
发表时间：2010-05-27
国企 就是好啊 让 你在这里慢慢学
|
| 返回顶楼 | |
|
发表时间：2010-05-29
不错的文章啊 很基础 蛮好 至少让自己又温习了一遍
|
| 返回顶楼 | |
|
发表时间：2010-05-29
还真是够用心的,说来惭愧, 我就用了一页PPT,丢个w3school就了事了
|
| 返回顶楼 | |
|
发表时间：2010-05-31
看过很多遍了,现在有空还在看这些..
|
| 返回顶楼 | |
|
发表时间：2010-06-13
国企啊 国企啊 真有耐性！
|
| 返回顶楼 | |
