目录
一、css简介
1.1什么是css
css为层叠样式表,英文全称:Cascading Style Sheets,css是对html进行样式修饰语言,
css能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,
层叠:就是层层覆盖叠加。如果不同的css样式对同一html标签进行修饰,样式有冲突的部分应用优先级高的,不冲突的部分共同作用。(如果一个红色五号字样式先对html进行修饰,然后粉色样式再修饰,那么最后html样式为粉色五号字)
样式表:就是css属性样式的集合
1.2css的作用
- 修饰html,使其html样式更加好看
- 提高样式代码的复用性
- html的内容与样式相分离,便于后期维护
1.3css的引入方式和书写规范
css的引入方式一般有四种,分别为内嵌样式、内部样式、外部样式、import方式:
1.3.1内嵌样式
内嵌样式是把css的代码嵌入到html标签中,例如:
<div style="color:red;font-size: 100px;">css内嵌样式</div>
需要注意的是:
- 使用style属性将样式嵌入到html标签中
- 属性的写法为:属性:属性值
- 多个属性之间用分号“;”隔开
一般不建议这么使用,没有将html的内容和样式分开
1.3.2内部样式
内部样式是在head标签中使用style标签进行css的引入,
<!DOCTYPE html>
<html>
<head>
<!--定义内部样式-->
<style type="text/css">
div{color: purple;font-size: 20px}
</style>
</head>
<body>
<div>css内部样式</div>
</body>
</html>
页面效果如下:
需要注意的是:
- 使用style标签进行css的引入<style type="text/css">
- type:告知浏览器使用css解析器去解析
- 属性的写法:属性:属性值
- 多个属性之间使用分号";"隔开
1.3.3外部样式
将css样式抽取成一个单独css文件,可供不同的html页面使用,一般我们通过link标签使用,
- 创建css文件,将样式属性写在css文件中
- 在head中使用link标签进行引入,格式为<link rel="stylesheet" type="text/css" href="css文件地址"/>
- rel:代表要引入的文件与html的关系
- type:告知浏览器使用css解析器去解析
- href:css文件地址
- 属性的写法:属性:属性值
- 多个属性之间使用分号";"隔开
我们定义一个css样式文件mystyle.css,属性如下:
div{color: purple;font-size: 50px}
然后在html的head中用link标签进行引入,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div>外部样式</div>
</body>
</html>
网页效果:
1.3.4@import方式
我们还可以通过@import的方式导入css样式文件,
<style type="text/css">
@import url("css地址");
</style>
我们试一下@import导入,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@import url("mystyle.css");
</style>
</head>
<body>
<div>@import方式</div>
</body>
</html>
网页效果:
@import和link主要的区别如下:
- link所有浏览器都支持,import部分低版本IE不支持
- link是在head语句中跟着一起加载的,import是等待html加载完毕之后再加载
- import方式不支持javascript的动态修改
二、css选择器
css选择器用于选择你想要修饰的元素,
一般我们有基本选择器,属性选择器,伪元素选择器,层级选择器,
2.1基本选择器
2.1.1元素选择器
元素选择器是通过html的标签名进行选中的,格式为:html标签名{css属性},例:
div{color: red;font-size: 20px}
我们用代码测试一下元素选择器如何使用,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{color: greenyellow;font-size: 50px}
</style>
</head>
<body>
<span>元素选择器</span>
</body>
</html>
网页效果:
2.1.2id选择器
id选择器可以更加精确的选择到某一个标签,而不是这一类标签,格式为:#id的值{css属性},
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{color: sandybrown;font-size: 50px}
#div2{color: dodgerblue;font-size: 50px}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
页面效果:
2.1.3class选择器
我们可以将样式相同的一些标签设置为一个类,对整个类进行样式设计,格式为:.class的值{css属性}
我们设置第一个和第三个块样式相同,第二个块单独的不同,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.style1{color: darkslategray;font-size: 50px}
.style2{color: orangered;font-size: 50px}
</style>
</head>
<body>
<div class="style1">class1-div1</div>
<div class="style2">class2-div1</div>
<div class="style1">class1-div2</div>
</body>
</html>
网页效果:
2.1.4选择器的优先级
当不同的选择器样式作用于某个元素上,其优先级为:id>class>元素,
比如当id选择器和元素选择器同时对html的某个元素进行样式设计的时候,id选择器会覆盖元素选择器的样式。
2.2属性选择器
我们还可以通过属性来选择想要的的元素,格式为:基本选择器[属性=‘属性值’]{css属性},
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
input[type='text']{background-color: dodgerblue}
input[type='password']{background-color: pink}
</style>
</head>
<body>
<form action="">
姓名:<input type="text"><br/>
密码:<input type="password"><br/>
</form>
</body>
</html>
网页效果:
2.3伪元素选择器
一般常用的是a标签的伪元素选择器,a标签有四种状态,对应着四种不同的设置格式:
- 静止状态:a:link{css属性}
- 悬浮状态:a:hover{css属性}
- 触发状态:a:active{css属性}
- 完成状态:a:visited{css属性}
下面我们通过代码看看如何对a标签进行样式设置,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a:link{color: blue}
a:hover{color: red}
a:active{color: black}
a:visited{color: purple}
</style>
</head>
<body>
<a href="">跳转到本页面</a>
</body>
</html>
页面效果(点击后):
2.4层级选择器
如果要找的元素在层级结构中,比如div中嵌套div,要找内部的div,
那么就通过父级选择器找到子级选择器,然后找到要找的元素,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1 .style1 span{color: blue}
#div1 .style2 span{color: red}
#div2 .style1 span{color: gray}
#div2 .style2 span{color: green}
</style>
</head>
<body>
<div id="div1">
<div class="style1"><span>div1-style1</span></div>
<div class="style2"><span>div1-style2</span></div>
</div>
<div id="div2">
<div class="style1"><span>div2-style1</span></div>
<div class="style2"><span>div2-style2</span></div>
</div>
</body>
</html>
页面效果:
三、css属性
3.1文字属性
- font-size:文字大小
- font-family:字体类型
<div style="font-size:40px;font-family:黑体">文字属性</div>
网页效果:
3.2文本属性
- color:颜色
- text-decoration:下划线
- none、underline
- text-align:对齐方式
- left、center、right
<div style="color:red;text-decoration: underline;text-align: center">文本属性</div>
对应网页效果如下:
3.3背景属性
- background-color:背景颜色
- background-image:背景图片
- 属性值:url(图片地址)
- background-repeat:平铺方式(图片填满页面的方式)
- 属性值:默认repeat
- repeat:横向纵向平铺
- no-repeat:不平铺
- repeat-y:纵向平铺
- repeat-x:横向平铺
- 属性值:默认repeat
<body style="background-color: orange;background-image: url(images/luffy.jpg);background-repeat: repeat-x"></body>
页面效果如下:
可以看到页面背景为橘色,也插入了目标图片,平铺方式为x轴平铺
3.4列表属性
- list-style-type:列表项前的小标志
- list-style-image:列表项前的小图片
- 属性值:url(图片地址)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul style="list-style-type: square;list-style-image: url(images/forward.gif)">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
页面效果:
3.5尺寸属性
- width:宽度
- height:高度
<div style="width: 100px;height: 100px;background-color: orange">尺寸属性</div>
页面效果:
3.6显示属性
- display
- none:隐藏
- block:块级显示
- inline:行级显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span{color:red;display: none}
</style>
</head>
<form action="">
姓名:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span><br>
密码:<input id="pass" type="password" /><br>
<input id="btn" type="button" value="提交" />
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
document.getElementById("span").style.display = "inline";
};
</script>
</form>
</html>
点击提交后页面效果:
3.7浮动属性
- float:属性值有left、right
- clear:清除浮动left、right、both
缺点为:
- 影响相邻元素不能正常显示
- 影响父元素不能正常显示
所以我们一般在使用浮动属性的元素后面加一个clear,让后面的元素不受浮动的布局影响,我们看看具体如何使用,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{width: 200px;height: 200px;background-color: red;float: left;}
#div2{width: 200px;height: 200px;background-color: yellow;float: right;}
.clear{clear: both}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div class="clear"></div>
</body>
</html>
页面效果:
具体浮动属性的详细解释请看https://blog.csdn.net/weixin_39478524/article/details/114191734
四、css盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用,
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容,
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素,
下面的图片说明了盒子模型(Box Model):
- Margin:外边框与其他元素之间的距离
- margin:10px:代表上下左右距离都是10个像素点
- margin:1px 2px 3px 4px:上右下左(从上开始顺时针)的距离
- margin:1px 2px:上下距离为1,左右距离为2
- margin-top:1px:单独对上距离设置
- border:边框
- border-width:边框的厚度
- border-color:边框的颜色
- border-style:边框的线型
- border-top:上边框
- border-bottom:下边框
- border-left:左边框
- border-right:右边框
- padding:边框内部与内部元素之间的距离
- padding:10px:代表上下左右距离都是10个像素点
- padding:1px 2px 3px 4px:上右下左(从上开始顺时针)的距离
- padding:1px 2px:上下距离为1,左右距离为2
- padding-top:1px:单独对上距离设置
我们用代码实际测试一下,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#content{width: 100px;height: 100px;background-color: red}
#box{width: 100px;height: 100px;border: 30px solid green;padding: 40px;margin: 50px}
</style>
</head>
<body>
<div id="box">
<div id="content">content</div>
</div>
</body>
</html>
页面效果:
五、图书商城页面练习
之前在html基本标签学习时利用table进行页面的布局,但是在实际开发中table用的非常少,都是用div+css进行布局,
下面我们试一下用div+css盒子模型进行布局,对之前实现的图书商城重新实现一遍,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.clear{clear: both}
#top_left{width: 300px;float: left;}
#top_right{width: 350px;float: right;margin-top:30px;font-size: 15px;}
#top_right img{margin-bottom: -5px}
#top_right a{text-decoration: none;color: #06F}
#top_right a:hover{color: #909}
#menu{
background-color: #1C3F09;
border-top:4px solid #82B211;
padding:10px 0;
text-align: center;
}
#menu a{
margin: 0 10px;
color: #fff;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif;
font-size: 15px;
font-weight: bold;
}
#menu a:hover{color: #999;}
#search{background-color: #B6B684;padding: 8px 0;text-align: right;}
#search input[type='image']{margin-bottom: -4px;margin-right: 250px;}
#content{width:900px;margin: 10px auto 30px}/*上边界为10,下边界为30,左右边界自动你*/
#content_top{text-align: right;font-size: 13px}
#content_bottom{border: 1px solid #999;background-color: #FCFDEF;padding: 10px 15px;}
#content_bottom h1{font-size: 20px;display: inline}
#content_bottom span{margin-left:10px;font-size: 12px}
#productlist_image img{width: 100%}
.book{float: left;width: 25%;text-align: center;padding: 10px 0}
.book img{width: 130px;height: 196px}
#jumppage{text-align: center;margin: 10px 0}
#jumppage a{
padding: 2px 6px;
border: 1px solid #9AAFE5;
text-decoration: none;
color: #9AAFE5;
}
#jumppage a:hover{color: #2B66A5;border: 1px solid #2B66A5}
.currentpage{background-color: blue}
#bottom{width:100%;height:60px;background-color: #EFEEDC;padding: 10px 0;}
#bootom_left{width: 300px;float: left;margin-left: 100px;}
#bootom_right{width: 400px;float: left;margin-left: 100px;margin-top: 8px;line-height: 25px}
</style>
</head>
<body>
<div id="page">
<div id="top">
<div id="top_left"><img src="images/logo.png"></div>
<div id="top_right">
<img src="images/cart.gif">
<a href="#">购物车</a>|
<a href="#">帮助中心</a>|
<a href="#">我的账户</a>|
<a href="#">新用户注册</a>
</div>
</div>
<div class="clear"></div>
<div id="menu">
<a href="#">文学</a><a href="#">生活</a>
<a href="#">计算机</a><a href="#">外语</a>
<a href="#">经管</a><a href="#">励志</a>
<a href="#">社科</a><a href="#">学术</a>
<a href="#">少儿</a><a href="#">艺术</a>
<a href="#">原版</a><a href="#">科技</a>
<a href="#">考试</a><a href="#">生活百科</a>
<a href="#" style="color: yellow">全部商品目录</a>
</div>
<div id="search">
<span>Search</span>
<input type="text">
<input type="image" src="images/searchbutton.gif">
</div>
<div id="content">
<div id="content_top">
<span>首页 > 旅游 > 图书列表</span>
</div>
<div id="content_bottom">
<h1>商品目录</h1><hr/>
<h1>计算机类</h1><span>共100种商品</span><hr/>
<div>
<div id="productlist">
<div id="productlist_image"><img src="images/productlist.gif"></div>
<div id="booklist">
<div class="book">
<div class="book_image"><img src="bookcover/101.jpg"></div>
<div class="book_introduction">书名:xxx<br>价格:xxx</div>
</div>
<div class="book">
<div class="book_image"><img src="bookcover/102.jpg"></div>
<div class="book_introduction">书名:xxx<br>价格:xxx</div>
</div>
<div class="book">
<div class="book_image"><img src="bookcover/103.jpg"></div>
<div class="book_introduction">书名:xxx<br>价格:xxx</div>
</div>
<div class="book">
<div class="book_image"><img src="bookcover/104.jpg"></div>
<div class="book_introduction">书名:xxx<br>价格:xxx</div>
</div>
<div class="book">
<div class="book_image"><img src="bookcover/105.jpg"></div>
<div class="book_introduction">书名:xxx<br>价格:xxx</div>
</div>
<div class="book">
<div class="book_image"><img src="bookcover/106.jpg"></div>
<div class="book_introduction">书名:xxx<br>价格:xxx</div>
</div>
<div class="book">
<div class="book_image"><img src="bookcover/107.jpg"></div>
<div class="book_introduction">书名:xxx<br>价格:xxx</div>
</div>
<div class="book">
<div class="book_image"><img src="bookcover/euro.jpg"></div>
<div class="book_introduction">书名:xxx<br>价格:xxx</div>
</div>
</div>
<div class="clear"></div>
<div id="jumppage">
<a href="#">上一页</a>
<a class="currentpage" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">下一页</a>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="bootom_left"><img src="images/logo.png"></div>
<div id="bootom_right">
<span>CONTACT US</span><br/>
<span>copyright 2021 © BookStore All Rights RESERVED</span>
</div>
</div>
</div>
</body>
</html>
页面效果: