Day02 CSS样式
DIV和CSS
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML
文档内大块（block-level）的内容提供结构和背景的元素。即<div> 标签。
CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的head部分，也可以将样式声
明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
CSS的使用方式
1、行内样式
使用style属性进行设置。
2、内部样式
在<style>标签中书写CSS样式设置。<style>标签放到<head>中。
3、外部样式
CSS代码保存到扩展名为.css的文件中，HTML文件通过链接方式引用该CSS文件
<link type=”text/css” rel=”stylesheet” href=”CSS文件路径”/>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIV和CSS</title>
<link rel="stylesheet" type="text/css" href="css/01.css"/>
<style type="text/css">
div {
width: 1000px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div style="width: 800px; height: 200px; background-color: #008000;">块1</div>
</body>
</html>
三种方式的优先级：就近原则，行内样式>内部样式&外部样式（区分内外部的顺序）
三种方式的生效范围：外部样式>内部样式>行内样式
CSS选择器
选择器：
通过选择器来找到需要设置样式的元素。
常用选择器：标签选择器
ID选择器：ID属性值在当前页面唯一，使用“#”来指定
类选择器：给标签设置class属性，可重复，类选择器用“.”来指定
三大基本选择器的优先级：ID选择器>类选择器>标签选择器
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
h1 {
color: red;
}
#first {
color: #008000;
}
#secend {
color: chartreuse;
}
.h1 {
color: orange;
}
</style>
</head>
<body>
<h1 id="first">好好学习</h1>
<h1 id="secend">天天向上</h1>
<h1 class="h1">少壮不努力</h1>
<h1 class="h1">老大徒伤悲</h1>
</body>
</html>
CSS基本样式
1、字体样式
文字大小：font-size: large;
文字粗细：font-weight: bold;
文字字体：font-family: "宋体";
文字倾斜：font-style: italic;
2、文本样式
文本对齐方式：text-align: center;
文本颜色：color: #FF1493;
文本装饰：text-decoration: underline;
设置行高：line-height:200px ;
3、超链接伪类样式
a：所有超链接
a:link{}点击前超连接文字格式
a:visited{}点击后超连接文字格式
a:hover{}鼠标悬浮时（鼠标移至链接）
a:active{}鼠标未释放
注意：cursor属性是调整鼠标样式，常用值：pointer,help,wait...
4、边框样式
边框宽度：border-width
按照方向设置：border-(left/right/top/bottom)-width
边框颜色：border-color
按照方向设置：border-(left/right/top/bottom)-color
边框风格：border-style
按照方向设置：border-(left/right/top/bottom)-style
以上可简写为：border：width值 边框线条样式 颜色；
圆角边框：border-radius
按照方向设置：border-(top/bottom)-(left/right)-radius
5、背景样式
背景颜色：background-color:
背景图片：background-image:url(“图片路径”);
背景是否平铺：background-repeat:repeat/no-repeat/repeat-x/repeat-y
背景图片大小：background-size:200px 300px;
背景偏移：background-position:20px 50px;
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css基本样式</title>
<style type="text/css">
#first {
width: 200px;
height: 200px;
font-size: large;
font-weight: bold;
font-family: "宋体";
font-style: italic;
text-align: center;
color: #FF1493;
text-decoration: underline;
line-height:200px ;
border-width: 5px;
border-color: yellow;
border-style: double;
border-radius: 20%;
background-color: antiquewhite;
background-image: url("img/timg.jpg");
background-size: 200px 200px;
background-repeat: no-repeat;
background-position: center;
}
a:{
color: blue;
}
a:link{
color: black;
text-decoration: none;
}
a:visited{
color: green;
}
a:hover {
color: pink;
cursor: wait;
}
a:active{
color: orange;
}
</style>
</head>
<body>
<div id="first">少年郎，看我！</div>
<br />
<br />
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
盒子模型
HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。
padding内边距
也叫做填充，指内容与边框之间的空间。
样式属性：padding,padding-top,padding-right,padding-bottom,padding-left
padding属性的值：
一个值：padding:20px;4个方向内边距都是20px
两个值：padding:20px 30px;上下20px，左右30px
三个值：padding:20px 30px 40px;上20px，右边30px，下40px，左同右
四个值：padding:20px 30px 40px 50px;分别是上右下左
margin外边距
也叫做空白边，是添加在边框外围的空间。
一共有5种属性：margin,margin-top,margin-right,margin-bottom,margin-left
margin属性值类型与padding一致。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: aliceblue;
border: solid 5px green;
color: darkmagenta;
font-size: larger;
padding: 10px 20px 30px 40px;
margin: auto;
}
</style>
</head>
<body>
<div>
盒子模型盒子模型
盒子模型盒子模型
盒子模型盒子模型
</div>
</body>
</html>
浮动
浮动是一种非常有用的布局方式，它能够改变页面中对象的前后流动顺序。这样做的好处是，使得内容的排版变的简单，具有良好的伸缩性。
属性：float
常用值：left，right
使用浮动的<div>会向Z轴方向移动，原本所在的位置会被后面的标签挤占。
如果想要几个<div>横向排列，那么就将这几个<div>都设置相同的浮动。
如果想要后面的<div>不受前面浮动了的<div>影响，可以使用clear来清除浮动带来的影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
#top {
width: 100px ;
height: 100px;
background-color: #008000;
float: left;
}
#middle {
width: 150px ;
height: 150px;
background-color: red;
float: left;
}
#bottom {
width: 200px ;
height: 200px;
background-color: blue;
float: left;
}
#secendLine {
width: 150px ;
height: 150px;
background-color: blue;
clear: both;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
<div id="secendLine"></div>
</body>
</html>
定位
改变元素位置。
属性：position
属性值：
relative：相对定位。相对于原来的位置进行偏移，原本的位置保留。
absolute：绝对定位。会破坏文档流，在Z轴方向移动，原本的位置会被后面的<div>挤占。相对于页面左上角进行偏移。原本的位置，不会保留。
fixed：固定定位。会固定在指定的位置，不受滚动条的影响。相对于页面的某个角来进行偏移。
偏移量属性：left，top，right，bottom。
属性值：偏移的像素值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
#top {
width: 100px ;
height: 100px;
background-color: green;
position: absolute;
top: 30px;
}
#middle {
width: 150px ;
height: 150px;
background-color: red;
position: relative;
left: 220px;
top: 20px;
}
#bottom {
width: 200px ;
height: 1000px;
background-color: blue;
}
#fixed {
width: 100px;
height: 100px;
background-color: black;
border-radius: 50%;
position: fixed;
right: 200px;
bottom: 100px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
<br />
<br />
<div id="fixed"></div>
<div style="width: 100px; height: 100px; background-color: #FFFF00;"></div>
</body>
</html>
标签类型转化
HTML标签分为三种不同的类型，块元素，行元素，行块元素。
块元素：以区域块形式出现，独占一行（自动换行），可以设置宽高。
常见的块元素：<div>、<h*>、<p>、<ul>、<li>、<ol>...
行元素：按行排列，不会自动换行，不能设置宽高。
常见的行元素：<strong>、<em>、<font>、<a>...
行块元素：按行排列，不会自动换行，但是可以设置宽高
常见行块元素：<img/>、<textarea>...
行块元素的转换:
属性：dispaly
属性值：
inline：将该元素设置为行元素（行元素的默认值）
block：将该元素设置为块元素（块元素的默认值）
inline-block：将对象呈现为内联元素，对象内的元素块级展示（设置为行块元素）
none：隐藏元素
案例：实现横向导航栏效果
实现横向展示的两种方式：浮动，display:inline-block。
1、浮动元素之间没有外边距，display:inline-block有默认外边距
2、浮动会对后面的元素产生影响，display:inline-block不会
3、非强制情况下，推荐使用display:inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>横向导航栏</title>
<style type="text/css">
li {
width: 100px;
height: 30px;
background-color: deeppink;
text-align: center;
line-height: 30px;
border-radius: 10%;
float: left;
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: orange;
}
</style>
</head>
<body>
<ul>
<li><a href="">首页</a></li>
<li><a href="">天猫</a></li>
<li><a href="">聚划算</a></li>
<li><a href="">天猫超市</a></li>
<li><a href="">苏宁易购</a></li>
</ul>
</body>
</html>