概念
CSS：页面美化和布局控制
Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
好处
功能强大
将内容展示和样式控制分离
- 降低耦合度，解耦
- 让分工合作更容易
- 提高开发效率
CSS的使用：CSS与html结合方式
内联样式
在标签内使用style属性指定css代码
如：< div style=“color: red;”>内联样式< /div>
内部样式
在head标签内，定义style标签，style的标签的标签体内容就是css代码
如：
<style type="text/css">
h1{
font-size: 12px;
color: red;
}
</style>
<h1>标题1</h1>
外部样式
定义css资源文件
在head标签内，定义link标签，引入外部的资源文件（程序先加载CSS文件）
-
demo01.css文件：
h1{ color: #FF0000; font-size: 78px; } -
demo01.html文件
<link type="text/css" rel="stylesheet" href="./css/demo01.css"> <h1>标题1</h1>
注意：css作用范围 内联样式 < 内部样式 < 外部样式
内联样式不常用
外部样式可以写为：（先加载HTML结构，再加载CSS文件）
<style>
@import "css/demo01.css";
</style>
css语法
格式：
选择器{
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器：筛选具有相似特征的元素
注意：每一对属性需要使用 ; 隔开，最后一对属性可以不加
选择器：筛选具有相似特征的元素
分类
-
基本选择器
- id选择器：选择具体的id属性值的元素,建议在一个html页面中id值唯一
语法：#id属性值{} - 元素选择器：选择具有相同标签名称的元素
语法：标签名称{}
注意：id选择器优先级要高于元素选择器 - 类选择器：选择具有相同的class属性值的元素
语法：. class属性值{}
注意：类选择器优先级要高于元素选择器
- id选择器：选择具体的id属性值的元素,建议在一个html页面中id值唯一
-
扩展选择器
- 选择所有元素：
语法：*{} - 并集选择器：
语法：选择器1,选择器2{} - 子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2{} - 父选择器：筛选选择器2的父元素选择器1
语法：选择器1 > 选择器2{} - 属性选择器：选择元素名称，属性名=属性值的元素
语法：元素名称[属性名=“属性值”]{} - 伪类选择器：选择一些元素具有的状态
语法：元素:状态{}
如：< a>
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
- 选择所有元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
/* 标签（元素）选择器 */
h1{
font-size: 34px;
color: #FF0000;
border: 3px solid;
border-color: red;
}
/* id选择器 */
#test1{
font-size: 34px;
color: green;
border: 3px solid;
border-color: red;
}
/* 类选择器 */
.test2{
font-size: 24px;
color: red;
border: 3px solid #008000;/* 边框实线 */
}
/* 并集选择器 */
h1,h2{
font-size: 34px;
color: green;
border: 3px solid;
border-color: red;
}
/* 子选择器 */
div p{
color: #008000;
}
/* 父选择器 */
div>p{
border: 1px solid;
}
/* 属性选择器 */
input[type='text']{
border: 5px solid;
}
/* 伪类选择器 */
a:link{
color: #008000;
}
a:hover{
color: #FFFF00;
}
a:active{
color: #FF0000;
}
a:visited{
color: #aa55ff;
}
</style>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<div id="test1">div1</div>
<div class="test2">div2</div>
<div>
<p>标签1</p>
</div>
<p>标签2</p>
<input type="text"/>
<input type="password"/>
<a href="#">超链接</a>
</body>
</html>
属性
- 字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：对齐方式
- line-height：行高
- 背景
background：- no-repeat 背景图片不重复
- 边框
border：设置边框，符合属性 - 尺寸
width：宽度
height：高度 - 盒子模型：控制布局
box-sizing：border-box;设置盒子的属性，让width和height为最终盒子的大小
float：浮动（left/right/none）
clear ：消除浮动（left/right/none/both）
overflow ：溢出（visible默认/hidden/scroll/auto）
margin：外边距（上、右、下、左 顺时针方向）
padding：内边距- 默认状况下内边距会影响整个盒子的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
/*
字体、文本
*/
color: #008000;/* 文本颜色 */
font-size: 30px;/* 字体大小 */
text-align: center;/* 对齐方式 */
line-height: 100px;/* 行高 */
/*
边框
*/
border: 1px solid red;
}
div{
border: 1px solid red;
}
.div1{
/*
尺寸
*/
height: 200px;
width: 200px;
/*
背景
*/
background: url(img/W2.png) no-repeat center;/* no-repeat不重复 */
padding: 50px;
box-sizing: border-box;/* 让width和height为最终盒子的大小 */
}
.div2{
height: 100px;
width: 100px;
/* margin: 50px;/* 外边距上、右、下、左（顺时针） */ */
}
.div3{
float: left;
}
.div5{
float: right;
}
</style>
</head>
<body>
<p>段落</p>
<div class="div1">
<div class="div2">
</div>
</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbb</div>
<div class="div5">ccccc</div>
</body>
</html>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<style type="text/css">
body{
background-color: #dbffec;
}
.body{
border: 4px solid #dfdfdf;
width: 700px;
height: 400px;
background-color: #ffffff;
margin: 30px;
}
.left{
width:150px;
float: left;
padding-left: 20px;
padding-top: 20px;
}
.right{
width:150px;
float: right;
margin-top: 20px;
}
.center{
text-align: center;
width:300px;
float: left;
margin-left: 5px;
padding-top: 35px;
}
#l1 #l2{
font:bold 15px "黑体";
}
td{
text-align: right;
}
a{
font-size: 15px;
color: #ffda03;
text-decoration: none;
}
#register{
width: 60px;
height: 30px;
background-color:#ffda03 ;
border:0px ;
}
</style>
</head>
<body>
<div class="body">
<div class="left">
<span id="l1" style="color: #ffda03;">
新用户注册
</span><br>
<span id="l2" style="color: #c7c7c7;">
USER REGISTER
</span>
</div>
<div class="center">
<form action="" method="get">
<table border="0" cellspacing="10" cellpadding="0" align="center">
<tr>
<td><label for="username">用户名</label></td>
<td>
<input type="text" id="username" size="20" name="username" placeholder=" 请输入用户名"/>
</td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td>
<input type="password" id="password" name="password" size="20" placeholder=" 请输入密码"/>
</td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td>
<input type="email" id="email" name="email" size="20" placeholder=" 请输入Email"/>
</td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td>
<input type="text" id="name" name="name" size="20" placeholder=" 请输入真实姓名"/>
</td>
</tr>
<tr>
<td><label for="phone">手机号</label></td>
<td>
<input type="tel" id="phone" name="phone" size="20" placeholder=" 请输入您的手机号"/>
</td>
</tr>
<tr>
<td>性别</td>
<td style="text-align: left;">
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="fmale"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="date" size="20" placeholder=" 年 / 月 / 日"/>
</td>
</tr>
<tr>
<td><label for="check">验证码</label></td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="text" id="check" size="10" name="check" placeholder=" 请输入验证码"/>
</td>
<td>
<img src="img/check.png" width="55px" height="25px" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
<input type="submit" value="注册" id="register"/>
</form>
</div>
<div class="right">
<span style="font-size: 15px;">已有账号?</span>
<a href="#">立即登录</a>
</div>
</div>
</body>
</html>
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
