CSS
- 层叠样式表
** 层叠:一层一层
** 样式表:很多的属性和属性值
CSS将网页内容和显示样式进行了分离,提高了显示功能 - CSS的使用
不能单独使用,需要结合html(四种结合方式)
(1)在每个html标签上面都有一个属性style,把css和html结合在一起。属性和属性值之间用冒号,每一个属性结束用分号
<html>
<head>
<title>css和html的结合方式一</title>
</head>
<body>
<div style='background-color:red;color:green;'>css和html的结合方式一</div>
</body>
</html>
(2)使用html的一个标签实现 <style>标签,写在head里面<style type=”text/css”>css代码</style>
div加大括号指明对哪一个部分进行操作
<html>
<head>
<title>css和html的结合方式二</title>
<style type='text/css'>
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>css和html的结合方式二</div>
</body>
</html>
(3)在style标签里面使用语句
− 第一步创建一个css文件,注释方式跟Java相同
/*
div 的样式
*/
div {
background-color:yellow;
color:black;
}
然后导入这个css文件,@import url(css文件的路径);
<html>
<head>
<title>css和html的结合方式三</title>
<style type='text/css'>
@import url(div.css);
</style>
</head>
<body>
<div>css和html的结合方式三</div>
</body>
</html>
第三种方式对于代码的可维护性来说更方便一点,只需要修改相关的css文件
(4)使用头标签link,引入一个外部css文件
− 第一步创建一个css文件
/*
div 的样式
*/
div {
background-color:yellow;
color:black;
}
− <link rel=”stylesheet” type=”text/css” href=”css文件的路径” />这个语句不需要背,用的时候直接复制。rel代表引入的样式表
<html>
<head>
<title>css和html的结合方式四</title>
<link rel='stylesheet' type='text/css' href='div.css'/>
</head>
<body>
<div>css和html的结合方式四</div>
</body>
</html>
**** 第三种结合方式,缺点:在某些浏览器下不起作用。所以一般使用第四种方式。重点掌握1,2,4的方式,第三种作为了解使用
**** 样式优先级(一般情况):由上到下,由外到内,优先级由低到高。优先级代表以谁的样式为准。由于解析顺序是从上到下一行一行解析的,后解析到的样式优先级就高。
**** 格式 选择器名称{属性名:属性值;属性名:属性值;……}每个属性名结束用分号表示
<html>
<head>
<title>css和html的结合方式对比</title>
<style type='text/css'>
div{
background-color:gray;
color:white;
}
</style>
</head>
<body>
<div style='background-color:red;color:green;'>css和html的结合方式一</div>
<div>css和html的结合方式二</div>
</body>
</html>
注意看效果图
CSS的基本选择器(三种)
要对哪个标签里面的数据进行操作
(1)使用标签作为选择器的名称
<html>
<head>
<title>css的基本选择器1</title>
<style type='text/css'>
div{ background-color:red;}
p{ background-color:green;}
</style>
</head>
<body>
<div>123</div>
<p>456</p>
</body>
</html>
(2)类(class)选择器
每个html标签都有一个属性class
<html>
<head>
<title>css的基本选择器2</title>
<style type='text/css'>
/*
div.haha{
background-color:green;
}
div.hehe{
background-color:yellow;
}
*/
.haha{
background-color:green;
}
</style>
</head>
<body>
<div class='haha'>123</div>
<div class='hehe'>456</div>
<p class='haha'>789</p>
</body>
</html>
(3)id选择器
每个html标签上有一个属性id,写法就是#加上id的值
<html>
<head>
<title>css的基本选择器3</title>
<style type='text/css'>
/*div#haha{
background-color:green;
}
p#haha{
background-color:green;
}*/
#haha{
background-color:green;
}
</style>
</head>
<body>
<div id='haha'>123</div>
<p id='haha'>456</p>
</body>
</html>
这三个选择器用的都比较多
**** 优先级:style > id选择器 > class选择器 > 标签选择器(div{ })
<html>
<head>
<title>css基本选择器的优先级</title>
<style type='text/css'>
.haha1{
background-color:green;
}
div{
background-color:red;
}
</style>
</head>
<body>
<div class='haha1'>123</div>
<div>456</div>
</body>
</html>
先加载class选择器,再加载标签选择器,按照以往的思想背景颜色应该为红色。所以class选择器大于标签选择器。下面为结果展示:
现在在上述标签中加入id:id选择器的大于class选择器优先级。将id选择器放在最上面,在结果中依然可以看到id上的颜色
<html>
<head>
<title>css基本选择器的优先级</title>
<style type='text/css'>
#hehe1{
background-color:orange;
}
.haha1{
background-color:green;
}
div{
background-color:red;
}
</style>
</head>
<body>
<div class='haha1' id='hehe1'>123</div>
<div>456</div>
</body>
</html>
在div中加入style属性:可以看到style选择器的优先级最高(显示为灰色)
<html>
<head>
<title>css基本选择器的优先级</title>
<style type='text/css'>
#hehe1{
background-color:orange;
}
.haha1{
background-color:green;
}
div{
background-color:red;
}
</style>
</head>
<body>
<div class='haha1' id='hehe1' style='background-color:gray;'>123</div>
<div>456</div>
</body>
</html>
CSS的扩展选择器 (三种)
(1)关联选择器
用于设置嵌套标签的样式
需求:在div标签内部嵌套p标签,设置内部p标签的样式。
写法形式:外层+空格+内层
<html>
<head>
<title>CSS的扩展选择器1</title>
<style type='text/css'>
div p{
background-color:orange;
}
p{
background-color:gray;
}
</style>
</head>
<body>
<div><p>CSS的扩展选择器</p></div>
<p>WWWWWWWWWWWW</p>
</body>
</html>
样式结果:
(2)组合选择器
把不同的标签设置成相同的样式
需求:分别有div标签和p标签,把两个标签设置成相同的样式。
写法:两个标签中间加逗号隔开
<html>
<head>
<title>CSS的扩展选择器2</title>
<style type='text/css'>
div,p{
background-color:orange;
}
</style>
</head>
<body>
<div>123</div>
<p>456</p>
</body>
</html>
样式结果:
(3)伪元素选择器
CSS里面提供了一些定义好的样式,可以直接那过来使用。
** 比如超链接:超链接的状态(4种):
- 原始状态(什么都不做的时候鼠标没有变化); :link
- 鼠标悬停在超链接时候变化的状态; :hover
- 点击超链接不动时候的状态; :active
- 点击后页面刷新的状态; :visited
写法:冒号+元素
<html>
<head>
<title>CSS的扩展选择器3</title>
<style type='text/css'>
/*原始状态*/
a:link{
background-color:red;
}
/*悬停状态*/
a:hover{
background-color:green;
}
/*点击状态*/
a:active{
background-color:blue;
}
/*点击后状态*/
a:visited{
background-color:gray;
}
</style>
</head>
<body>
<a href='http://www.baidu.com' target='_blank'>CSS的扩展选择器3-超链接1</a>
</body>
</html>
CSS的盒子模型
比如有一个表格,如果想要改变表格中相应位置的东西,那么就要改代码。所以现在使用div+css的形式,只要改变样式就可以随意移动里面的位置。将数据放在盒子里面,通过移动盒子来改变位置
在进行布局前需要把数据封装到一块一块的区域内(div)
(1)边框 border(设置盒子基本属性:粗细、边样式、颜色)
统一设置:
<html>
<head>
<title>css的盒子模型1</title>
<style type='text/css'>
div{
width:200px;
height:100px;
/*border有三个值设置,粗细,样式,颜色。值之间用空格分开(统一设置)*/
border:2px solid blue;
}
</style>
</head>
<body>
<div id='div11'>AAAAAA</div>
<div id='div12'>BBBBBB</div>
<div id='div13'>CCCCCC</div>
</body>
</html>
样式效果:
分别设置时:
<html>
<head>
<title>css的盒子模型1</title>
<style type='text/css'>
div{
width:200px;
height:100px;
/*border有三个值设置,值之间用空格分开(统一设置)*/
border:2px solid blue;
}
#div12{
/*对边分别设置,同样是设置三个值*/
border-right:2px dashed yellow;
}
</style>
</head>
<body>
<div id='div11'>AAAAAA</div>
<div id='div12'>BBBBBB</div>
<div id='div13'>CCCCCC</div>
</body>
</html>
样式效果:
(2)内边距(可以调整盒子内部)
设置文本内容与上下左右边框的距离,可以统一设置padding,也可以分别设置上下左右内边距。
<html>
<head>
<title>CSS的盒子模型2</title>
<style type='text/css'>
div{
width:200px;
height:100px;
border:2px solid blue;
}
#div22{
/*统一设置,上下左右的距离都是20像素
如果范围超出,边框就会变长
*/
padding:20px;
}
#div23{
/*设置左边的内边距*/
padding-left:30px;
}
</style>
</head>
<body>
<div id='div21'>AAAAAA</div>
<div id='div22'>BBBBBB</div>
<div id='div23'>CCCCCC</div>
</body>
</html>
(3)外边距 (可以调整盒子的位置)margin
<html>
<head>
<title>CSS的盒子模型3</title>
<style type='text/css'>
div{
border:2px solid blue;
}
#div32{
/*对上和下的距离进行分别设置*/
margin-top:20px;
margin-bottom:20px;
}
#div33{
/*对上下左右统一设置*/
margin:20px;
}
</style>
</head>
<body>
<div id='div31'>AAAAAA</div>
<div id='div32'>BBBBBB</div>
<div id='div33'>CCCCCC</div>
</body>
</html>
样式效果:
本人是菜鸟一枚,当做学习笔记写博客。谢谢各路大咖驻足审阅