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>