web前端---css基础

一、CSS技术

1、什么是CSS

CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。
主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

2、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中帮助我们选中想要修饰的标签。
分类：

标签名选择器
class 选择器
id选择器
分组选择器
属性选择器

1、标签名选择器

选中网页中的所有元素，用span{格式代码}包起来

<style> /* 在HTML中加入css*//* 标签名选择器,选中所有span */span{background-color: chartreuse; /* 背景颜色*/                font-size: 24px; /*字号*/font-family: 黑体;/* 字体 */}
</style>

2、class选择器

给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。
可以通过class属性值来选中指定的元素（.class值）

<p class="a b">123</p> /*-- b覆盖a，等于class=“b”*/<style> /* 在HTML中加入css*//* 选择class=a的元素 */.a{background-color: cornflowerblue; /*背景颜色*/color:red; /*字体颜色*/}.b{background-color: lightsalmon;color: black;}</style>

3、id选择器

id属性的值在整个HTML中作为唯一标识的存在。
可以通过ID值选中指定的元素（#id值）

<p id="p1">123</p>
/* 使用id选中元素 */#p1{text-indent: 200px; /* 首行缩进*/}

4、分组选择器

分组选择器，将多个选择器选中的元素组合在一起，用逗号隔开（，），用统一设置样式。

.a,.b,#p1{background-color: #000000;
}

5、属性选择器

据属性条件选中符合条件的元素来设置样式（逗号隔开）
例如：标识[type=属性]｛格式代码｝

<style type="text/css">/* 选中指定的元素 */input[type='text']{ //input：输入框，text：普通文本background-color: #6495ED;}
</style>

6、选择器代码.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试css的高级选择器：分组选择器，属性选择器</title><!--html嵌入css--><style>div,#s1{ //分组选择器,div的组,id是s1的组color: #0000FF;}input[type=text]{ //属性选择器border: 2px solid red;border-radius: 12px;}a:hover {color:green;}</style></head><body><div >我是div1</div><!--独占一行，换行--><div >我是div2</div><div>我是div3</div><span id="s1"> 我是span1</span><!-- 不换行--><span>我是span2</span><span>我是span3</span><p>我是p</p><!--上下都空一行 --><input type="text" placeholder="我是input1" ></input><!-- 行插入--><!-- placeholder 属性提供可描述输入字段预期值的提示信息 --><input type="email" placeholder="我是input2" ></input><!-- 行插入--><div><p><b><a href="www.baidu.com" target="_blank">这是一个链接</a></b></p><!--target="_blank"：跳转链接，打开新的窗口 --></body>
</html>

补充、模拟服务器解析浏览器发来的数据

1、按照?切割字符串，得到a数组[http: //127.0.0.1:8848/java01/stu.html ,user=1&age=2&sex=1&Like=1&edu=2&time=2021-07-07]
2、重点解析数组里的第二部分a[1]
3、按照&切割字符串，得到b数组[user=1,age=2,sex=1,Like=1, edu=2,time=2021-07-07]
4、遍历数组，得到每个数据user=1age=2sex=1
5、再按照=切割[user,1] [age,2].....

public class Test {public static void main(String[] args) {String url = "http://127.0.0.1:8848/java01/stu.html?user=1&age=2&sex=1&Like=1&edu=2&time=2021-07-07";//1、按？切割字符串/*//1.1、按？切割，String[] a = url.split("\\?");System.out.println(Arrays.toString(s));//1.2、获取数组中的值，根据&切割，[ user=1,age=2,sex=1,Like=1, edu=2,time=2021-07-07]String[] b = a[1].split("\\&");System.out.println(Arrays.toString(b));*///上面两步合成一个String[] sp = url.split("\\?")[1].split("\\&"); System.out.println(Arrays.toString(sp));//3、遍历数组并将内容根据=进行切割for (String str:sp){ //遍历得到每个数据user=1 age=2 sex=1//4、根据=进行切割，[user,1][age,2]String data = str.split("=")[1];System.out.println(data);}}
}

三、盒子模型

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。

1、margin（外边距）

单选框，举例外边框20px

<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;">用户名:</td>

三、元素类型的补充

1、块级元素

默认情况下，块级元素独占一行（div , p，h1~h6）

可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容

外边距、边框、内边距都可以设置

2、行内元素

默认情况下，多个行内元素处在同一行

不能设置宽和高

左右外边距、边框、内边距都可以设置，上下外边距设置无效

3、行内块元素

既具备行内元素的特征，还具备块级元素的特征

四、用户注册练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册练习</title><link rel="stylesheet" href="2.css"></head><body><!-- 用户注册的数据需要提交给服务器入库,所以需要formmethod属性用来指定数据的提交方式action属性用来指定交给谁--><from><table><tr><td><h2 align="center">用户注册</h2> <!--align="center" 行内居中--></td></tr><tr><td><input type="text" placeholder="用户名" name="name" class="a" /></td></tr><tr><td class="b">支持中文、字母、数字、“-”、“_”的组合，4-20个字符</td></tr><tr><td><input type="password" placeholder="设置密码" name="password" class="a" /></td></tr><tr><td class="b">建议使用数字、字母和符号两种以上的组合，6-20个字符</td></tr><tr><td><input type="password" placeholder="确认密码" name="password" class="a" /></td></tr><tr><td class="b">两次密码输入不一致</td></tr><tr><td><input type="number" placeholder="验证手机" class="a" />或<a href="#">验证邮箱</a></td></tr><tr><td id="m"><input type="checkbox" />我已阅读并且同意<a href="#">《京东用户注册协议》<a /><!-- a：表示超链接  herf：超链接地址--></td></tr><tr><td><!-- type类型必须是submit才能提交数据 --><input type="submit" value="立即注册" /></td></tr></table></from></body>
</html>