- 科技
- day25(html 相关 超链接 表单 分区元素css样式盒子模型)
-超链接元素 分类: a标记超链接 属性: href="" 超链接的目的地 target="" 目标的打开方式 _blank:在一个新的空白窗口打开 _self:在当前的浏览器窗口打开 其他的frame的名字 b标记锚点 定义锚点: <a name="自定义锚点名字">网页中显示文字</a> 连接到锚点 <a href="#锚点的名字">网页中显示文字</a> 在body体中显示表格 -<table>表格元素 border:边框 width:宽度 height:高度 align:对齐的方式 cellpadding:单元格边框与内容间的距离,可以固定像素值,也可以是百分比(基于父容器), cellspacing:单元格之间的距离,可以固定像素值,也可以是百分比(基于父容器) align:水平对齐方式 left center right valign:垂直对齐方式 top middle bottom -<tr>行元素 align:水平对齐方式 valign:垂直对齐方式 -<td>单元格元素 align:水平对齐方式 valign:垂直对齐方式 -<th>单元格元素(仅代表表头) align:水平对齐方式 valign:垂直对齐方式 width:宽度 height:高度 solspan:列合并 rowspan:行合并 分区元素 -<thead> 表头 -<tbody> 表格内容 -<tfoot> 表格的结尾,表尾
在body 中显示表单: 表单是用来显示和收集信息,并把收集的信息提交给服务器 表单可以由两部分组成 <form>元素 表单控件元素 -<form>元素,用来定义表单的 action:表单要提交到目的地,可以是本地,可以是服务器 method:表单的提交方式 post方式:可以传递数据量大,地址栏不显示,数据安全 get方式:传送的数据量小,地址栏显示,不安全 enctype:表单提交的编码方式 -<input type="" name="">表单控件: <input type="txt" name=""/> 文本框 <input type="password" name=""/> 密码框 <input type="radio" name=""/> 单选框 <input type="checkbox" name=""/> 多选框 <input type="bttton"/> 按钮 <input type="submit" /> <input type="reset" /> 重置按钮 <input type="hidden" /> 隐藏 <input type="file"> 文件框 其他表单控件 <select></select> 下拉列表框 <testarea></textarea> 多行多列的文本框 <input> 元素属性 type:类型 name:名称 value:值 maxLength:限制输入的字符数 readonly:设置为只读 单选框和多选框常用的属性: value:值 name:名称 check:是否被默认选中 按钮上的属性: value:按钮上显示的字 css样式: 层叠样式(cascading style sheet) css样式是给html化妆的 如何使用样式: 1.内联样式/行内样式 样式定义在单个html元素中, 比如 <span style="color:red;">我是一只小小鸟</span> 特点:只能在当前的元素中使用 2.内部样式 样式定义在html页面的head中 比如: <head style=""> <style> /* 注释的写法*/ span{ color:red; } </style> </head> 特点:作用于整个页面 3.外部样式/外联样式 将定义一个外部的css样式文件,以.css为扩展名 在html中引入css文件 比如: style.css文件 span{ color:red; } demo.html文件 <head> <!--rel和type都可以省略,但是href不能省略 --> <link rel="stylesheet" type="text-css" href="style.css"> </head> css样式语法规范: css可以由多个样式规则组成 每个样式的规则有两个部分选择器和样式声明 比如: h1{ color:red; font-weight:bold; } h1是选择器 样式必须用大括号括起来 大括号中所有样式,都必须用";"分号间隔,多个样式是样式叠加 样式包括两部分,样式的属性和样式的值 样式的属性和样式的值用":"冒号间隔
css样式规则特性 -继承性:父元素的css的声明可以被子元素继承 -层叠性:同一元素存在多个css,不冲突,就叠加 -优先级:同一个元素存在多个css,有冲突的,优先级高的生效 浏览器缺省设置 外部样式或内部样式 内联样式 由低到高 css选择器: 1.元素选择器 通过元素的名称来选择css作用的目标 比如 span{ /*所有的span的字都是红色*/ color:red; }
2.类选择器: 类选择器允许以一种独立于文档元素的方式来指定样式 语法: .className{样式的定义} 所有能够附带class属性的元素都可以使用此样式声明 如果页面中有过个不同的元素需要重用同样的样式效果 可以是用类选择器 比如: .divclass{ font-weight:bold; } <div class="divclass">测试div</div> 补充: 可以将类选择器和元素选择器结合起来使用, 以实现对某种元素中不同演示的细分控制 语法: 元素选择器.className{} 比如: h1.cn1{ /*cn1只能在h1的元素中使用*/ }
3.id选择器: id选择器以一种独立于文档元素的方式来指定样式 他作用于id属性值 语法为: #id{ 样式定义 } 比如: #divid{ background-color:blue; } <div id="divid"></div> 4.派生选择器 -子选择器:用于选择指定标签的第一代子元素 符号是> 语法: 某个选择器>某个子元素的名称{} 比如: .food>li{ border:1px solid red; }
-后代选择器:用于选择指定标签元素下后辈元素 符号是空格 语法: 某个选择器 某个子元素的名称{} 比如: .food li{ border:1px solid red; } 5.伪类选择器: -伪类用于设置同一个元素的不同状态下的样式 -常用的伪类: :link 向未被访问的超链接添加样式 :visited 向已经访问的超链接添加样式 :active 向激活的元素添加样式 :hover 当鼠标悬停至元素上方时,向该元素添加样式 :focus 当元素获取焦点时,向该元素添加样式
border样式: border属性是用来设置元素的边框 四边设置: -border:width值 style值 color值; 比如: border:1px solid red; 单边设置: border-left:width值 style值 color值; border-right:width值 style值 color值; border-top:width值 style值 color值; border-bottom:width值 style值 color值;
box盒子模型:处理元素框的内容,内边距,边框,外边框的方式 <!--演示盒子模型--> <div class="borderclass"> <div class="box"> 这是演示盒子模型 </div> </div> /*演示盒子模型*/ .borderclass{ border:1px solid red; width:200px; }
.box{ border:2px dotted green; width:70px; /*四边设置*/ margin:30px; padding:10px; } .box1{ border:2px dotted green; width:70px; /*单边设置 上右下左*/ margin:10px 20px 30px 40px; padding:10px 20px 30px 40px; margin } .box2{ border:2px dotted green; width:70px; /*单边设置 上下 左右*/ margin:20px 30px; padding:20px 30px; } .box3{ border:2px dotted green; width:70px; /*单边设置 当左右为auto时候,水平居中*/ margin:20px auto; padding:20px 30px; } 背景: 背景色: background-color:red; 注意red还可以用#6位16进制数来替代 背景图片: background-image:url('图片的路径(相对或绝对)'); 注意: 默认值是none,表示没有没有背景图片 如果设置图片就用url方式指定图片路径 默认情况下,背景图片在水平和垂直方向上重复出现 background-repeat属性可以控制背景图片的平铺效果 background-repeat的取值: -repeat:在垂直方向和水平方向重复, -repeat-x:仅在水平方向重复 -repeat-y:仅在垂直方向重复 -no-repeat:仅显示一次 文本格式: 指定字体: font-family:value1,value2,value3; value指的是字体(前提当前系统中存在字体) 指定大小: font-size:value; value是一个具体像素值 指定加粗 font-weight:normal/bold/100-900 文本颜色: color:value value是一个具体颜色的单词,也可以是一个#6位16进制数 文本排列 text-align:left|right|center; 文本修饰: underline 下划线 text-decoration:none|underline; 行高: line-height:value value是一个具体的数值 首行文本缩进: text-indent:value value是一个具体的数值 表格样式: 表格同样可以使用box模型(边框,内边距,宽,高) 以及文本样式
表格特有的样式属性 如果设置了单元格的边框,相邻单元格的边框会单独显示 类似于双线边框 border-collapse属性:合并相邻的边框 设置是否将表格边框合并为单一边框 属性的值:border-collapse:separate|collapse; 补充内容th:也是单元格,代表表头,表头的内容是黑体加粗居中 页面元素定位: 定义元素框相对于其正常位置应该出现的位置, 或者相对于父元素,另一个元素甚至浏览器窗口本身的位置 -流定位(推荐) 从上到下顺序排列,<div>是从上到下 从左到右排列<span>是从左到右 -浮动定位(推荐) 让元素脱离普通的流定位 将浮动元素放置在父元素的左边或右边 浮动元素依旧位于父元素内 浮动的框可以向左或向右移动,直到他的外边框边缘碰到父元素 或另一个浮动的边框位置 经常浮动定位做网页的布局 float:none|left|right -相对定位 -绝对定位 -固定定位
列表样式: list-style-type属性用于控制列表中列表项的样式 -无序列表ul:出现在各列表左边的原点 取值: none 无符号 disc 实心圆 默认 circle 空心圆 square 实心方块 -有序列表ol:可能是字母,数字,或其他的计数体系符号 取值: none 无标记 dicimal 数字(1,2,3...) lower-roman 小写罗马(i,ii,iii...) upper-roman 大写罗马(I,II,III...) list-style-image属性使用图像来替换列表项的标记 取值: list-style-image:url('图片的路径');
