java开发工程师入门第二阶段(06-web前端(CSS))
文章目录
一.CSS
1.什么是CSS
CSS全称叫做层叠样式表stylesheet,是用来修饰HTML网页的一门技术,增强网页的展示能力。
主要是使用CSS属性来实现,最终可以将css代码和HTML网页代码进行分离,也可以提高css代码的复用性。
2.CSS的用法
( 需求::将单元格内文字居中显示 )
css的使用 td{text-align: center;}<table border="1" cellspacing="0" width="30%"><tr align="center">你好1 你好2 <tr style="text-align:center;">你好3 你好4
3.标签名选择器
( 选中网页中的所有元素 )
/* 在HTML中加入css*/span{ /* 标签名选择器,选中所有span */background-color: chartreuse; /* 背景颜色*/ font-size: 24px; /*字号*/font-family: 黑体;/* 字体 */}
4.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>
4.id选择器
id属性的值在整个HTML中作为唯一标识的存在。
可以通过ID值选中指定的元素(#id值)
<p id="p1">123/* 使用id选中元素 */#p1{text-indent: 200px; /* 首行缩进*/}
5.分组选择器
/* 分组选择器,将多个选择器选中的元素组合在一起,统一设置样式 */.a,.b,#p1{background-color: #000000;}
6.属性选择器
<style type="text/css">/* 选中指定的元素 */input[type='text']{background-color: #6495ED;}
7.盒子模型
指的是将HTML中所有元素都看成一个盒子,盒子与盒子之间的距离,包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
1.margin(外边距)
<input type="radio" name="sex" value="1" style="margin: 20px;"/>男
2.border(边框)
#div2{border:10px solid yellow;/*实线*/border:10px dashed yellow;/*点状*/border:10px dotted yellow;/*虚线*/}
3.padding(内边距)
<td style="padding: 20px;">用户名:
8.元素类型的补充
1.块级元素
默认情况下,块级元素独占一行(div , p,h1~h6)
可以设置宽和高。如果不设置宽和高,其中宽是默认填满父元素,而高是由内容
外边距、边框、内边距都可以设置
2.行内元素
默认情况下,多个行内元素处在同一行
不能设置宽和高
左右外边距、边框、内边距都可以设置,上下外边距设置无效
3.行内块元素
既具备行内元素的特征,还具备块级元素的特征
9.案例
<meta charset="utf-8">用户注册 /* 语法:选择器{样式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;/* 设置边框 */}<!-- 用户注册的数据需要提交给服务器入库,所以需要form --><form method="get" action="#"> <h2 style="padding-left: 130px;font-size:30px;">用户注册<input type="text" placeholder="用户名" class="a"/> <td class="xiao">支持中文、字母、数字、“-”、“_”的组合,4-20个字符 <input type="password" placeholder="设置密码" class="a" /> <td class="xiao">建议使用数字、字母和符号两种以上的组合,6-20个字符 <input type="password" placeholder="确认密码" class="a" /> <td class="xiao">两次密码输入不一致 <input type="password" placeholder="验证手机" class="a"/>或<a href="#"> 验证邮箱 <td id="note"><input type="checkbox" />我已阅读并同意 <a href="#">《京淘用户注册协议》 <input id="btn" type="submit" value="立即注册" />