CSS表格及表单美化

最新推荐文章于 2025-04-24 14:07:49 发布

Super_Robot

最新推荐文章于 2025-04-24 14:07:49 发布

阅读量8.7k

点赞数 12

分类专栏： HTML 文章标签：表格表单列表字体高级选择器

本文链接：https://blog.youkuaiyun.com/Super_Robot/article/details/91356985

版权

HTML 专栏收录该内容

3 篇文章

订阅专栏

初识CSS

CSS：Cascading Style Sheet 级联/层叠样式表

CSS的文件格式：.css

前端的组成：

结构语言：HTML (盖房子、毛坯房) 涉及到布局设计

表现语言：CSS (装修)

行为语言：JavaScript (安装点电梯… 基于事件的)

CSS表格及表单美化

有效的传递页面信息

使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户

可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容

具有良好的用户体验

<span> 标签的作用

能让某几个文字或者某个词语凸显出来

<span>字体</span>
<p>凸显<span class="show">“字体”</span></p>

font属性

font-size属性

单位

px(像素)还有em、rem、cm、mm、pt、pc

h1{font-size:12px;}

font-style属性

normal(默认)、italic(倾斜)和oblique(通用倾斜)

h1{font-style:oblique;}

font-family属性

h3{
    /*font-family: "楷体";*/
    /*font-family: "宋体";*/
    /*font-family: "\u5b8b\u4f53";*/
    /* 如果这样设置是为了防止当前面的字体无法使用时  可以作为替换性内容 */
    /* 一般会对中文和英文分别设置字体 */
    font-family: tahoma, arial, "Hiragino Sans GB", "宋体", sans-serif;
}

font-weight属性

值	说明
normal	默认值，定义标准的字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100、200、300、400……	定义由细到粗的字体400等同于normal，700等同于bold

p{
    /*font-weight: bold;*/
    /* 加粗 */
    /*font-weight: 700;*/
    /* 更细的 */
    font-weight: lighter;
    font-weight: normal;
}

font属性

字体属性的顺序：字体风格->字体粗细->字体大小->字体类型

p span{font:oblique bold 12px "楷体"}
 /* font-size: 12px/（行高）line-height: 1.5; */
font: 12px/1.5 tahoma,arial,"\5b8b\4f53";

文本属性

color属性

RGB

十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

rgb(r,g,b):正整数取值为0~255

RGBA

在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0~1

color:#00ff00;
color:rgb(204,232,207);
color:rgba(204,232,207,0.5)

也可使用引文单词调用，但是种类不多

水平对齐方式

text-align属性(必须保证要设置的对齐文字是处于块元素内的)

水平对齐方式

p{
    /*text-align: left;*/
    /*text-align: right;*/
    /*text-align: center;*/
    /* 两端对齐 */
    /*text-align: justify;*/
}

首行缩进

text-indent：2em; em相对值也可以是px

p{
    font-size: 16px;
    /* 缩进 你根据字体大小计算缩进值 */
    /* px是绝对单位 */
    /*text-indent: 32px;*/
    /* em是相对单位 它会以当前字体大小进行计算 */
    text-indent: 2em;
}

行高

line-height : px
行高平均分配在文字的上下方

line-height: 30px;

文本装饰

text-decoration属性

文本装饰

span{
    /* 下划线 */
    /*text-decoration: underline;*/
    /* 上划线 */
    /*text-decoration: overline;*/
    /* 删除线：中划线 */
    /*text-decoration: line-through;*/
    /* 普通文字默认情况下为none */
    text-decoration: none;
}

a{
    /* 超链接标签默认文字拥有下划线  一般我们会对其进行下划线去除 */
    text-decoration: none;
}

垂直对齐方式

vertical-align属性：middle(中)、top(上)、bottom(下)

vertical-align:middle;

文本阴影

text-shadow：color x-offset y-offset blur-radius;

color:阴影颜色

x-offset X轴位移，用来指定影音水平位移量

y-offset Y轴位移，用来指定影音垂直位移量

