css伪类选择器以及form表单

54 阅读 0 评论 36 点赞

我是靠谱客的博主飞快书本，最近开发中收集的这篇文章主要介绍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/>
密  码<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