css伪类选择器以及form表单

表格标签
<table></table>  
将table分为三块  <thead></thead>    <tbody></tbody>     <tfoot></tfoot>
在里面在写<tr>行     <td>列


表单标签:
<from></form>
表单中必填的属性: action:表单最终提交的地址url  
                 Method:提交的方式
Get方法  post方法
两者的区别:
Get方法:用户提交的数据会显示在地址栏中,是不安全的  数据与页面使用?隔开
        用户提交的数据大小受限制
Post方法:用户提交的信息不会显示在地址栏中
         提交的用户数据大小没有限制,还是(小文件)
Eg:登陆页面  用户名   密码
<form action="处理提交方式" method="get/post">
用户名:<input type="text" name="username" value="用户名 "/><br/> 
密&nbsp;&nbsp;码<input type="password" name="passoword" value="密码 "/><br/> 
<input type="submit" value="提交" /> 


</form> 


表单中常用的属性:
文本输入框: text    密码输入框:password
单选框:radio      复选框::checkbox 
下拉菜单:<select><opinion></select>  
上传文件:file      文本输入域:textarea      
textarea中rows指定有多少行cols指定字符数
按钮:button    提交:submit   重置:reset


框架标签:
Frame
Frameset不能和body共存.
rows:从上往下划分 划分的每个页面占整个部分的百分比
cols:按列的方向划分,从左往右 划分的每个页面占整个部份 
frame:用src连接网页   <frame src=”连接的网页”>






在head标签体中写个style标签
css:层叠样式表
html:结构化标准
css:样式化标准
css体验:
<style type=”text/css”>
A{
Font-size:24px;
Color:#F00;
}
</style>
使用link标签导入外部css文件
Eg:
<link href="第几个.css" rel="stylesheet" /> 
id选择器优先级>类选择器>标签选择器


css标签选择器:直接在里面使用html标签设置样式
div{
font-size:24px;
color:#F00;
}
类选择器:优先级高于标签选择器
.c1{
Font-size:36px;
color:#0F0;
}
Id选择器:使用的最多,设置一个id属性;书写样式  #d1{书写样式}
#d1{
Font-size:24px;
color:#00F;
}
并集选择器
.c1,#d1{
Font-size:24px;
color:#F00;
}
交集选择器:选择的div中子标签span标签
div span{
font-size:36px;
color:#0F0;
}
通用选择器:代表所有标签
*{
Font-size:36px;
Color:#CCC;
}


伪类选择器:四种状态:
link:没有访问过的状态
hover:鼠标悬浮的时候一种状态
active:鼠标激活(点击了,但是没有松开)的一种状态
visited:已经被访问过的状态(点了,并且松开了)的一种状态


状态:-没有访问-鼠标悬浮-激活-访问过, 
Css定义中   a:hover必须在a:link 和 a:visited 之后,
a:active 必须被置于 a:hover 之后,才是有效的
 顺序  link--visited--hover---active 
Css中常用的属性:
Color    letter-spacing:字符间距
Text-decoration属性:    none::没有下划线,underline:下划线  overline:上划线
Line-through:中划线      word-spacing:单词间距   默认两个字组词叫单词


字体:font-family:字体类型    font-size:字体大小
Font-style:字体样式   normal:默认   italic:斜体
font-weight:给字体设置粗细:  bold:给字体适当加粗 
背景: background-image 将某个图像设置为背景
background-repeat:设置图像是否重复以及如何重复
no-repeat:不重复(默认图片的起始位置 top left)repeat-x:x轴重复
repeat-y:y轴重复      repeat:重复 background-position 设置背景图像的起始位置


css边框
div块标签    盒子模型


可以设置4个边框的颜色
Border-left-color:颜色;
宽度: border-bottom-width:40px;
边框的样式属性:   solid:单实现  dashed:虚线   dotted:点   double:双实线
Border-top-style:solid




绝对定位默认对象浏览器:   不占据实际空间.     Position.absolute
 Left/right/top/bottom      
修改相对参考物      需要父容器+position:realative   
相对定位   position.relative   占据实际的物理位置   




Css3.0:
前缀:
内核
//不完全支持  
针对IE 10以上
-ms-如果IE支持backgorund-size 不支持直接写 给前面加ms   
-o- opera    -webkit-Google/safari/360    
-moz-  firefox
优雅降级: 
Background-size:100% 184px;
-moz-background-size:100% 184px;
-webkit-background-size:100% 184px;
渐进增强:
反过来


Background-size:兼容所有浏览器
Google/opera/firefox/IE/safari



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值