一、CSS介绍
是一种用于修饰网页的文本样式语言，还可以配合Javascript脚本语言动态对网页各元素操作
格式： 选择器{属性:值;属性:值;属性:值;…}
选择器：需要改变样式的HTML元素
二、CSS使用方法
2.1.内联方式（行内样式）
<p >红色段落</p>
2.2.内部方式（内嵌样式），在head标签中使用
通过名字c1、c2进行关联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS演示</title>
<style type="text/css">
.c1 {
color: red;
}
.c2 {
color: blue;
}
</style>
</head>
<body>
<p class="c1">段落一</p>
<p class="c2">段落二</p>
</body>
</html>
2.3.外部导入方式（推荐），在head标签中使用
创建css目录，并创建main.css文件
把样式写到main.css文件中
.c1 {
color: red;
}
.c2 {
color: gold;
}
在html中调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS演示</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<p class="c1">段落一</p>
<p class="c2">段落二</p>
</body>
</html>
三、选择器
3.1.元素
元素选择器：使用html标签作为选择器，为指定标签设置样式
3.1.1.示例1：h1元素设置样式
h1 {
color: red;
font-size: 14;
}
3.1.2.示例2：多个元素设置样式
h1,h2,h3,h4,h5,h6 {
color: green;
}
3.1.3.示例3：子元素会继承最高级元素所有属性
body {
color: #000;
font-family: Verdana, serif; /*字体*/
}
3.2.ID
使用“id”作为选择器，为指定id设置样式。
使用格式：#id名{样式…}
3.2.1.特点：
• 每个标签都可以设置id
• 每个id名称只能在HTML文档中出现一次
• id名称不能以数字开头，不能是标签名称
• 在实际开发中，id一般预留JavaScript使用
3.2.2.第一步：给标签指定id
<p id="t">...</p>
3.2.3.第二步：针对id设置样式
#t {
color: red;
}
3.3.类
使用“类名”作为选择器，为指定id设置样式。
使用格式：.类名{样式…}
3.3.1.第一步：给标签指定类
<p class="c">...</p>
3.3.2.第二步：针对类设置样式
.c {
color: red;
}
3.4.派生
派生选择器：依据元素在其位置的上下文关系来定义样式。
示例：
<style type="text/css">
.c p { /* 适用div下的p标签*/
color: red;
}
</style>
<div class="c">
<h1>一号标题</h1>
<p>这是一个段落</p>
</div>
四、CSS常用属性
4.1.内边距和外边距
padding（内边距）：钻戒到盒子内边框的距离
margin（外边距）：钻戒盒子距离桌子边缘的距离
border：钻戒盒子边框宽度
padding: 10px 5px 15px 20px # 上右下左
padding: 10px 5px 15px # 上右下
padding: 10px 5px # 上右
padding: 10px # 四边都是10px
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS常用属性</title>
<style>
.zhuozi {
height: 200px;
width: 200px;
background-color: gray;
/*border: 2px dashed gray; !*防止整体变动*!*/
overflow: hidden; /*两种方法均可实现*/
}
.hezi {
height: 100px;
width: 100px;
background-color: red;
margin-left: 25px;
margin-top: 25px;
padding-left: 50px;
padding-top: 50px;
}
.hezi img {
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div class="zhuozi">
<div class="hezi">
<img src="img/zuanjie.jpg">
</div>
</div>
</body>
</html>
4.2.字体 font-*
p {
color: red;
font-size: x-large;
font-weight: bolder;
font-style: italic;
}
4.3.文本
4.4.边框 border-
4.5.背景 background-*
4.6.定位
position属性：把你元素定到什么位置，或者把你元素根据什么定位。
4.6.1.使用步骤：
-
先使用postion告诉怎么定位
-
再告诉它定位到哪
• left 靠左距离
• right 靠右距离
• top 顶部距离
• bottom 底部距离
4.6.2.示例1：登录页面，div在页面中间
.div {
width: 200px;
height: 200px;
border: 1px dashed blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
4.6.3.示例2：回到顶部，div在右下角
.go {
position: fixed;
right: 20px;
bottom: 30px;
}
<a href="#" class="go">回到顶部</a>
4.7.浮动
float属性：定义元素在哪个方向浮动。
可选值：none、left、right
特点：
• 只能水平浮动，不能横向浮动
• 浮动碰到父元素的边框或者浮动元素的边框就会停止
• 浮动元素的后一个元素会围绕着浮动元素（典型应用：文字围绕图片）
• 浮动元素的前一个元素不会受到任何影响（如果想让两个块元素并排显示，必须让两个块元素都应用float）
4.8.其他
