们在上网的时候,经常有一些登录界面进行输入账号和密码,以及我们在网上填一些信息,这些功能的实现都是通过表单来完成的,今天我们就来讲讲表单。
表单不是指一个标签,而是指一类标签。
我们表单里所有的内容都要写在<form></form>标签中 form的action属性是将表单所填的内容发送到想要发送的后台,而method属性有两个值,分别是get和post。get和post的主要区别是get表单所传的内容会在地址栏里显示出来,并且有长度限制,而post表单所传的内容不会在地址栏显示出来,并且可以视为没有长度限制。一般系统默认get。当然get和post的细区别还是有的,在这里我就不赘述了。
其中最重要的是<input>标签,input标签也是单标签。input标签的type属性值不同,其产生的作用也不同:如:<input type="text">产生的是文本框,一般都是我们登录时输入的账号那样的文本框。<input type="password">,产生的是密码框,一般都是我们登录时输入密码的那个框框。<input type="submit">产生的是提交框,一般是我们登录的那个按钮。这些标签都有value属性,但只有提交框用最合适用,因为文本框和密码框虽然也会展示出来,但效果却差强人意,我们一般都用placeholder属性替代它。
不知大家有没有在网上做过选择题,作者是做过的。网页中的选择题也是用的input。
input的type属性值还有radio,是单选框,有几个选项就写几个input,但要注意每一个input里都要写相同的name属性和属性值,这样的话浏览器才会知道这些是同一道题。
既然有单选题那一定也有多选题了,type的checked属性是多选框,其和单选的用法一样,也都要注意name一样的为一道题,还有一个属性是checked=“checked”,这个可以设定默认选择的选项。
我们也一定遇到过选择文字就能勾选而不用非得去点选框的情况,其实input选择框只有被点击的时候才能选中,但有的时候太小不容易点击甚至有的根本没有显示出来,这样的话用户体验就会非常的差,所以我们引进了一个标签:<label></label>标签,这个标签可以实现点击文字就进行选择的功能,用法就是将input标签和文字写在同一个label标签中,注意每一个选项写一起。
我们来看一下代码和结果:
作者已经尽量去说清楚了,欢迎大家批评指教,希望多多关注[送心]
们学习如何应用CSS给元素添加边框。
CSS边框属性,允许我们指定一个元素边框的样式、宽度和颜色。
我们先来学习元素边框的样式。border-style 属性指定了要显示什么样的边框。允许使用以下的值:
dotted,定义一个点状的边框
dashed ,定义一个虚线边框
solid,定义一个实线边框
double,定义一个双倍的边框
none,定义无边框
hidden,定义一个隐藏的边框
我们来实验一下。
创建一个 009-css-borders 文件夹,在文件夹里创建一个 css-borders.html 文件和一个border-style.css 文件。
构建 html 基础代码,引入样式文件。
编写 p.dotted 回车,填入文本点状的边框。按照同样的方法,添加其他的几个边框结构。
<p>点状的边框</p>
<p>虚线边框</p>
<p>实线边框</p>
<p>双倍的边框</p>
<p>无边框</p>
<p>隐藏的边框</p>
<p>混合边框</p>
<p>速记边框</p>
在 css 里定义 p.dotted 选择器,声明样式 border-style: dotted。定义其他几个选择器,全部声明 border-style 属性,值分别为:dashed、solid、double、none、hidden。
在浏览器里查看结果,边框的效果都做好了。
border-style: none 和 border-style: hidden 视觉上都不显示边框,有什么区别呢?
在 html 里编写:table 大于 括号 tr 大于 td 乘以3 再乘以3 (table>(tr>td*3)*3)。回车,创建一个3行3列的表格。给 table 元素定义border属性,值为 1。 给第二行第一个和第二个td 定义 class属性,值分别为 lm、m。
在 css 里定义 table 选择器,声明样式 border-collapse: collapse,让表格线细一些。这个属性我们在后面会详细讲解。
定义 td.lm 选择器,声明样式 border-style: dashed。定义 td.m 选择器,声明样式 text-align: center。
看一下效果,左中和左上、中以及左下边框是相邻的,在这些单元格上定义边框样式一定会产生冲突。
给 td.m 选择器添加样式声明 border-style: none。
我们看,没有去掉任何边框。
再把 border-style 属性值改为 hidden。
我们再看,中间的 td 边框消失了,当然,左侧相邻的边框也消失了。
当表格单元格相邻边框产生冲突时,border-style: hidden 优先级最高,border-style: solid 优先级次之,border-style: none 优先级最低。
还是这个表格示例,单元格左中和中之间用点线来分隔。如何实现呢?
在 td.m 选择器里将 border-style 的值改为 dotted。
很显然,并不是我们要的效果。看来,得把单元格左中的右边线隐藏。如何控制一条边框线呢?
可以在 border-style 中间添加一个表示方位的词,就可以设置单个边框线了。
比如,给 td.lm 选择器声明 border-right-style 属性,就可以设置这个单元格右边框样式了,这里设置的值为 none。
效果实现了。
把这里的 border-right-style 的值设置为 hidden 是什么效果呢
通过这个例子发现,可以分别指定每个边框的样式。这些属性有 border-top-style、border-right-style、border-bottom-style、border-left-style,用来设置元素的上、右、下、左边框的样式。
除了单个样式属性外,border-style 的属性值,还可以使用混合的简写方法。有四种写法:
第一种写法:四个值,分别代表上边、右边、下边、左边的边框样式。从顶部开始,按照顺时针方向来设置值。比如 border-style: dotted solid double dashed,设置上边框为虚线、右边框为实线、下边框为双线、左边框为虚线。
第二种写法:三个值,分别代表上边、左右边、下边的边框样式。第一个值表示上边框的样式、第二个值表示左边和右边框的样式,第三个值表示下边框的样式。比如 border-style: dotted solid double,设置顶部边框为虚线、左右边框为实线,底部边框是双线。
第三种写法:两个值,分别表示上下边,左右边的边框样式。第一个值表示上下边框的样式、第二个值表示左右边框的样式。比如 border-style: dotted solid,设置顶部和底部的边框是点状的、右边和左边的边框是实心的。
第四种写法:一个值,表示四个边框的样式。比如 border-style: dotted,四个边都是点状边框。
在 html 里添加一个 p 元素,定义 属性。填入一些文本。
在 css 里定义 p.mix 选择器,声明样式 border-style: dotted dashed solid double。
最后一个段落的混合边框实现了。
除了设置边框样式,还可以设置边框的宽度。
border-width 属性用于设置四个边框的宽度。宽度可以被设置为一个特定的尺寸,以 px、em等为单位,或者使用三个预定义的值: thin、medium、thick——薄、中、厚。
给前三个 p 元素全部声明 border-width 样式属性,值分别为 5px,0.5em,thick。
三个段落的边框线宽度就添加好了。
和边框样式 border-style 属性一样,边框宽度的值也可以使用混合的简写方法,可以给 border-width 设置四个值、三个值、两个值或一个值。
给第四个 p 元素添加 border-width: 5px 10px; 样式。
我们看,这个边框宽度上下是 5 像素,左右是 10 像素。
再给最后一个 p 元素添加 border-width: 2px 3px 4px 5px 样式。
这样,四边不同的边框,就拥有了不同的宽度!
除了设置边框样式,还可以设置边框的颜色。
border-color 属性用于设置四个边框的颜色。可以通过颜色名称、十六进制颜色值、RGB颜色值来设置颜色,也可以通过 transparent 来设置透明。
给前三个 p 元素全部声明 border-color 样式属性,值分别为 red,#00ff00,rgb(0, 0, 255)。
三个段落的边框线颜色就添加好了。
和边框样式 border-style 属性一样,边框颜色的值也可以使用混合的简写方法,可以给 border-color 设置四个值、三个值、两个值或一个值。
给第四个 p 元素添加 border-color: purple orange 样式。
我们看,这个边框上下是紫色,左右是橙色。
再给最后一个 p 元素添加 border-color: red green blue yellow 样式。
这样,四边不同的边框,就拥有了不同的颜色!
和字体 font 属性一样,边框也可以使用速记属性。为了缩短代码,可以在一个 border 属性中指定 border-style、border-width、border-color 等单独的边框属性。比如:border: 5px solid red,表示设置元素的边框宽度为5像素,边框样式为实线,边框颜色为红色。
注意,border-style 是必须要声明的,其他两个可以省略,省略后会采用 1 像素、黑色线这两个默认值。
在 html 里添加一个 p 元素,定义 属性。填入一些文本。
在 css 里定义 p.shorthand 选择器,声明样式 border: 5px solid #ccc。
一行样式代码就实现了边框样式、宽度和颜色的设置!
这个简写的方法默认四个边,全部定义了相同的边框。能不能定义单个边呢?可以的!
很自然的猜到,通过声明 border-top,border-right,border-bottom,border-left 四个属性,值为上面简写的方式,就可以单独定义元素的某一条边了。
注释掉这行代码,再声明一个 border-bottom 属性,值同样是 5px solid #ccc。
一行代码,同样实现了一条底部的边框线
篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈字体设置Font&边框Border的基础用法。
<div style='font-family: sans-serif normal'></div>
可用字体:
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier
<div style='font-style:normal'></div>
文本倾斜:
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
<div style='font-variant:small-caps'></div>
normal 显示标准字体。
small-caps 显示小型大写字母的字体。
<div style='font-weight:normal'></div>
normal 标准的字符
bold 粗体字符
bolder 更粗的字符
lighter 更细的字符
也可以使用数字表示,范围为100~900
<div style='font-size:60px'></div>
smaller 变小
larger 变大
length 固定值
而且还支持百分比
首先说一下边框风格,它的风格比较多,常用的一般是实线为主:
<div style='border-style:none'></div>
hidden 隐藏边框
dotted 点状边框
dashed 虚线边框
solid 实线边框
double 双线边框
groove 3D凹槽边框
ridge 3D垄状边框
inset 3D inset边框
outset 3D outset边框
边框也有四面,所以也会有上下左右
所以有时候为了更精确定位并修改样式可以使用:
border-top-style 上边框样式
border-right-style 右边框样式
border-bottom-style 下边框样式
border-left-style 左边框样式
先定义边框的宽度 风格和颜色,然后定义边框的其它属性。
<div style='border-radius:25px;'></div>
2).边框阴影
<div style='box-shadow:1px 2px 2px 2px red'></div>
参数含义:
边框各个方向的大小和颜色
3).边框图片
<div style='border-image:url(1.png) 30 30 10 round'></div>
参数含义:
边框图片的路径
图片边框向内偏移
图片边框的宽度
边框图像区域超出边框的量
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
这篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置,希望让大家对CSS选择器有个简单的认识和了解。
****看完本文有收获?请转发分享给更多的人****
IT共享之家
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/
*请认真填写需求信息,我们会在24小时内与您取得联系。