前端 Day2（CSS）
CSS
作用：页面美化和布局控制
概念： Cascading Style Sheets 层叠样式表
形象地说：就相当于样式模板（博客皮肤），做到皮肤与内容解耦。
先复习一下div标签:围堵标签，每一个div占满一整行。<div></div>
CSS的使用：CSS与html结合方式
1. 内联样式（不常用）
在标签内使用style属性指定css代码
如：<div style="color:red;">hello css</div>
2. 内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码。例如，下面代码里body中的所有div标签内容都会变成蓝色。
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>css内部样式测试代码</title> <style> div{ color:blue; } </style> </head> <body> <div>hello css</div> </body> </html>
总结：在head标签里定义一个style标签写一些css代码，可以控制同一个html文件中的body标签中的内容的样式。
3. 外部样式
另外写一个css资源文件（后缀为css）。然后在需要使用该样式的html文件中，head标签内，定义link标签，导入外部的css资源文件。
如：
写一个a.css的css样式文件：
div{ color:green; }
然后我们在需要使用这个样式的html文件的head标签内写link标签，在href中写明css资源的地址，引入该css样式：
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>css外部样式测试代码</title> <link rel="stylesheet" href="css/a.css"> </head> <body> <div>hello css</div> </body> </html>
css语法
格式：（内部样式在head标签里的style标签中写，外部样式直接在css文件中写）
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
注意：每一对属性需要使用分号隔开，最后一对属性可以不加分号
选择器：筛选具有相似特征的元素
简单地说，就是指定不同的内容应用不同的样式。分为两大种：
1. 基础选择器
优先级：id最高，类次之，元素最低。同种选择器，后写的覆盖先写的。
优先级的意思就是，同一块内容被多个选择器控制，优先应用id选择器的控制，其次是类，元素。
1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一（这也是与类选择器的区别）
语法：#id属性值{}
示例代码如下，可以看到id为a的内容被设置为红色，id为b的内容被设置为蓝色。
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>id选择器测试代码</title> <style> #a{ color:red; } #b{ color:blue; } </style> </head> <body> <div id="a">hello css</div> <div id="b">hello css</div> </body> </html>
效果图：
2. 元素选择器：选择具有相同标签名称的元素，例如div，p等等
语法： 标签名称{}
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>id选择器测试代码</title> <style> div{ color:red; } p{ color:blue; } </style> </head> <body> <div>hello css</div> <p>hello css</p> </body> </html>
3. 类选择器：选择具有相同的class属性值的元素。多个内容可以有相同的class。
语法：.class属性值{}
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>id选择器测试代码</title> <style> .a{ color:red; } .b{ color:blue; } </style> </head> <body> <div class="a">hello css</div> <div class="b">hello css</div> <p class="a">hello css</div> <p class="b">hello css</div> </body> </html>
2. 扩展选择器：
1. 选择所有元素：
语法： *{}
2. 并集选择器：
选择器1,选择器2{}
3. 子选择器：筛选选择器1元素下的选择器2元素
语法： 选择器1 选择器2{}
如下所示，只有div下的p才会被控制
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>子选择器测试代码</title> <style> div p{ color:blue; } </style> </head> <body> <div><p>hello css</p></div> <p>hello css</p> </body> </html>
4. 父选择器：筛选选择器2的父元素选择器1
语法： 选择器1 > 选择器2{}
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>父选择器测试代码</title> <style> div>p{ color:blue; } </style> </head> <body> <div>a <p>b</p> </div> <div>c <p>d <div>e</div> </p> </div> <p>f <div>g <p>h</p> </div> </p> </body> </html>
结果：bdh被控制
5. 属性选择器：选择元素名称，属性名=属性值的元素（多用于表单）
语法： 元素名称[属性名="属性值"]{}
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>属性选择器测试代码</title> <style> input[type="text"]{ border:5px solid; } </style> </head> <body> <input type="text"> <input type="password"> </body> </html>
6. 伪类选择器：选择一些元素具有的状态（多用于超链接标签）
语法： 元素:状态{}
如： <a>
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>状态选择器测试代码</title> <style> a:link{ color:pink; } a:hover{ color:red; } a:active{ color:green; } a:visited{ color:yellow; } </style> </head> <body> <a href="#">状态选择器测试</a> </body> </html>
属性
1. 字体、文本
font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高
2. 背景
background：
3. 边框
border：设置边框，符合属性
4. 尺寸
width：宽度
height：高度
5. 盒子模型：控制布局
margin：外边距
padding：内边距
注意：外边距内边距是一个相对的概念，要看具体视角。
默认情况下内边距会影响整个盒子的大小
box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
float：浮动
练习：
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>CSS综合练习：注册页面</title> <style> /*控制文字无间距*/ *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background: url("back.png") no-repeat center; } /*设置大框样式*/ .rg_layout{ width:900px; height:500px; border:8px solid #EEEEEE; background-color:white; margin:auto;/*居中*/ margin-top: 15px;/*上外边距*/ } /*左块结构*/ .rg_left{ float: left; padding-left: 10px ; } /*新用户注册字体样式*/ .rg_left > p:first-child{ color:#FFD026; font-size:20px; margin:15px; } /*USER REGISTER字体样式*/ .rg_left > p:last-child{ color:#A6A6A6; font-size:20px; } /*中块结构*/ .rg_center{ float: left; width: 450px; } /*中块表单label文字样式*/ .td_left{ width:150px; text-align:right; height: 45px; } /*中块表单rightinput框样式*/ .td_right{ padding-left: 50px; } #username,#password,#email,#name,#phonenumber,#birthday{ width: 251px; height: 32px; border: 1px solid #A6A6A6; border-radius: 5px; padding-left: 10px; } /*提交按钮样式*/ #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; } /*右块结构*/ .rg_right{ float: right; margin:15px; } /*已有帐号？立即登录字体样式*/ .rg_right > p{ font-size:15px; } /*立即登录字体样式*/ .rg_right > p a{ color:pink; } </style> </head> <body> <!--1个大块里面分左中右3个小块--> <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="get"> <table> <!--第一行：输入用户名--> <tr> <td class="td_left"><label for="username">用户名</label></td> <td class="td_right"><input type="text" id="username" name="username" placeholder="请输入账号"></td> </tr> <!--第二行：输入密码--> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"><input type="password" id="password" name="password" placeholder="请输入密码"></td> </tr> <!--第三行：输入邮箱--> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" id="email" name="email" placeholder="请输入Email"></td> </tr> <!--第四行：输入真实姓名--> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" id="name" name="name" placeholder="请输入真实姓名"></td> </tr> <!--第五行：输入手机号--> <tr> <td class="td_left"><label for="phonenumber">手机号</label></td> <td class="td_right"><input type="text" id="phonenumber" name="phonenumber" placeholder="请输入手机号"></td> </tr> <!--第五行：选择性别--> <tr> <td class="td_left"><label for="gender">性别</label></td> <td class="td_right"> <input type="radio" id="gender" name="gender" value="male" checked>男 <input type="radio" id="gender" name="gender" value="female">女 </td> </tr> <!--第六行：输入出生日期--> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" id="birthday" name="birthday"></td> </tr> <!--第七行：提交--> <tr> <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td> </tr> </table> </form> </div> </div> <!--右边--> <div class="rg_right"> <p>已有账号?<a href="#">立即登录</a></p> </div> </div> </body> </html>