blur-radius 阴影模糊半径，代表阴影向外模糊的模糊范围

caniuse.com 网站搜索支持的属性

超链接属性的使用

伪类样式

标签名：伪类名{声明;}

伪类样式

a:hover{
	color:#B46210
	text-decoration:underline;
}

设置伪类的顺序：a：link -> a:visited -> a:hover ->a:active

鼠标指针

小手型指针
```
/* pointer 小手 */
cursor: pointer;
```
wait 加载中
help 帮助带问号
text 文本光标型
crosshair 十字型
default 默认光标样式

背景样式

背景属性的使用

背景颜色

background-color
```
background-color:#000000;
```

背景图像

background-image
```
background-image:#111111
```

背景图像

background-image属性

background-image：url(../image/picture.jpg);

背景重复方式

background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat-x：不平铺，即显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

background-repeat:no-repeat;

背景定位

background-position属性

Xpos Ypos	单位：px，Xpos表示水平位置，Ypos便是垂直位置
X% Y%	使用百分比表示背景的位置
X、Y方向关键词	水平方向的关键词：left、center、right 垂直防线的关键词：top、center、bottom

background-position:20px 20px;

背景属性

background属性

background：#000000(背景颜色) url(../image/picture.jpg)(背景图像) 200px 20px(背景定位)  no-repeat(背景不重复显示)

背景尺寸

background-size

属性值	描述
auto	默认值，使用背景图片保持原样
percentage	用百分值时，根据元素宽度来计算显示比值的
cover	保持图片原有尺寸，让背景图片填充
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽高比合适所定义背景的区域

background-size:auto;
background-size:50%(宽) 50%(高);
background-size:50px 100px;

线性渐变

颜色沿着一条直线过度：从左到右、从右到左、从上到下等

/*position渐变方向,color颜色*/
linear-gradient(position,color1,color2,...)
/*上下*/
background:linear-gradient(to top,red,green);
/*左右*/
background:linear-gradient(to left,red,green);

径向渐变

圆形或椭圆形渐变，颜色不在沿着一条直线变化，而是从一个起点朝所有方向混合

浏览器内核

浏览器	内核	前缀
IE	Trident	-ms-
Chrome	Webkit	-webkit-
Safari	Webkit	-webkit-
Opera	Blink	-o-
Firefox	Mozill2a	-moz-

兼容Webkit内核的浏览器
-webkit-linear-gradient(position,color1,color2,...)

列表

列表的定义

列表就是信息资源的一种展示形式

以列表的样式显示，可以使信息结构化条理化，便于浏览者能更好的获取信息

列表的分类

无序列表
有序列表
定义列表

无序列表

无序列表的特性

没有顺序，每个<li>标签独占一行(块元素)
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

/*ul标签只能嵌套li标签*/
<ul>
	<li>内容一</li>
	<li>内容二</li>
	<li>内容三</li>
</ul>
<style>
ul{
    /* 它其实是三个子属性的集合体  但是通常用它来去除列表前缀符号 */
    list-style: none;
    /*list-style: amharic;*/
}
</style>

有序列表

有序列表的特性

有顺序，每个<li>标签独占一行(块元素)
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等

<ol>
	<li>内容一</li>
</ol>

定义列表

定以列表的特性

没有顺序，每个<dt>标签、<dd>标签独占一行(块元素)
默认么有标记
一般用于一个标题下有一个或多个列表项的情况

<dl>
	<dt>水果</dt>
	<dd>苹果</dd>
	<dd>桃子</dd>
</dl>

列表样式

值	说明	语法示例
none	无标记符号	list-style-type:none
disc	实心圆，默认类型	list-style-type:disc
circle	空心圆	list-style-type:circle
square	实心正方形	list-style-type:square
decimal	数字	list-style-type:decimal

li{
	list-style:none;
}

表格

基本结构

行(tr)
列(td)
单元格

