前端基础(2):部分表单元素与CSS基础

表单的作用:用来收集用户的信息的;

表单包含三个组成部分:

表单域:包含了处理表单数据所用的程序的URL以及数据提交到服务器的方法。 表单控件(对象、元素):包含了文本框、密码框、隐藏、多行文本框(文本域)、复选框、单选框、下拉列表、文件上传框、提交按钮、复位按钮、一般按钮。 提示信息:同一个表中还应该添加一些说明性文字,提示用户填写操作。 1、表单域
<form name="表单名称" method="post/get" action=""></form>

2、文本框

<input type="text" value="" />

3、密码框

<input type="password" placeholder="密码" />

4、重置按钮

<input type="reset" value="内容" />

5、按钮

<input type="button" value="按钮内容" />
<input name="" type="submit" value="按钮内容" />
<button></button>

一、css简介

cascading style sheets 层叠样式表 web 标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,修饰网页信息的显示样式。

二、CSS语法

CSS语法:选择符{属性:属性值;属性:属性值;}

在这里插入图片描述

三、样式的创建(内部样式 外部样式 内联样式)、两种引入外部样式表的区别

**A、内部样式** 语法:
<style type="text/css">

    /*css语句*/

</style>

注:使用style标记创建样式时,将该标记写在<head></head>内;
B、外部样式
外部样式表的创建步骤:
**链接方式1 :**在HTML文件头部

<link rel="stylesheet" type="text/css" href="目标文件路径与文件全称" />

说明:
使用link元素导入外部样式表时,需将该元素写在文档头部,即与之间。
rel(relation):用于定义文档关联,表示关联样式表;
type:定义文档类型;

**链接方式2 :**在HTML文件头部

<style type=”text/css”>
         @import  url(样式表路径及全称);
</style>

C、内联样式 (行间 样式,行内样式,嵌入式样式)
语法:<标签 style="属性:属性值;属性:属性值;"></标签>
*link和import导入外部样式的区别:
差别1:老祖宗的差别:link属于HTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,定义rel连接属性等,@import就只能加载CSS。
差别2:加载顺序的差别:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3:兼容性的差别。:@import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识识别。
差别4:使用dom控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的.

四、样式表的优先级

A、内联样式表的优先级别最高 B、内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高。

五、CSS选择符(选择器)

常用的选择符有十种左右 类型选择符,id选择符,class选择符,通配符,群组选择符 包含选择符,伪类选择符(伪类选择符CSS中已经定义好的选择器,不能随便取名),伪对象选择符(设置在对象后发生的内容。用来和content属性一起使用 )

1) 元素选择符/类型选择符(element选择器 )

**语法:**`元素名称{属性:属性值;}` **说明:** a)元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。 b)所有的页面元素都可以作为选择符; **用法:** 1)如果想改变某个元素得默认样式时,可以使用类型选择符; (如:改变一个div、p、h1样式) 2) 当统一文档某个元素的显示效果时,可以使用类型选择符 (如:改变文档所有p段落样式) **2) id选择器** 语法:`#id名{属性:属性值;}` 说明: A)当我们使用id选择符时,应该为每个元素定义一个id属性 如:`
` B)id选择符的语法格式是“#”加上自定义的id名 如:`#box{width:300px; height:300px;}` C) 起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字) 如:head标记 D)一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素对象。 E) 最大的用处:创建网页的外围结构。 **3)class选择器** 语法:`.class名{属性:属性值;}` 说明: A)当我们使用class选择符时,应先为每个元素定义一个类名称 B)class选择符的语法格式是:"如:`
"` 用法:class选择符更适合定义一类样式; **4)*通配符** 语法:`*{属性:属性值;}` 说明:通配选择符的写法是“*”,其含义就是所有元素。 用法:常用来重置样式。

5)群组选择器

语法:选择符1,选择符2,选择符3{属性:属性值;}
说明:当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组。
6) 包含选择器
语法:选择符1 选择符2{属性:属性值;}
说明:选择符1和选择符2用空格隔开,含义就是选择符1中包含的所有选择符2;
用法:当我的元素存在父级元素的时候,我要改变自己本身的样式,可以不另加选择符,直接用包含选择器的方式解决。

7) 伪类选择器(伪类选择符)
语法 :

a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;

说明:
A)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
B)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;
例如:a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同,只有鼠标划过变颜色。

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值