小白入门之前端网页技术CSS
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白入门之前端网页技术CSS相关的知识，希望对你有一定的参考价值。
文章目录
CSS技术
什么是CSS
CSS全称叫做层叠样式表stylesheet，是用来修饰html网页的一门技术，增强网页的展示能力。
主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。
CSS的用法
需求::将单元格内文字居中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的使用</title>
<!-- css方式4 实现css与HTML代码的分离，提高css代码的复用性-->
<link href="demo.css" rel="stylesheet"/>
<!-- css方式3 -->
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" width="30%">
<tr align="center"><!-- css方式1 -->
<td >你好1</td>
<td >你好2</td>
</tr>
<tr style="text-align:center;"><!-- css方式2 -->
<td >你好3</td>
<td >你好4</td>
</tr>
</table>
</body>
</html>
选择器
所谓的选择器就是在HTML中帮助我们选中想要修饰的标签。
标签名选择器
选中网页中的所有元素
<style> /* 在HTML中加入css*/
span{ /* 标签名选择器,选中所有span */
background-color: chartreuse; /* 背景颜色*/ font-size: 24px; /*字号*/
font-family: 黑体;/* 字体 */
}
</style>
class选择器
给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。
<p class="a b">123</p> <!-- b覆盖a-->
<style> /* 在HTML中加入css*/
/* 选择class=a的元素 */
.a{
background-color: cornflowerblue; /*背景颜色*/
color:red; /*字体颜色*/
}
.b{
background-color: lightsalmon;
color: black;
}
</style>
id选择器
id属性的值在整个HTML中作为唯一标识的存在。
可以通过ID值选中指定的元素（#id值）
<p id="p1">123</p>
/* 使用id选中元素 */
#p1{
text-indent: 200px; /* 首行缩进*/
}
分组选择器
/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */
.a,.b,#p1{
background-color: #000000;
}
属性选择器
根据属性条件选中符合条件的元素来设置样式（逗号隔开）
<style type="text/css">
/* 选中指定的元素 */
input[type='text']{
background-color: #6495ED;
}
</style>
盒子模型
指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vLAwyuck-1622525806196)(RackMultipart20210601-4-1w5z70a_html_8bf03415a97315e5.png)]](https://image.cha138.com/20210721/e8f391cdbeb8422d90921801ed80430c.jpg)
margin（外边距）
<input type="radio" name="sex" value="1" style="margin: 20px;"/>男
border（边框）
#div2{
border:10px solid yellow;/*实线*/
border:10px dashed yellow;/*点状*/
border:10px dotted yellow;/*虚线*/
}
padding（内边距）
<td style="padding: 20px;">用户名:</td>
元素类型的补充
块级元素
默认情况下，块级元素独占一行（div , p，h1~h6）
可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容
外边距、边框、内边距都可以设置
行内元素
默认情况下，多个行内元素处在同一行
不能设置宽和高
左右外边距、边框、内边距都可以设置，上下外边距设置无效
行内块元素
既具备行内元素的特征，还具备块级元素的特征
永和门店系统
<!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://image.cha138.com/20210721/907e0de3e3434f7a87bd3e73169d1a2c.jpg)
<!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>
以上是关于小白入门之前端网页技术CSS的主要内容，如果未能解决你的问题，请参考以下文章