CSS+DIV课程笔记_第1页
CSS+DIV课程笔记_第2页
CSS+DIV课程笔记_第3页
CSS+DIV课程笔记_第4页
CSS+DIV课程笔记_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、睿思科技网站建设CSS+DIV课程笔记1-1、什么是CSS和DIV一、什么是CSSCSS的全称是：Cascading Style Sheet（层叠样式表），利用它可以对页面当中的文本、段落、图像、页面背景、表单元素外观等实现更加精确的控制，甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整。更为重要的是，CSS真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点文件的风格，大大减小了更新站点的工作量。二、什么是DIVDIV是层的标记，在DIV中可以放入网页中任何一种元素（如：文字、图片、），,然后配合CSS，可以实现网页各个元素的精确定位。三、CSS+DIV的优势1

2、、网页加载速度快2、更容易被搜索引擎接受3、能实现更多动态效果4、后期维护方便四、传统html的缺点：（1）维护困难（2）标记不足（3）网页过“胖”（4）定位困难1-2、1-3、1-4、CSS样式的使用方法一、CSS样式的使用方法:1、行内样式：直接在html标记中使用style=”来设置属性，也就是直接将css代码嵌套在html标注中，像使用html标记一样使用。2、内嵌式：只对本页面起作用。加在<head></head>之间<title></title>代码下面，格式：<style type=”text/css”><!- /

3、防止低版本的浏览器不支持会直接将CSS显示出来。加这上这个相当于html的注释，如果显示就直接注释掉。 -></style>3、链接式：引入外部一个css文件，加在<head></head>标签之间<title></title>下面如：<link href=”1.css” type=”text/css” rel=”stylesheet”>1-5、CSS样式的定义方法一、CSS样式的定义方法：1、自定义样式（类别选择器）2、标记定义（标记选择器）3、#号定义法（ID选择器）（1）自定义样式方法：.自定义名称font-s

4、ize:12px;color:#FF0000;使用方法：<p class=”自定义名称”;> 效果 </p>（2）标记定义方法：pfont-size:12px;color:#FF0000;注：通过标记定义好的CSS样式效果会自动应用给网页中所有使用此标记的元素或对象。（3）#号定义的方法：#自定义名称font-size:12px;color:#FF0000;使用方法：<p id=” 自定义名称”;> 效果 </p>注：通过#号定义的CSS样式，在html代码中最好只使用一次，因为我们有的时候需要使用javascript脚本对应用此类CSS样式的对

5、象进行控制，如果应用多次的话，javascript不知道该对哪个对象进行控制。1-8、1-9、CSS样式的集体定义方法一、集体定义所谓集体定义是在多个标记使用同一个CSS效果，这时就可以同时对多个标记做一次性定义。（1）集体定义的方法：.自定义名称，标记，#自定义名称font-size:12px;color:#FF0000;二、CSS样式的继承继承的原则是由外到内，先使用第一个样式，然后再使用第二个样式。1-10、CSS样式定义的嵌套（选择器的嵌套）一、选择器的嵌套如：p bcolor:#FF0000;font-size:12px;注：上面这种定义方法表示P标记里面包含的b标记的样式，也就是说

6、只有当b标记被p标记包含的时候才会使用这个样式，没有被p标记包含b标记不会调用这个样式，同时p标记也不会使用这个样式。2-1、文字样式的设置一、文字样式1、font-family：字体2、font-size：文字大小3、color：颜色4、font-weight：文字粗细5、font-style：斜体6、text-decoration：加下划线、顶划线，删除线7、text-transform：英文字母大小写8、text-indent：首行文本缩进9、letter-spacing：字间距二、字体（font-family）1、H2Font-family:黑体，幼圆;表示采用黑体，如果系统没有黑体就

7、采用幼圆，如果没有幼圆那么就采用浏览器默认字体。2-2、文字大小和颜色一、文字大小（字号）（font-size）1、文字大小的单位：in：英寸，cm：厘米，mm：毫米，px：象素。2、font-size在设置文字大小时分为绝对大小和相对大小。14px像这样表示绝对大小，large 像这种表示相对大小。二、color：颜色1、颜色的表示方法（1）单词：red、green、blue（2）RGB：RGB（255,255,255）（3）十六进制：#FFFFFF2-3、2-4、文字粗细、斜体和划线1、font-weight：文字粗细2、font-style：斜体（1）italic：斜体3、text-de

8、coration：加下划线、顶划线，删除线（1）overline：上划线（2）underline：下划线（3）line-through：删除线4、text-transform：英文字母大小写（1）capitalize：单词开头大写（2）lowercase：全部小写（3）uppercase：全部大写5、text-indent：首行文本缩进6、letter-spacing：字间距2-5、练习一、定义CSS的原则相同属性定义在一起，不同属性分别定义。2-6、2-7、文字的对齐一、文字的对齐1、水平方向对齐：text-align（1）left：左对齐（2）center：水平居中（3）right：右对齐

9、2、垂直方向对齐：vertical-align（1）top：顶对齐（2）middle：垂直居中（3）bottom：底对齐二、行间距和字间距1、行间距：line-height2、字间距：letter-spacing2-8、首字放大一、首字放大1、float：left2、float：right3-1、3-2、图片的边框效果1-2一、图片的边框效果边框：border线型：style（solid：实线，dashed：虚线， dotted：点划线）颜色：color宽度：width3-3、图片的大小与缩放一、图片的大小与缩放宽度：width高度：height注：宽度和高度可以设置绝对大小和相对大小。3-4

