css 在html的基础上美化页面 ; css没有标签 但是有css的语法;
在使用html的标签中添加属性语法 属性名 : 属性值
css的使用几种方式选择器
在选择器中color表示字体的颜色 , background表示背景的颜色
1）在纯粹使用html的方式
语法：在html的body的标签里修饰美化 ;这时需要使用style属性
<div style="color: darkkhaki; font-size: 50px;">测试css的样式</div>
<span>测试css的第二种语法</span>
<!-- rel引入一个指定文件类型的固定值 -->
2）:使用css文件的连接的方式 在body中使用要修饰的内容 将如何修饰的效果写入到css文件在使用link进行引入该css的文件
在选择器的作用是增加了代码的复用性
在使用该方式的时候 rel="stylesheet" 样式表 必须使用该关键字 进行连接如果不使用无法引入该css文件 ; rel 是引入的作用 值是引入的是什么样的类型 这里是stylesheet样式表 href指的是哪个文件
<link rel="stylesheet" href="引入当前目录下的css文件"/>标签选择器
这个时候的选择器修饰的是body标签里的所有的内容
使用选择器必须在head标签里面,加<style>标签在该标签里使用选择器
如果在css中有多个属性那么就要使用选择器
3:class选择器
在哪个标签里加class哪个标签的内容被修饰 ; class的值可以有多个值
同时在head里使用class的选择器，进行修饰想要美化成想要的样子；修饰使用class标签的内容
4): Id选择器
通过ID的值当做选择器
注意 : 在这里的ID的值在一个文件中只能唯一 ,不能有重复的值 ;
<p id="p1">123</p>
/* 使用id选中元素 */
#p1{
text-indent: 200px; /* 首行缩进*/
}
这里选择器的前面要加#
5): 分组选择器
也就是多个选择器组合到一块且用(逗号) , 隔开
class的值 , id的值 等{
}
.id , #class{ }
6): 属性选择器
就是通过属性和修饰其的标签当做选择器 , 且标签和属性用 [ ] 隔开;
标签[ 属性="属性的值"] { }
input [type="text"] {
}
7): 标签选择器
这个时候的选择器修饰的是body标签里的所有的内容
执行的效果
盒子模型
| margin默认上下左右都有相应的距离margin-left 左边框 margin-right有边框margin-top 上边框 margin-buttom 下边框 |
这里的外边距不仅仅是框之间,表之间, 而是每一个元素, 因为css认为html的每一个元素都是一个盒子,width值的是框的长 heigth宽 border指定是边框的 粗细
padding指定是边框与框内的内容 margin值的是边框与边框之间(元素与元素之间)
边框的线
#div2{
border:10px solid yellow; / solid *实线*/
border:10px dashed yellow; / dashed *点状*/
border:10px dotted yellow; / dotted*虚线*/
}
这里的线必须放在选择器且和border一起使用
<td style="padding: 20px;">用户名:</td>
cellspacing 单元格之间的距离 ; 值如果为0那么里层的单元格聚会消失
在table标签里加入border="数字";就会出现单元格
加入cellspacing="0px" ; 之后 :
永和门店系统
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>永和大王门店系统</title>
<!—引入外部的css文件
<link rel="stylesheet" href="css/base.css"/>
-->
<!--通过style标签插入 css代码用来修饰html网页效果 -->
<style>
body{
font-size:8px;
width:280px;
margin:5px;
}
.please{
font-size:22px;
}
.me{
padding-left:60px;
}
.doorName{
font-size:10px;
}
.note{
text-indent:20px;
padding-top:5px;
padding-bottom:5px;
}
</style>
</head>
<body>
<div>顾客联</div>
<div class="please">请您留意取餐账单号</div>
<div class="me">自取顾客联</div>
<div class="doorName">永和大王（北三环西路店）</div>
<div class="doorName">010-62112313</div>
<div class="me">--结账单--</div>
<div class="please">账单号：P000010</div>
<div>账单类型：堂食</div>
<div>人数：1</div>
<div>收银员：张静</div>
<div>开单时间：2018-04-17 07:24:29</div>
<div>结账时间：2018-04-17 07:24:38</div>
<hr style="border:1px dashed;"></hr>
<table border="1" cellspacing="0">
<tr>
<td>数量</td>
<td>品项</td>
<td>金额</td>
</tr>
<tr>
<td>1</td>
<td>玉米肉松蛋饼2P <br> 1X --玉米肉松蛋饼<br /> 1X --现磨豆浆（热/甜）
</td>
<td>8.00</td>
</tr>
</table>
<hr style="border:1px dashed;"></hr>
<table border="1" cellspacing="0">
<tr>
<td>合计</td>
<td>8.00</td>
</tr>
<tr>
<td>微支付</td>
<td>8.00</td>
</tr>
</table>
<hr style="border:1px dashed;"></hr>
<div>打印时间：2018-04-17 07:24:38</div>
<hr style="border:1px dashed;"></hr>
<div class="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
<div>官网：www.yonghe.com.cn</div>
<div>加盟热线：86-21-60769397 或 86-21-60769002</div>
</body>
</html>
用户注册练习
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2GSUWOcu-1622525806218)(RackMultipart20210601-4-1w5z70a_html_ec76402a136d8bb6.png)]](https://img-blog.csdnimg.cn/20210601134046875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY=,size_16,color_FFFFFF,t_70)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<style>
/* 语法:选择器{样式1;样式2;样式3;} */
/* 统一网页风格 */
body{
font-family: "宋体";/* 统一字体 */
font-size: 15px;/* 统一字号 */
width: 500px;/* 统一宽度 */
padding-left: 100px;/* 设置左边距 */
}
/*修饰所有input的样式 */
.a{
height: 20px;/* 高度 */
width: 300px;/* 宽度 */
padding: 15px;/* 调整内容和边框的距离,内边距 */
font-size:20px ;/* 字号变大 */
margin: 10px;/* 调整盒子间的距离,外边距 */
}
/* 修饰所有的提示信息 */
.xiao{
font-size: 8px;/* 字体变小 */
color: grey;/* 字的颜色 */
padding-left: 30px;/* 左边距 */
}
/* 修饰同意 */
#note{
height: 60px;/* 高度 */
text-indent: 40px;/* 首行缩进 */
font-size: 12px;/* 字号变大 */
}
/* 修饰立即注册按钮 */
#btn{
background-color: #E64346;/* 背景色 */
font-size: 25px;/* 字号变大 */
color: white;/* 字的颜色 */
width: 360px;/* 设置宽度 */
height: 50px;/* 设置高度 */
border: #E64346;/* 设置边框 */
}
</style>
</head>
<body>
<!-- 用户注册的数据需要提交给服务器入库,所以需要form -->
<form method="get" action="#"> <!-- 指定提交数据的方式-->
<table>
<h2 style="padding-left: 130px;font-size:30px;">用户注册</h2>
<tr>
<td>
<input type="text" placeholder="用户名" class="a"/>
</td>
</tr>
<tr>
<td class="xiao">
支持中文、字母、数字、“-”、“_”的组合，4-20个字符
</td>
</tr>
<tr>
<td>
<input type="password" placeholder="设置密码" class="a" />
</td>
</tr>
<tr>
<td class="xiao">
建议使用数字、字母和符号两种以上的组合，6-20个字符
</td>
</tr>
<tr>
<td>
<input type="password" placeholder="确认密码" class="a" />
</td>
</tr>
<tr>
<td class="xiao">
两次密码输入不一致
</td>
</tr>
<tr>
<td>
<input type="password" placeholder="验证手机" class="a"/>
或
<a href="#"> 验证邮箱</a>
</td>
</tr>
<tr>
<td id="note">
<input type="checkbox" />
我已阅读并同意
<a href="#">《京淘用户注册协议》</a>
</td>
</tr>
<tr>
<td>
<!-- type类型必须是submit才能提交数据 -->
<input id="btn" type="submit" value="立即注册" />
</td>
</tr>
</table>
</body>
</html>
1497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
