2019.07.31(day02)
java web
-超链接元素
分为两类:
a标记超链接:
属性:href="超链接的目的地"
target="目标的打开方式"
_black:在一个新空白浏览器窗口打开
_self:在当前浏览器窗口打开
其他frame的名字
a标记锚点:
定义锚点:
<a name="自定义的锚点的名字">网页中显示文字</a>
链接到锚点
<a href="#锚点的名字">网页中显示文字</a>
在body体中显示表格内容:
-<table>表格元素
border:边框
width:宽度
height:高度
align:对齐方式
cellpadding:单元格边框与内容之间的距离(可以是固定像素值,也可以是百分比)
cellspacing:单元格之间的距离(可以是固定像素值,也可以是百分比)
-<tr>行元素
align:水平对齐方式 left cneter right
valign:垂直对齐方式 top middle bottom
-<td>单元格元素
align:水平对齐方式
valign:垂直对齐方式
width:宽度
height:高度
colspan:列合并
rowspan:行合并
-<th>单元格元素(仅代表表头)
分区元素
-<thead> 表头
-<tbody> 表格内容
-<tfoot> 表尾
在body中显示表单:
用来显示和收集信息,并把收集的信息提交给服务器
表单可以由两个部分组成:
<form>元素
表单控件元素
-<form>元素,专门用来定义一个表单的
action:表单要提交到哪个目的地(可以是本地,也可以是服务器)
method:表单的提交方式
post提交:传递数据量大,地址栏不显示,数据安全
get提交:传送的数据量小,地址栏显示,数据不安全
enctype:表单提交的编码方式
-<input type="" name="">表单控件:
<input type="text" /> 文本框
<input type="password" /> 密码框
<input type="radio" /> 单选框
<input type="checkbox" /> 多选框
<input type="button" /> 按钮
<input type="submit" /> 提交按钮
<input type="reset" /> 重置按钮
<input type="hidden" /> 隐藏
<input type="file" /> 文件框
其他表单控件
<select></select> 下拉列表框
<textarea></textarea> 多行多列的文本框
<input>元素的属性
type:类型
name:名称
value:值
maxLength:限制输入字符数
readyonly:设置为只读
单选框和多选框的常用属性
value:值
name:名称
checked:设置默认选中
按钮的属性
value:按钮上显示的字
css样式:
层叠样式(cascading style sheet)
css样式是用来给html化妆
如何使用样式
1.内联样式/行内样式:
样式定义在单个的html元素中
比如:
<span style="color:red;">我是一只小小鸟</span>
特点:只能在当前的元素中使用
2.内部样式:
样式定义在html页面的<head>中
比如:
<head>
<style>
/*注释的写法*/
span{
color:red;
}
</style>
</head>
特点:作用于当前整个页面
3.外部样式/外联样式
将定义一个外部的css样式文件,以.css结尾
在html中引入这个css文件
比如:
style.css
span{
color:red;
}
...
demo.html
<head>
<!--rel和type都可以省略-->
<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('图片的路径');
扫一扫
1302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