<table> /*表格标签*/
	<tr> /*行标签*/
		<th>第一行第一列单元格标题</th> /*单元格标签*/
		<th>第一行第二列单元格标题</th>
		<th>第一行第三列单元格标题</th>
	</tr>
	<tr>
		<td>第一行第一列的单元格内容</td>
		<td第一行第二列的单元格内容</td>
		<td>第一行第三列的单元格内容</td>
	</tr>
</table>

表格的跨列(colspan)

<table>
	<tr>
		<td colspan="n"(所跨的列数)>单元格内容</td>
	</tr>
	<tr>
		<td>单元格内容</td>
	</tr>
</table>

表格的跨行(rowspan)

<table>
	<tr>
		<td rowspan="n"(所跨的行数)>单元格内容</td>
	</tr>
	<tr>
		<td>单元格内容</td>
	</tr>
</table>

表格的跨行和跨列

<tr>
	<td colspan="3">学生成绩</td>
</tr>
<tr>
	<td rowspan="2">张三</td>
	<td>语文</td>
	<td>98</td>
</tr>

表单

<from name="from1" method="post" action = "result.html">
	<p>名字：<input name="name" type="text"> </p>
	<p>名字：<input name="pass" type="password"> </p>
	<p>
	  <input type="submit" name="Button" value="提交"/>
	  <input type="reset" name="Reset" value="重填"/>
	</p>
</form>

name 表名
moetod 提交方式(post隐藏账号密码)/(get显示账号密码)
action 向何处表单发送数据
type 元素类型
name 元素名称
value input的元素值

文本框

<input type="text" name="userName" value="用户名" size="30" maxlength="20"/>

type=“text” 文本框
name 文本框名称
value 用户名
size 文本框长度取值范围[1-7]
maxlenght 文本框可输入字符最大值

密码框

<input type="password" name="pass" size="20">

type=“password” 密码框
name 密码框名称
size 密码框的长度

单选框

<input name="gen" type="radio" value="男" checked />男
<input name="gen type="radio" value="女" />女

name 值一定要设置成相同的，否则不能达成单选

type=“radio” 单选按钮框

value 值

checked 单选按钮选中的状态

复选框

<input type="checkbox" name="interset" value="sports"/> 运动
<input type="checkbox" name="interset" value="talk" checked />聊天
<input type="checkbox" name="interset" value="play" checked />玩游戏

checked 复选框选中的状态

列表框（下拉菜单）

<select name="列表名称" size="行数">
<option value="选项的值" selected>……</option>
<option value="选项的值">……</option>
</select>

select 列表框
option 选项
selected 默认选中的项

按钮

<input type="reset" name="butReset" value="reset按钮"/>
<input type="submit" name="butSubmit" value="submit按钮"/>
<input type="button" name="butButton" value="button按钮"/>
<!-- 未来结合js使用 -->
<input type="button" value="普通按钮" />
<br/>
<from action="success.html">
	用户名：<input type="text" name="username" value="张三"/>
	<!-- 提交表单 -->
	<input type="submit" name="butSubmit" value="提交"/>
	<!-- 效果等同于提交按钮 但是可以设立图片 -->
	<input type="image" src="login.gif"/>
	<!-- 重置按钮 可以恢复为表单初识的状态 -->
	<input type="reset" value="重置"/>
	<!-- button系列的按钮 -->
    <!-- 默认效果和提交按钮一样 -->
    <button type="submit">提交按钮</button>
    <button type="button">普通按钮</button>
    <button type="reset">重置</button>
</from>

type=“reset” 重置按钮
type=“submit” 提交按钮
type=”button” 普通按钮
type=“image” 图片按钮
name= 传输时的键名
value 按钮上显示的文字

表单提交给服务器是的数据是以name值加上value值提交数据的,是一组键值对

图片按钮

<input type="image" src="images/login.jpg">

type=“image”图片按钮
src 图片路径

多行文本域

<textarea name="showText" cols="x" rows="y" style:resize:none;>文本内容</textarea>

textarea 多行文本域
cols 显示的列数
rows 显示的行数
style:resize:none; 可以取消可缩放效果