10、、图片的对齐一、图片的对齐1、水平方向对齐：text-align（1）left：左（2）right：右（3）center：水平居中2、垂直方向对齐：vertical-align（1）top：顶对齐（2）middle：垂直居中（3）bottom：底对齐3-5、图文混排效果一、图文混排1、float：left（将图片单独分离出来放在左边。）2、float：right（将图片单独分离出来放在右边。）3-6、图片与文字的间距一、图片与文字的间距1、margin：间距（1）margin-left：左间距（2）margin-right：右间距（3）margin-top：上间距（4）margin-botto

11、m：下间距4-1、网页背景颜色的设置一、网页背景颜色1、background-color:背景颜色4-2、4-3、网页背景图片1、background-image:背景图片2、background-repeat:背景图片是否重复3、background-position:背景图片的位置4、background-attachment:背图图片是否固定注：1、网页背景颜色和背景图片可以同时设置吗？2、如果让背颜色和背景图片同时显示？4-4、网页背景的综合设置background5-1、表格中的标记1、表格中的标记table：表格tr：行td：单元格caption：表格的总标题th：表格的行列标题5

12、-2、表格颜色的设置5-3、表格的边框设置11、border-collapse:collapse：重叠边框5-4、表格的边框设置2 5-5、隔行变色表格的制作 5-6、CSS设置表单样式15-7、CSS设置表单样式25-8、CSS设置表单样式36-1、6-2、超链接特效1-2一、超链接指的是通过点击一个对象可以链接打开另外一个对象（网页、图片、程序等）。二、超链接的各种状态1、a:link：默认。2、a:visited：点击过。3、a:hover ：鼠标移上去。4、a:active：点下去。6-3、超链接特效31、.a1:link：默认。2、.a1:visited：点击过。3、.a1

13、:hover ：鼠标移上去。4、.a1:active：点下去。6-4、6-5、按钮式超链接的制作1-21、padding：内容和边框的距离。2、margin：边框外的距离。6-6、按钮式超链接的制作31、padding：内容和边框的距离。注：距离顺序为上、右、下、左。6-7、浮雕式超链接效果的制作16-8、浮雕式超链接效果的制作26-9、不同鼠标形状的超链接1、cursor：鼠标形状（1）help：帮助形状（2）move：移动形状（3）wait：等待形状（4）hand：手的形状。7-1、项目列表1项目列表是用于对数据按逻辑方式进行分组，常用的列表有两种：1、无序列表<ul>

14、;</ul>2、有序列表<ol></ol>无序列表：指各条列之间无顺序关系，只是利用条列方法呈现资料而已。无序列表中的每个值用：<li></li>circle：空心圆disc：实心圆（默认）square：方形有序列表：指条列之间是有顺序的，从1，2，3，.直延伸下去。列表中的每一项值用:<li></li>decimal、表示1，2，3，4，.顺序upper-alpha：表示A、B、C、顺序lower-alpha：表示a、b、c、顺序upper-roman：罗马（大写）lower-roman：罗马（小写）list

15、-style-type：项目列表的类型注：使用CSS控制项目列表，有序列表和无序列表没有本质的区别。7-2、项目列表21、不同类型符号的定义2、list-style-image：图片符号7-3、定义块元素1、display:block：定义为块元素注：当超链接被定义为块元素后，鼠标进入该块的任何区域都会被激活。7-4、7-5、纵向菜单效果的制作1-21、list-style-type：none不设置项目符号7-6、横向菜单效果的制作1、float：left：左对齐排列7-7、什么是DIV一、什么是DIVDIV是层的标记，在DIV中可以放入网页中任何一种元素（如：文字、图片、），,然后配合CSS

16、，可以实现网页各个元素的精确定位。7-8、Tab菜单效果的制作17-9、Tab菜单效果的制作27-10、Tab菜单效果的制作37-11、Tab菜单效果的制作47-12、Tab菜单效果的制作58-1、详细讲解DIV标记一、详细讲解DIV标记1、默认每个DIV单独占满整行8-2、span标记一、span标记1、每个span标记不是单独占一行注：div标记一般用于大区块，span标记一般用于小区块。8-3、盒子模型一、盒子模型（矩形区域）1、border：边框2、padding：内边距3、margin：外边距注：在利用CSS给对象设置属性时，任何一个对象都可以看成盒子模型。8-4、盒子模型大小的计算

17、方法一、盒子模型（矩形区域）1、width，height：宽度和高度指的是内容区域的大小。盒子大小：宽度：width+padding+border+margin高度：height+padding+border+margin8-5、盒子模型中各参数的设置一、盒子模型（矩形区域）1、border：边框2、padding：内边距3、margin：外边距8-6、8-7、8-8、8-9元素的定位1-4一、元素的定位1、float：float定位2、position：相对或绝对定位（1）absolute：绝对定位（2）relative：相对定位3、z-index：前后定位8-10、图片签名效果8-11、Position定位1、position：相对或绝对定位（1）absolute：绝对定位（2）relative：相对定位（相对父对象即相对原位置）8-12、文字阴影9-1、如何用DIV对网页进行分块一、网页布局分类（1）“同”字式（2）“厂”字式或反“厂”字式二

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论