1.CSS
概念： Cascading Style Sheets 层叠样式表。层叠的意思是，多个样式可以作用在同一个html的元素上，同时生效。
使用CSS的好处：
- 功能强大
- 将内容展示和样式控制分离
* 降低耦合度，解耦
* 让分工协作更容易
* 提高开发效率
1.1CSS的使用
CSS与html结合方式有两种，分别是内联样式和内部样式，以及外部样式。
- 内联样式
* 在标签内使用style属性指定css代码
* 如：<div style="color:red;">hello css</div>
* 不推荐使用，因为没有达到降低耦合的效果。
2. 内部样式
* 在head标签内，定义style标签，style标签的标签体内容就是css代码。
内部样式和内联样式的代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的学习</title>
<style>
div{
color:blue;
}
</style>
</head>
<body>
<!--内联样式-->
<div style="color:red;">我是被CSS内联样式定义的文字，hello css</div>
<!--内部样式：
在head标签内定义，定义style标签，style标签的标签体内容就是css代码-->
<div>我是被CSS内部样式定义的文字，hello css</div>
<div>我是被CSS内部样式定义的文字，hello cssssssss</div>
</body>
</html>
- 外部样式
外部样式的定义分为两步：
step1：定义css资源文件；
step2：在head标签内，定义link标签，引入外部的资源文件。
示例代码：
//a.css文件内容
div{
color:green;
}
//test1.html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS外部样式</title>
<link rel="stylesheet" href="css/a.css">
<!--也可以写为这样-->
<style>
@import "css/a.css";
</style>
</head>
<body>
<div>
被CSS外部样式定义的文字
</div>
</body>
</html>
注意：
- 1,2,3种方式 css作用范围越来越大
- 1方式不常用，后期常用2,3
- 第3种格式可以写为：
<style>
@import "css/a.css";
</style>
1.2 css语法
格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器:筛选具有相似特征的元素.
注意：每一对属性需要使用；隔开，最后一对属性可以不加；
1.3 选择器
选择器是用来筛选具有相似特征的元素。
选择器的分类：主要分为基础选择器和扩展选择器，基础选择器中又细分为id选择器、元素选择器、类选择器；扩展选择器又分为任意元素选择器、并集选择器、子选择器、父选择器、属性选择器、伪类选择器。
1.3.1 基础选择器
基础选择器中又细分为id选择器、元素选择器、类选择器。
- id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法：#id属性值{} - 元素选择器：选择具有相同标签名称的元素
* 语法： 标签名称{}
* 注意：id选择器优先级高于元素选择器 - 类选择器：选择具有相同的class属性值的元素。
* 语法：.class属性值{}
* 注意：类选择器选择器优先级高于元素选择器
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器学习</title>
<style>
#div1{
color:red;
}
div{
color:green;
}
.cls1{
color:blue;
}
</style>
</head>
<body>
<!--1.基础选择器
1.1 id选择器，选择具体的id属性值的元素
*语法：#id属性值{}
*建议：在一个html页面中，id值唯一
1.2 元素选择器
*语法：标签名称{}
*注意：id选择器优先级高于元素选择器
1.3 类选择器
*语法：.class属性值{}
*类选择器优先级高于元素选择器
-->
<div id="div1">我是id选择器的div1，我被设定的格式为这样。</div>
<div>我是被元素选择器div设定的格式。</div>
<p class="cls1"> 我是被类选择器cls1设定的格式。</p>
</body>
</html>
1.3.2扩展选择器
扩展选择器又分为任意元素选择器、并集选择器、子选择器、父选择器、属性选择器、伪类选择器。
-
选择所有元素的选择器：
* 语法： *{} -
并集选择器：
* 选择器1,选择器2{} -
子选择器：筛选选择器1元素下的选择器2元素
* 语法： 选择器1 选择器2{} -
父选择器：筛选选择器2的父元素选择器1
* 语法： 选择器1 > 选择器2{} -
属性选择器：选择元素名称，属性名=属性值的元素
* 语法： 元素名称[属性名=“属性值”]{} -
伪类选择器：选择一些元素具有的状态
* 语法： 元素:状态{}
* 如：<a>
超链接的状态有四种：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器学习</title>
<style>
/*子选择器*/
div p{
color:red;
}
/*父选择器*/
div > p {
border:1px solid
/*画一个边框*/
}
/*属性选择器*/
input[type="text"]{
border:5px solid;
}
/*伪类选择器*/
/*link表示链接的初始状态*/
a:link{
color:pink;
/*初始状态表示为粉色*/
}
/*hover表示鼠标悬浮在连接上时*/
a:hover{
color:red;
}
/*表示被点击时*/
a:active{
color:green;
}
a:visited{
color:orange;
}
</style>
</head>
<body>
<div>
<p>
演示子选择器，和父选择器
</p>
</div>
<p>我是对比项，我没被选中</p>
<input type="text" placeholder="演示属性选择器">
<input type="password">
<br>
<a href="http://www.baidu.com">测试伪类选择器的四种状态11</a>
</body>
</html>
1.4 常见的属性
- 字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：对其方式
- line-height：行高
- 背景
- background：
- 边框
- border：设置边框，符合属性
- 尺寸
- width：宽度
- height：高度
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性学习</title>
<style>
p{
color:blueviolet;
font-size:30px;
text-align: center;
line-height: 100px;
/*border:边框*/
border: 1px solid red;
}
div{
border:1px solid green;
height:200px;
width:200px;
background: url("img/login_bg.png") no-repeat center ;
}
</style>
</head>
<body>
<p>p属性测试</p>
<div>div属性测试</div>
</body>
</html>
- 盒子模型：控制布局
-
margin：外边距
-
padding：内边距
* 默认情况下内边距会影响整个盒子的大小，但可以用下面这行语句设置；
* box-sizing: border-box; 这个用来设置盒子的属性，让width和height就是最终盒子的大小 -
float：浮动
* left
* right
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
border:1px solid red;
}
.div1{
width:100px;
height:100px;
margin: 50px;
}
.div2{
width:200px;
height:200px;
margin-top: 50px;
padding:50px;
/* 内边距padding默认会影响盒子大小
但是可以通过设置盒子的属性，让width和height就是最终盒子的大小*/
box-sizing: border-box;
/*这样九设置好了*/
}
.div3{
float: left;
}
.div4{
float:left;
}
.div5{
float:right;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1"></div>
</div>
<div class="div3">用来测试float属性</div>
<div class="div4">本来我们会是每个盒子都占一行</div>
<div class="div5">但是加了float属性后，我们会根据属性值，排到相应位置，默认是在一行里</div>
</body>
</html>
2.案例
实现这么一个注册页面，可以巩固和利用上面学习到的知识。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的注册页面</title>
<style>
body{
background: url("img/register_bg.png") center;
}
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
.rg_layout{
width:900px;
height:500px;
border:8px solid #EEEEEE;
background-color:white;
margin:auto;
/*margin:auto能让外边距自动适应，达到居中的效果*/
padding:15px;
margin-top:100px;
}
.rg_left{
/*border:1px solid red;*/
float:left;
}
.rg_left > p:first-child{
margin:10px;
color:#FFD026;
font-size:20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size:20px;
}
.rg_center{
border:1px solid red;
float:left;
width:450px;
}
.td_left{
width:100px;
text-align: right;
height:45px;
}
.td_right{
padding-left: 50px;
}
/*并集选择器的使用*/
#username,#password,#emial,#name,#tel,#bir{
width:251px;
height:32px;
border:1px solid #A6A6A6;
border-radius:5px;
padding-left:10px;
}
#checkcode{
width:110px;
height:32px;
border:1px solid #A6A6A6;
border-radius:5px;
padding-left:10px;
}
#img_check{
height: 32px;
vertical-align: middle;
/*水平居中*/
}
#btn{
width:150px;
height:40px;
background-color:#FFD026;
border:1px solid #FFD026;
}
.rg_right{
margin:15px;
/*border:1px solid red;*/
float:right;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right > p a{
color:pink;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!-- 定义表单-->
<form action="#" method="post">
<table>
<tr>
<td class="td_left">
<lable for="username">用户名：</lable>
</td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用户名">
</td>
</tr>
<tr>
<td class="td_left">
<lable for="password">密码：</lable>
</td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td class="td_left">
<lable for="email">邮箱：</lable>
</td>
<td class="td_right">
<input type="email" name="email" id="emial" placeholder="请输入邮箱">
</td>
</tr>
<tr>
<td class="td_left">
<lable for="name">姓名：</lable>
</td>
<td class="td_right">
<input type="text" name="name" id="name" placeholder="请输入姓名">
</td>
</tr>
<tr>
<td class="td_left">
<lable for="tel">手机号：</lable>
</td>
<td class="td_right">
<input type="text" name="tel" id="tel" placeholder="请输入手机号">
</td>
</tr>
<tr>
<td class="td_left">
<lable for="gender">性别：</lable>
</td>
<td class="td_right">
<input type="radio" name="gender" id="gender" value="male"> 男
<input type="radio" name="gender" id="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left">
<lable for="bir">出生日期：</lable>
</td>
<td class="td_right">
<input type="date" name="bir" id="bir" placeholder="请输入生日">
</td>
</tr>
<tr>
<td class="td_left">
<lable for="checkcode">验证码：</lable>
</td>
<td class="td_right">
<input type="text" name="checkcode" id="checkcode">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="注册" id="btn">
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