文件域

<from action="" method="post">
<p>
<input type="file" name="files"/>
<input type="submit" name="upload" value="上传"></p>
</form>

type=“file” 文件域

邮箱

<p>邮箱：<input type="email" name="email"/></p>
<input type="submit"/>

type=“email” 邮箱

会自动验证Email地址格式是否正确

网址

<p> 请输入你的网址：<input type="url" name="userUrl"/></p>
<input type="submit"/>

type=“url” 网址

会自动验证URL地址格式是否正确

时间

<input type="date" name="user_date" />
<input type="month" name="user_date" />
<input type="week" name="user_date" />
<input type="time" name="user_date" />
<input type="datetime-local" name="user_date" />

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime-local - 选取时间、日、月、年（本地时间）

数字

<p>请输入数字：<input type="number" name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>

type=“number” 数字
min 允许的最小值
max 允许的最大值
step 合法的数字间隔

滑块

<p>请输入数字：<input type="range" name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>

type=“range” 滑块
min 允许的最小值
max 允许的最大值
step 合法的数字间隔

搜索框

<p>请输入搜索的关键词：<input type="search" name="sousuo"/></p>
<input type=="submit">

表单高级应用

/*只读*/
<input name="name" type="text" value="张三" readonly>
/*禁用*/
<input type="submit" disabled value="保存">

readonly 只读

disabled 禁用

隐藏域

<input type="hidden" value="666" name="userid">

它不会显示出来，但是如果绑定好name

表单元素的标注

增强鼠标的可用性

自动将焦点转移到与该标注相关的表单元素上

/*for属性用来关联表单元素的id属性*/
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>

for=“id” 表单元素的id

id=“male”表单元素id

CSS3的高级选择器

选择器：选中要被设置样式的标签

基本选择器

标签选择器
类选择器
ID选择器

高级选择器

层次选择器
结构伪类选择器
属性选择器
复合选择器

层次选择器

后代选择器

E F表示选择E选择器下的F选择器

body p{background:red;}

子选择器

E>F 表示选择E选择器下的F选择器(只会选择直接子元素)

body>p{background:red;}

相邻兄弟选择器

E+F表示选择E选择器后紧挨着的F选择器内容

.active+p{background:green;}

通用兄弟选择器

E~F表示选择E选择器后的所有F选择器内容

.active~p{background:yellow;}

结构伪类选择器

<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>使用CSS3结构伪类选择器</title>
</head>
<body>
	<p>p1</p><p>p2</p><p>p3</p>
	<ul>
		<li>li1</li><li>li2</li><li>li3</li>
	</ul>
</body>
</html>

结构伪类选择器

/*第一个p标签变成红色*/
/*父级里面第一个子元素*/
p:first-child{
	background:red;
}
/*第一个li标签变成红色*/
li:first-child{
	background:red;
}
/*最后一个li标签变成红色*/
li:last-child{
	background:red;
}
/*第二个li标签变成绿色*/
li:nth-child(2){
	background:green;
}

/*父级里面第一个类型是p的子元素*/
p:first-of-tyype{
	background:blue;
}

使用E:F nth-child(n) 和E Fnth-of-type(n) 关键点

E:Fnth-child(n)在父级里从一个元素开始查找，不分类型

E:Fnth-of-type(n)在父级里先看类型，在看位置

属性选择器

a{id}{background:yellow}

a[id=first]{
	background:red;
}

a[href^=http]{brackground:red;}

a[href&=png]{background:red;}

a[href*=links]{background:red;}

复合选择器

并集选择器

E,F 表示E和F选择器都被选中
交集选择器(小心语法)

其他选择器类选择器/ID选择器

例如：p.div(X)

p.active

/*1.使用并集选择器将p选择器和ul选择器的范围内背景颜色都设置为蓝色*/
/*p,ul{
background: green;
}*/

/*2.使用交集选择器将p选择器和.active选择器的范围内公共的交集部分颜色设置为蓝色*/
/*p.active{
background: red;
}*/