CSS表格及表单美化

HTML 专栏收录该内容
3 篇文章 0 订阅

初识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);
    

径向渐变

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

浏览器内核

浏览器内核前缀
IETrident-ms-
ChromeWebkit-webkit-
SafariWebkit-webkit-
OperaBlink-o-
FirefoxMozill2a-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;
}*/
  • 8
    点赞
  • 0
    评论
  • 55
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值