|
昨日回顾 <iframe>提示信息</iframe>内嵌式框架 常用的属性: src: width: height: align: 表单： <form> 常用的属性： name: action: 设置数据处理的页面(php文件) method: 设置数据提交的方式 取值get post get特点：不安全、数据量小、数据类型 http://www./receiver.php?name1=value1&name2=value2 enctyp:设置数据传输的方式 一种文本内容 enctype=”application/x-www-form-urlencoded” 二种二进制内容 enctype=”mutipart/form-data” http协议 HyperText Transfom Protocol（超文本传输协议），主要就是用于浏览与web服务器之间进行数据通信的一种规则。它是采用请求与响应的模式，浏览器向会服务器发送一个http请求，http头部包含请求的方式，URI(所请求的文件)，协议及版本号， get receiv.php http/1.1 if-modified-since:从上次请求的文件至本此之间是否有更改过 referer:此请求来自哪个网页 服务器会以一状态行为响应： http响头部包含协议及版本号，状态码，实体元素信息与实体信息 <input>表单协作区域 常用的属性： name: 表单元素的name值与表单元素的值组成对的形式 value: type: size: 设置显示的宽度 maxlength: 设置输入的字符个数 readonly: 只读 disable: 禁用 checked: 设置默认选中，用于radio与checkbox type的属性值(表单输入区域的类型) 常用的值： text: 设置单行文件区域 password: 密码框 radio: 设置单选按钮 同一组内的单选按钮name要一致 checkbox: 设置复选框 同一组内的复选框name值要一致 需要加”[]” submit: 设置提交按钮 reset: 设置重置按钮 hidden: 设置隐西藏域 file: 设置上传文件 image: 设置图上片提交按钮 如果要实现文件上传： 1、 form表单的提交方式要设置为post 2、 form表单的数据传输类型要设置为enctyp=”multipart/form-data” radio、checkbox、option这标签的value是用于数据传递 下拉列表: 语法结构 <select size=”3” name=”movie” multiple=”multiple”> <optgroup label=”am” disabled=”disabled”> <option value=””>1</option> <option selected=”selected”>2</option> <option>3</option> <optgroup> <optgroup label=”pm”> <option>a</option> <option>b</option> <option>c</option> </optgroup> </select> 二级联动：使用js对对象(html元素，html标签)进行动态添加 多行文本框 <textarea></textarea> 常用的属性： name: cols: rows: wrap: off soft hard 设置不可以改变大小：style=”resize:none;” <fieldset> <legend>分组信息</legend> <input/> <select> <textarea> </fieldset> CSS Cascading Style Sheet层叠样式表(级联样式表) Tim Berners.Lee蒂姆伯纳斯.李 在创建(World Wide Web)时，为文字设置样式只有用h标签定义一个标题，P标签用来定义一个段落。对页面的排版也是十分困难。样式表的出现解决以问题 样式表的作用：分离html结构与样式 1、 建立html文档更加方便，不需考样式 2、 提交了网页开发的效率， 3、 独立性与灵活性：html文档与样式分离后，文档与样式之间就具有了独立性，当更改内容时，在结构文档中进行更改，如果更改样式在样式文件中进行更改。 4、 样式代码的重复利用：一个html文档可以应用多种样式，这样就可以快速更改网页样式。多个html文档可以应用同一个样式，这些文档就可以实现相似的效果与风格。 CSS的作用 1、 CSS2.0是目前众多浏览器支持最为完善样式，新的浏览也是以2.0css为支持原型进设计，css2.0样式在众多平台和浏览表现的效果也最为一致。 2、 css可以实现页面标签精确的位，可以支持全部的字体，字号，样式和完美的模型设置和简单的交互设计。 样式的结构：内容 结构(Structure) 表现(presetation) 行为(Behavior) 内容是一个人 头部，身体，四肢(结构) 头部身体四肢上的衣服饰，饰品(样式) 头部，身体，四脚动作(行为) CSS文件的引入方式第一种：行内样式 在html标签内使用style属性书写的样式 <span style=”color:red”>行内样式</span> 第二种：内部样式(内嵌样式) 内嵌样式是书写在<style>标签中 如： <style type="text/css"> span{ color:red; } </style> 第三种：引入样式 在style标签中使用@import url(样式文件名) <style type="text/css"> @import url(import.css); </style> 第四种：外部样式 使用HTML的link标签引入的样式 <link ref=”stylesheet” type=”text/css” href=”css文件名”/> CSS的语法： CSS样式表中由若干个样式规则组成 每一个样式规则由以下组成
选择器(符)：选择器的作用，一是选中html标签,二将样式应用给选中的标签,选择器的名子不能以数字开头。 选择器的种类： 1、 标签选择器 span{ color:red; } 2、 类选择器 类选择器以“.”开头 .a1{ color:blue; } 3、 id选择器 ID选择器以”#”开头 #a3{ background:silver; } 4、 层级选择器 每一个选择器之间使用空格分开 E F G{样式} EFG是选择器的名字 a .whitewine{color:yellow;} 5、 分组选择器 E,F,G{样式} EFG是选择器名字，可以是任何选择器的名字 <style type="text/css"> span,label,.c3{color:red;border:1px solid red;background:yellow;margin:20px;} </style> <script type="text/javascript"></script> </head> <body> <span>分组选择器1</span> <label>分组选择器2</label> <h2 class="c3">分组选择器3</h2> </body> 6、 组合选择器 将以上各种选择器组合使用逗分隔而成的选择器 计算时先以”,”号将每组分开，再进行相应计算 #box div label,#id1 .l1{color:red;} //相当于 #box div label{color:red;}; #id1 .l1{color:red;} </style> <script type="text/javascript"></script> </head> <body> <div id="box"> <div> <span class="c1">类选择器</span> <br/> <label>标签选择器</label> </div> </div> <div id="id1"> ID选择器 <label class="l1">标签选择器</label> </div> </body> 7、 通用选择器： *{样式} 选中文档中所有的标签 在IE低版本中不支持 8、 伪类选择器 一般是用于a链接的不同状态，以下四种状态 :link a链接正常显示状态 :visited a链接访问后的状态 :hove r 鼠标悬浮于a链接上的状态 :active 当鼠标在a链接上按下(并未抬起鼠标)后的状态 联想记忆： LVHA Love(爱) Hate(恨) 常用写法： a:link,a:visted{text-decoration:none;color:silver;} a:hover{text-decoration:none;color:red;} 属性的书写规范： 1、 属性与属性值之间用”:”分开 2、 属性与属性之间用”;”分开 CSS中的注释 /*注释内容*/ 可以单行注释，也可以多行注释 CSS属性详解： 一、尺寸属性 width: 设置标签的宽度 取值：数值 单位：非零数值必须px height: 设置标签的高度 取值：数值 单位：非零数值必须px 二、字体属性 color: 设置文字颜色 named color、十进制RGB(255,200,100) 十六进制(#00ff00) font-size: 设置文字大小 单位px 12px; font-family: 设置字体 宋体,黑体 font-weigth: 设置字体是否加粗 font-style: 设置字体是否斜体 line-height: 设置行高 font: 复合属性 示例：span{font:bold italic 13px 华文行楷;} 字体与字体大小属性是必须 三、文本属性 text-transform: 设置文本在小写 capitalize uppercase lowercase只适用于英文 text-decoration: 设置文字装饰线 underline、overline、line-through、normal text-align: 设置文字或被包含行内元素水平对齐方式 left、center、right vertical-align: 设置文字或被包含行内元素垂直对齐方式top、middle、bottom text-indent: 设置文字首先缩进 单位:px像素 letter-spacing: 设置字符间距 word-spacing: 设置词间距 一般用于英文 四、边框属性 border-width: 设置边框粗细 单位:px broder-style: 设置边框样式 取值:solid实线、dashed虚线段、dotted点虚线、inset、ouset broder-color: 设置边框颜色 三种 border: 复合属性 border:red 1px solid; border-left-width: 单独设置左边的粗细 border-left-color: 单独设置左边的颜色 border-left-style: 单独设置左边的样式 border-left: 左边的复合属性 border-left:red solid 1px; border-left-style:dashed; border-left-width:1px; border-left-color:red; border-top-style:dotted; border-top-width:2px; border-top-color:blue; border-right-style:outset; border-right-width:3px; border-right-color:yellow; 五、背景属性 background-color: 设置背景颜色 三种颜色方式 background-image: 设置背景图片 url background-image:url(图片地址); background-position: 设置背景图片的位置 top 居上对齐 center 居中对齐 left 靠左对齐 right 靠对齐 center 居中对齐 bottom 向下对齐 background-repeat: 设置背景图片的平铺方式 取值: repeat-x水平方向平铺 repeat-y垂直方向平铺 no-repeat 不平铺 background-attachment: 设置背景是否随内容滚动 取值：fixed背景固定 scroll背景随内容滚动 background: 背景图片的复合属性 background:red; background:url(tiger1.jpg) 0 0 scroll no-reapt; <font size=”” color=”” face=””> |
|
|
