1.表单的作用
2.表单的组成
3.CSS简介
4.CSS语法
5.CSS样式的创建
6.CSS选择器
7.选择器的权重
8.浮动属性的简单应用
9.HTML CSS注释
一、表单的作用及组成
表单的作用:用来收集用户信息
表单组成:表单框(form)
1).表单框
<form> </form>
2).文本框
<input type ="text" value="默认值"/>
3).密码框
<input type="password"/>
4).重置按钮和提交按钮
<input type ="submit" value="提交按钮"/> 提交按钮
<input type ="reset" value="重置按钮"/> 重置按钮
5).表单中的灰色文字 例:QQ号码/手机/邮箱
<input type="text" placeholder="QQ号码/手机/邮箱"/>
二、CSS简介
1.CSS概念:层叠样式表 英文全名:cascading style sheets
2.Wed简单来说就是如何修饰网页信息的显示样式
3.用来修饰XHTML或者XML等样式文件的计算机语言
三、CSS语法
CSS语法:选择器{属性:属性值;属性:属性值;}
例:div{width:200px height:200px; background-color:blue;}
四、CSS样式的创建(内部样式,外部样式,内联样式)
1.内部样式
<style type="">
CSS语句
</style>
注:使用内部样式最好将标记放在<head></head>里面
2.外部样式
第一种外部样式方法:
<link rel="stylesheet" type="text/css" href="文件位置路径"/>
注:使用外部样式将标记放在<head>与</head>里面
rel (relation): 用于定义文档关联,表示关联样式表。
type:定义文档类型
第二种外部样式表方法
<style text="text/css">
@import url(文件路径全称);
</style>
注:@和import之间没有空格 url和小括号之间也没有空格;必须结尾以分号结束;
3.内联样式
语法:<标签 style="属性":属性值;></标签>
例:<div style="width:200px height:200px"></div>
五、CSS选择器
1. 类选择器
div,p,h1,img,a,span,i,em,b,strong,ul,li,ol,dl,dt,dd,,,
2). id选择器
语法:#id名{属性:属性名}
例:
1)使用id选择符时,应该为每个元素定义一个id属性
<div id="box"></div>
2)id选择符的语法格式是“#”加上自定义的id名
#div{width:300px;height:300px}
3)起名时要去英文,要语义化
3).群组选择器
语法:选择符1,选择符2,选择符3......{属性:属性值;}
例:#box,h1,p{ width:960px}
说明:当有多个选择器时,要用 ","隔开
4).class选择器
语法:class{属性:属性值}
例:<div class=”box“></div>
.box{ widyh:200px; height:200px;}
5).*通配符
语法:*{ 属性:属性值}
例:*{margin:0; padding:0;} 清除默认的内外边距
6)后代选择器
语法:选择符1 选择符2{属性:属性值;}
说明:选择符1包含所有选择符2
例:<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul li{ color:red;}
7.子选择器
作用:想要改变某个父元素下面所有的儿子元素的时候
父元素>子元素{}
例 ul>li{}
8.相邻兄弟选择器
作用:想要改变某个元素后面紧挨着的元素的时候
选择器1+选择器2{}
例 div+p{}
9.通用兄弟选择器
作用:想要改变某个元素后面所有的元素的时候
选择器1~选择器2{}
例 div~p{}
7)伪类选择器
a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;
六.CSS选择器的权重
类型选择符(元素选择器)的权重为0001 如:div{width:100px; height:100px;}
class选择符(类选择器)的权重为0010 如:.box{width:100px; height:100px;}
id选择符的权重为0100 如:#box{width:100px; height:100px;}
内联样式的权重为1000 如:<div style="width:100px; height:100px;"></div>
七.页面中的注释
Html注释
<!-- 注释内容 -->
css的注释
/* 我是css的注释 */
快捷键:ctrl+/
八.补充
CSS语法
- font-style:12px; 字体大小
- font-family: 楷体; 字体类型
- font-weight:800; 字体加粗 范围:100-900
- font-style:italic; 斜体 normal(默认显示)
- text-align:center; 让字体居中
- text-align:justify; 水平两端对齐,但只对多行起作用
- line-height:20px; 让字垂直居中
- font-size:0; 清除图片下面的小间距
- list-style:none; 去除li标签前面的小点
- text-indent:1em; 首行缩进
- letter-spacing:12px; 控制文字和文字之间的间距
CSS背景属性
- 背景图片定位 background-position:center center; 居中
- 背景图片固定 background-attachment:fixed;固定