CSS
概念:
Cascading Style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html元素上,同时生效好处:1.功能强大 2.将内容展示和样式控制分离,降低耦合度,提高开发效率
三种样式
1.行内有效
2.当前页面有效 :外部样式
3.所有引入均有效:
step1:定义CSS资源文件
step2:在head标签内,定义link标签,引入外部资源文件
<body>
<div style="color:red;">1111 word</div>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
color:blue;
}
</style>
</head>
<body>
<div>helloo 1212 word</div>
</body>
</html>
//-----------css1.css-----------
div{
color:green;
}
//-----------css.html-----------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="CSS/css1.css">
</head>
<body>
<div>1111 word</div>
<div>222 word</div>
</body>
</html>
CSS语法规则
格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
·····
}
注意:每一对属性需要用分号;隔开,一对键值对之间用的是:冒号
选择器:筛选具有相似特征的元素
选择器
基础选择器
基础选择器: id选择器 / 元素选择器 / 类选择器
id选择器:选择具体的id属性值的元素 //建议在一个html中ID唯一
语法:#id属性值{ ..... }
注意:优先级最高
元素选择器:具有相同标签名称的元素
语法: 标签名称{ ... }
注意: 优先级最低
类选择器:选择具有相同的class属性值元素
语法:{ ... }.class属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#div1{
color:red;
}
.classname{
color:yellow;
}
div{
color:blue;
}
</style>
</head>
<body>
<div id="div1">
变成红色 <br>
变变变
</div>
<div class="classname">
变黄
</div>
<div>
变蓝
</div>
</body>
</html>
扩展选择器
* : 选择所有元素
语法: *{....}
并集选择器 : 并集 都选上
语法: 选择器1,选择器2{ ... .}
子选择器: 筛选选择器1下的选择器2元素
语法: 选择器1 选择器2 {...}
父选择器: 筛选 选择器2的父亲 选择器1的元素
语法: 选择器1>选择器2{....}
属性选择器: 选择元素名称,属性名=属性值的元素
语法: 元素名称[属性名="属性值"]{...}
伪类选择器:选择一些元素具有的状态
常用于超链接等11_10:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
input[type="text"]{
border:5px solid;
}
</style>
</head>
<body>
<input type="text">
<br>
<input type="password">
</body>
</html>
属性
字体,背景,边框,尺寸
盒子模型
以红点处为对象,此时的外边距和内边距如图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
border:1px solid blue;
}
.divbig{
width:200px;
height:200px;
}
.divsm{
width:100px;
height:100px;
margin:50px;
}
</style>
</head>
<body>
<div class="divbig">
<div class="divsm"></div>
</div>
</body>
</html>
CSS举例 - 注册页面
分析页面
html阶段
form输出表单 + br控制的格式 不太好 后来采用tr td写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<div class="rg_layout">
<div class="rg_lefe">
<p>新用户注册</p>
<br>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<form action="#" method="get">
<lael for="first">用户名</lael>:<input type="text" name="username" placeholder="请输入用户名" id="first">
密码:<input type="password" name="password" placeholder="请输入密码">
<br>
性别:<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender value="femal"> 女
<br>
爱好:<input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="java" checked>Java
<input type="checkbox" name="hobby" value="game">游戏
<br>
图片上传:<input type="file" name="file">
<br>
隐藏域:<input type="hidden" name="id" value="偷偷上传">
<br>
取色器:<input type="color" name="color">
<br>
年月日:<input type="date" name="ymd">
<br>
年月日秒:<input type="datetime-local" name="birthday">
<br>
邮箱:<input type="email name="email">
<br>
年龄:<input type="number" name="age">
<br>
<input type="submit" value="登陆">
<input type="button" value="一个按钮">
<input type="image" src="./resource/picture/picturename.png">
</form>
</div>
<div class="rg_right">
<p>已有账号<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
td tr表格写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<div class="rg_layout">
<div class="rg_lefe">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<form action="#" method="get">
<table>
<tr>
<td><label for="username">用户名:</label></td>
<td><input type="text" name="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td><label for="password">密码:</label></td>
<td><input type="password" name="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td><label for="username">用户名:</label></td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value=femal"> 女</td>
</tr>
<tr>
<td><label for="hobby">爱好:</label></td>
<td><input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="java" checked>Java</td>
</tr>
<tr>
<td><label for="ymd">年月日:</label></td>
<td><input type="date" name="ymd"></td>
</tr>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="email" name=email"></td>
</tr>
<tr>
<td><label for="age">年龄:</label></td>
<td><input type="number" name="age"></td>
</tr>
<tr>
<td><input type="submit" value="登陆"></td>
</tr>
</table>
</form>
</div>
<div class="rg_right">
<p>已有账号<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
添加部分CSS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<style>
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
body{
background:url("./picture.jpg") no-repeat center;
}
.rg_layout{
width:900px;
height:500px;
border:8px solid #EEEEEE;
background-color:white;
/* div水平居中 */
margin:auto;
margin-top:70px;
}
.rg_left{
border:1px solid red;
float:left;
margin:15px;
}
.rg_left > p:first-child{
color:#FFD026;
}
.rg_left > p:last-child{
color :A6A6A6;
font-size:20px;
}
.rg_center{
border:1px solid red;
float:left;
width:450px;
margin:50px;
}
.rg_right{
border:1px solid red;
float:right;
margin:15px;
}
.rg_right > p:first-child{
font-size:15px;
}
.rg_right p a{
color:green;
}
</style>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<form action="#" method="get">
<table>
<tr>
<td><label for="username">用户名:</label></td>
<td><input type="text" name="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td><label for="password">密码:</label></td>
<td><input type="password" name="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td><label for="username">用户名:</label></td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value=femal"> 女</td>
</tr>
<tr>
<td><label for="hobby">爱好:</label></td>
<td><input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="java" checked>Java</td>
</tr>
<tr>
<td><label for="ymd">年月日:</label></td>
<td><input type="date" name="ymd"></td>
</tr>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="email" name=email"></td>
</tr>
<tr>
<td><label for="age">年龄:</label></td>
<td><input type="number" name="age"></td>
</tr>
<tr>
<td><input type="submit" value="登陆"></td>
</tr>
</table>
</form>
</div>
<div class="rg_right">
<p>已有账号<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>