一、今日内容
1. CSS学习
1. CSS介绍
2. CSS合HTML结合方式
3. CSS语法
4. 选择器
5. 属性
2. CSS案例
二、CSS学习
1.CSS介绍
1. CSS概念：Cascading Style Sheets 层叠样式表
* 层叠：多个样式可以作用在同一个html元素(标签)上，同时生效
2. 好处：
1. 样式更多，可叠加，功能强大
2. 将 内容展示与样式分离开
* 降低耦合度。解耦
* 让分工协作更容易
* 提高开发效率
2.CSS合HTML结合方式
（1）内联样式：在标签内使用style属性指定css代码
如下图：
（2）内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码
（3）外部样式
1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
外部样式的引用其实还有另一种方法，但是不常用，但是需要知道。
用style引用外部样式：
* 注意：
* 1,2,3种方式 css作用范围越来越大
* 1方式不常用，后期常用2,3
3.CSS语法
* 格式：
选择器 {
属性名1：属性值！；
属性名2：属性值2；
...
}
* 选择器：筛选具有相似特征的元素
* 注意：
* 每一对属性需要用；隔开，最后一对属性可以不加；
4.选择器
* 分类：
1. 基础选择器：
1. id选择器：选择具体的id属性值的元素，建议在一个html也买你中id唯一
* 语法：#id值 {}
2. 类选择器：选择具有相同的class属性值的元素
* 语法：.class {}
3. 元素选择器：选择具有相同标签名称的元素
* 语法：标签名 {}
2. 扩展选择器
1. 选择所有元素：
* 语法：* {}
2. 并集选择器：
* 语法：选择器1,选择器2 {}
3. 子选择器：筛选选择器1元素下的所有选择器2元素
* 语法：选择器1 选择器2 {}
4. 儿子选择器：选择所有紧接着选择器1元素之后的选择器2元素
* 语法：选择器1+选择器2 {}
5. 父选择器：筛选选择器2的父元素选择器1
* 语法：选择器1>选择器2 {}
6. 属性选择器：
* 语法：元素名称[属性名="属性值"] {}
7. 伪类选择器：选择一些元素具有的状态
* 语法：元素：状态 {}
* 如 <a>
* 状态：
* link：初始化的状态
* hover：鼠标悬浮状态
* action：正在访问状态
* visited：被访问过状态
5.属性
1. 字体、文本
* font-size：字体大小
* color：颜色
* text-align：设置他的子标签的对齐方式
* line-height：行高
2. 边框
* border：设置边框，复合属性（复合属性就是能设置多个属性值）
* 如：border: 1px solid red;
* border-radius：将边框的4个直角设置成圆弧
3. 尺寸
* width：宽度
* height：长度
4. 背景：
* background：设置背景图片
* 如：background：url("相对/绝对路径")；
* background-size：设置背景图片大小，需要先设置background
* 属性值：
* cover：背景图片自适应标签大小
5. 盒子模型：
* margin：外边距
* 属性值：
* auto：能够让盒子居中
* vertical-align:
属性值：
* middle：能让其垂直居中
* padding：内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
* float：浮动
* 属性值：
* left：向左浮动
* right：向右浮动
三、CSS案例
1.案例
用HTML和CSS写出如下界面：
2.代码：
（1）文件结构：
（2）登入界面.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="rg">
<!--左边的div-->
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<!--中间的div-->
<div class="rg_center">
<form action="#" method="get">
<table>
<!--第一行-->
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入账号"/></td>
</tr>
<!--第二行-->
<tr>
<td class="td_left"><label for="passwd">密码</label></td>
<td class="td_right"><input type="password" name="passwd" id="passwd" placeholder="请输入密码"/></td>
</tr>
<!--第三行-->
<tr>
<td class="td_left"><label>邮箱</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"/></td>
</tr>
<!--第四行-->
<tr>
<td class="td_left"><label>姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>
</tr>
<!--第五行-->
<tr>
<td class="td_left"><label for="phoneNum">手机号</label></td>
<td class="td_right"><input type="tel" name="phoneNum" id="phoneNum" placeholder="请输入手机号"/></td>
</tr>
<!--第六行-->
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right"><input type="radio" name="sex" value="male" checked/>男 <input type="radio" name="sex" value="female"/>女</td>
</tr>
<!--第七行-->
<tr>
<td class="td_left"><label>出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday"/></td>
</tr>
<!--第八行-->
<tr>
<td class="td_left"><label>验证码</label></td>
<td class="td_right"><input type="text" name="capter" id="capter"/> <img id="img_capter" src="img/verify_code.jpg"></td>
</tr>
<!--第九行-->
<tr align="center">
<td colspan="2"><input type="submit" id="but_sub" value="注册"/></td>
</tr>
</table>
</form>
</div>
<!--右边的div-->
<div class="rg_right">
<p>已有账号？<a href="https://www.baidu.com">立即登录</a></p>
</div>
</div>
</body>
</html>
（3）login.css
body {
background: url("../img/register_bg.png");
background-size: cover;
}
/*将左右的多段文字间的距离间隔调成0*/
p {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.rg {
border: #EEEEEE solid 8px;
width: 900px;
height: 500px;
/*让div水平居中*/
background-color: white;
margin: auto;
margin-top: 100px;
}
.rg_left {
width: 200px;
height: 80px;
/*border: red solid 1px;*/
float: left;
margin-right: 50px;
margin-left: 10px;
margin-top: 15px;
}
.rg_center {
float: left;
margin-top: 20px;
/*border: red solid 1px;*/
}
.rg_right {
width: 200px;
height: 50px;
/*border: red solid 1px;*/
float: right;
}
.rg_left p:first-child {
color: yellow;
}
.rg_left p:last-child {
color: #BCBCBC;
}
.rg_right p{
font-size: 12px;
float: right;
margin-top: 15px;
margin-right: 8px;
}
.td_left {
width: 100px;
height: 32px;
text-align: right;
}
.td_right {
width: 300px;
height: 40px;
padding-left: 25px;
vertical-align: middle;
}
#username,#passwd,#email,#name,#phoneNum,#birthday {
width: 230px;
height: 28px;
border: 1px solid #D2D2D2;
border-radius: 5px;
padding-left: 10px;
}
#capter {
width: 120px;
height: 28px;
border: 1px solid #D2D2D2;
border-radius: 5px;
padding-left: 10px;
}
#img_capter {
width: 100px;
height: 28px;
vertical-align: middle;
}
#but_sub {
width: 150px;
height: 35px;
background-color: yellow;
border: 1px;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/84722.html
