1. 推荐的学习CSS网站(禅意花园....顶级优秀的网站) 2
² CSS分类(内部(HTML,class,id选择器),行内,外部样式表) 4
2. 块元素的一些属性(border,margin,padding,float,cursor) 10
第一阶段 Lesson3 CSS
² 什么是CSS?
| CSS: cascading style sheets(层叠样式表) css2.0是现在我们教的版本.... css3.0是最新的版本 |
1. 推荐的学习CSS网站(禅意花园....顶级优秀的网站)
2. 什么是dtd文档?
| .dtd 文档类型定义: 这个是用来让一些低级版本的浏览器识别最新技术的命令. eg:如果IE 4.0版本的,如果识别最新的ＨＴＭＬ的代码，有加上这个ＨＴＭＬ上面自动生成的这个东西 浏览器就会自动到网站下载这个东西.然后就可以识别最新的命令 charset=UTF-8 写这个是为了让国外的人们可以看到中文.和显示中文, 国外的浏览器是英文版本的.所以如果没加这个的话,识别的是英文版本的.就会出现乱码.... |
² CSS的作用 ?
| 1,将内容和格式分离 2,极强的控制页面布局能力 3,做体积更小的,下载更快的,更安全网页 4,可以将许多网页同时更新,更快更容易 5,让不同的浏览器显示相同的界面 |
² 怎么用CSS ?
| <head> <style type="text/css"> 选择器,选择器{规则:值;..............} </style> </head> |
² CSS分类(内部(HTML,class,id选择器),行内,外部样式表)
| 一,内部样式表(针对本页面有效) | 1,HTML选择器 |
| 二,行内样式表(针对单独元素有效) |
|
| 三,外部样式表(针对所有页面有效) | <link rel="stylesheet" href="xx.css"/> |
² 样式表的有线级别问题(就近原则)
|
| size | color | |
| 外部 | 50 | green | |
| 内部 | 60 | red | |
| 行内 | 20 | pink | |
| 元素 最终 20 ,pink 优先级 行内>内部>外部(就近原则) | |||
² 情景选择器:p b{........}
| 这个选择器只有在这样的情况下才有用.... <p><b>xxxxxxxxxxxxxxx</b></p> 同理: p .xd{} <p> <b class="xd"></b></p> ------------------------------------------------------------ .xd .xxd{} <p class="xd"><b class="xxd"></b></p> ------------------------------------------------------------ #xd .xdx{} <p id="xd"><b class="xdx"></b></p>
|
第一阶段 Lesson 5 DIV+CSS(重要)
这个上课主要讲的布局,就是关于页面的布局,现在90%的网站都是用DIV+CSS布局的.所以应该好好掌握这次课的知识.
² CSS的常用样式(重要,总结的,熟记)
在学习DIV之前,我们还要熟悉一些常见的CSS样式.
1. 字体
| 1,line-height:50px 行的高度 2,letter-spacing:50px 汉字间的距离 3,word-spacing:50px 字母间的距离 4,text-indent:2em 缩进两个字 |
2. 背景
| 1,background-image(url()) 设置背景图片 2,background-position:center 设置背景的位置 3,background-repeat: no-repeat 背景图片比界面小的话不会铺满界面 4,background-attachment:fixed 背景图片一直居中.不随滚动条的滚动而改变(固定背景) |
3. 列表
| 1,list-style-type:none 列表前的系列号不显示 2,list-style-image:url 列表的序号换成图片 |
4. 超链接
| 1,text-decoration:none 把超链接的下划线去掉 2,color:#000000 把超链接的颜色去掉 |
还有一个经常用到的就是
5. 伪类
| 选择器:hover{} .class:hover{} #id:hover{} 都可以用,自己定义的样式也可以xxx:hover{} {}中放的样式就是你鼠标移到那里会显示什么的样式 还有:active{} :visited{} 这两个一个是鼠标点击的时候显示,一个是鼠标释放产生的变化 |
² DIV(重要,掌握)
DIV 的来了..要好好学....
1. HTML元素的分类(块元素,行元素)
| 1,块分类 (p,div,h1,table,form,li...) 就是元素自己占一行. 2,行标记(不是块的就是行了....) 可以很多元素占一行 |
2. 块元素的一些属性(border,margin,padding,float,cursor)
| 都有一个叫border的属性.可以设置边框,还有椭圆矩阵 边框要记得话很容易..就分上下左右... 就是=外补丁(margin) 就是两个块之间的距离 margin:auto auto 自动居中的功能 还有一个 内补丁(padding) 就是块中内容和边框的距离 如果要两个块元素放在一行就要用到 float这个属性了... float:left 就是从左往右排 right就是同理的... clear属性是清楚float和right布局的属性, 比如本来是float的,clear后就变成没有了 还有一个就是如果你鼠标移到那个图片上面,希望显示一个手,表示可以点击.... 就要用到一个属性 cursor:pointer 这个属性就可以了 |
² 经验(重要)
| 要做布局的时候,要做一份草稿.把大小先给定了.... 这样你才能更好的开发... 还有就是要格式对齐..... 如果要做一个好的网站.都是用自己ＤＩＶ＋ＣＳＳ出来的..而用Dreamweaver生成的代码存在很多垃圾代码... 布局是很重要的..
|
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
