css简介
1.CSS的概述
CSS :Cascading Style Sheet 层叠样式表
CSS 作用就是给HTML页面标签添加各种样式
为什么用CSS?
1)HTML的缺陷:
1. 不能够适应多种设备
2. 要求浏览器必须智能化足够庞大
3. 数据和显示没有分开
4. 功能不够强大
2)CSS 优点:
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了
HTML,CSS与JavaScript的关系:
1)HTML用于排版,处理逻辑
2)CSS用于美化,处理修饰
3)JavaScript用于动态,处理动画
注意:用开发工具创建的HTML,CSS与JavaScrip文件都是HTML文件
2.CSS和HTML结合的方式
CSS代码理论上位置是任意的,但通常写在style标签里
CSS和HTML的结合方式有3种:
方式一:行级样式表:采用html标签的style属性,范围只针对此标签适用
方式二:内嵌样式表:采用<style>标签完成。范围针对此页面
方式三:外部样式表: 采用建立样式表文件。针对多个页面.
引入样式表文件的方式:
1):采用<link>标签
eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2):采用import,必须写在<style>标签中,并且必须是第一句
eg: @import url(a.css) ;
两种引入方式的区别:
外部样式表中不能写<link>标签,但是可以写import语句
2.1.方式一:使用html标签的style属性
方式一:行级样式表:采用html标签的style属性,范围只针对此标签适用
语法格式:<标签名称 style="key : value ; "> 内容 </标签名称>
属性与值之间用 :隔开,不同属性用 ;隔开,同一属性的多个值之间用 空格 隔开;属性名和冒号之间最好不要有空格;
注意:此标签在<body>内
缺点:
1、html代码和css代码仍然耦合在一起,样式过多,难以维护
2、冗余代码过多,所以测试代码时经常用,实际开发中使用较少
演示:
<head>
<title>html与css的结合方式一</title>
</head>
<body>
<!--需求:书写div和span,设置样式为: 字体为红色,边框为1px 实线 红色的。-->
<div style="color: red ; border: 1px solid red;">这是div1</div>
<span style="color: red;border: 1px solid red;">这是span1</span>
</body>
2.2.方式二:在head标签使用style标签设置
方式二:内嵌样式表:采用<style>标签完成。范围针对此页面适用
语法格式:
<style>
标签名称{
key:value;
key:value;
}
</style>
注意:若多个标签名称之间用 , 隔开;且此标签在<head>内同一页面内,设置多个标签拥有的共同页面效果
优点:数据在body标签内,修饰在head标签内. 层次分明,显示清晰.
缺点:只能在本页面使用,无法提高多页面样式的复用性
演示:
<head>
<title>html与css的结合方式二</title>
<!-- 在head标签中使用style标签设置 -->
<!-- 需求:统一设置页面的div和span的数据 字体颜色为黄色,边框:1像素 实线 蓝色;-->
<style type="text/css">
div,span {
color: yellow;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>这是div1</div>
<span>这是span1</span>
</body>
2.3.方式三:外部引入方式
方式三:外部样式表: 采用建立样式表文件。针对多个页面适用.
引入样式表文件的方式:
1):采用import,必须写在<style>标签中,并且必须是第一句
eg: @import url("a.css") ;
2):采用<link>标签
eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
两种引入方式的区别:外部文件中不能写<link>标签,但是可以写import语句
因为定义效果的代码都在外部文件中,任何页面想使用这种页面效果都可以引入此外部文件
2.3.1.采用@import,必须写在<style>标签中且必须是第一句
语法格式:
<style type="text/css">
@import url("css文件的地址");
</style>
演示:
<head>
<title>html与css的结合方式三</title>
<!-- 在head标签中使用style标签使用@import(外部导入) -->
<!-- 需求:统一设置页面的div和span的数据 字体颜色为黄色,边框:1像素 实线 蓝色; -->
<style type="text/css">
/* 方式1:
@IMPORT url("div.css");
@IMPORT url("span.css");
*/
/* 方式2:
@IMPORT url("all.css");
*/
</style>
</head>
<body>
<div>这是div1</div>
<span>这是span1</span>
</body>
外部文件:
div.css
div{
color: yellow;
border: 1px solid blue;
}
span.css
span{
color: yellow;
border: 1px solid blue;
}
all.css
@IMPORT url("div.css");
@IMPORT url("span.css");
2.3.2.采用<link>标签
语法格式:
<link rel="stylesheet" type="text/css" href="css文件路径" />
演示:
<head>
<title>html与css的结合方式三</title>
<!-- 在head标签中使用link标签 -->
<!-- 需求:统一设置页面的div和span的数据 字体颜色为黄色,边框:1像素 实线 蓝色; -->
<link rel="stylesheet" type="text/css" href="all.css"> //此处演示使用的外部文件是all.css
</head>
<body>
<div>这是div1</div>
<span>这是span1</span>
</body>
2.4.三种结合方式的对比
适用范围:
方式一:行级样式表,范围只针对此标签适用.
方式二:内嵌样式表,范围针对此页面适用.
方式三:外部样式表,针对多个页面适用.
所以我们测试一般使用前两种方式,实际开发中使用方式三;
书写位置:
方式一书写在<body>内,方式二和方式三书写在<head>内;
3.css选择器
作用:就是通过css代码选择要添加效果的html中的标签
选择器主要分为两大类:
1.基本选择器
1) 标签选择器: 指的就是选择器的名字代表html页面上的标签
p{
color:red ;
border:1px dashed green;
}
2) id选择器:规定用 # 来定义
#one{
cursor:hand;
}
3) class选择器:规定用圆点 . 来定义
.one{
}
区别:标签选择器针对的是页面上的一类标签.
类选择器可以供多种标签使用.
ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。
4) 通用选择器: 用 * 定义,代表页面上的所有标签。
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}
2.扩展选择器
5) 组合选择器:采用逗号隔开
p,h1,h2,.one,#two{color:red ; }
6) 关联选择器(后代选择器): 采用空格隔开
h4 span i{color:red ; }
表示h4标签中的span标签中的i标签的样式
h4和span和i标签不一定是紧挨着的。
7) 伪类选择器
(1) 静态伪类:规定是用:来定义.只有两个.只能用于超链接.
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色
eg: a:link{color:red ;}
a:visited{color:yellow;}
注意: a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)
(2) 动态伪类 : 针对所有的标签都适用
:hover : 是移动到某个标签上的时候
:focus : 是某个标签获得焦点的时候
:active : 点击某个标签没有放松鼠标时
eg: label:hover{color:#00ff00; }
input:focus{
border:1px solid red;
}
a:active{
color:blue;
}
3.1.标签选择器
语法格式:
标签名称{
css代码;
}
多个标签需要用 , 隔开;
注意:使用标签选择器,本页面内此类标签的所有代码会全部操作;
需求:
<head>
<style type="text/css">
/* 需求. 取消input标签的默认边框 */
input {
border : none;
}
</style>
</head>
<body>
用户名: <input type="text"/>
<hr/>
<table border="1px" cellpadding="10px" cellspacing="0px" width="25%">
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
</body>
3.2.id选择器
语法格式:
#id属性值 {
css代码;
}
使用:给需要操作的标签一个id属性;
注意:id值在此页面内必须是唯一的;
演示:
<head>
<title>id选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
/*需求:将id="i001"的input标签背景变为xx。 */
#i001 {
}
</style>
</head>
<body>
<table cellpadding="10px" cellspacing="0px" border="1px" width="90%">
<tr>
<td id="i001">1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td id="i021">2,1</td>
<td>2,2</td>
<td id="i023">2,3</td>
</tr>
</table>
</body>
3.3.class选择器
语法格式:
.Class属性值 {
css代码;
}
使用:给需要操作的标签一个class属性;
注意:class值可以在多个标签中是相同的,操作的是同一个class属性值的多个标签;
<head>
<title>model.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
/* 需求1、表格的奇数行背景为红色,偶数行为蓝色 */
.odd {
}
.even {
}
</style>
</head>
<body>
<table cellpadding="10px" cellspacing="0px" border="1px" width="90%">
<tr class="odd">
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr class="even">
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr class="odd">
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<tr class="even">
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
</tr>
</table>
</body>
3.4.组合选择器
4) 组合选择器:采用逗号隔开
p,h1,.one,#two{color:red ; }
相当于上面三种方式中任意几种方式组合起来,中间需要用逗号隔开;
语法格式:
标签名,.class属性值,#id属性值{
css代码
}
<html>
<head>
<title>组合选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
/* 需求1. 选择id=div1的div,class=xx的span,所有p 背景颜色为黄色 */
#div1,.span1,p {
}
</style>
</head>
<body>
<div id="div1">div的数据1</div>
<div>div的数据2</div>
<div>div的数据3</div>
<span class="span1">span的数据1</span>
<span>span的数据2</span>
<span class="span1">span的数据3</span>
<p>p的数据1</p>
<p>p的数据2</p>
<p>p的数据3</p>
</body>
</html>
3.5.关联选择器
5) 关联选择器(后代选择器): 采用空格隔开
eg: h4 span i{color:red;}
表示h4标签中的span标签中的i标签的样式
h4和span和i标签不一定是紧挨着的。
相当于操作嵌套标签中的某个内部标签;
语法格式:
标签名 后代标签名 {
css代码;
}
<html>
<head>
<title>关联选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
/* 需求: 将div内所有的p 字体颜色变成蓝色。 */
div p {
color : blue;
}
</style>
</head>
<body>
<div>
AAAA BBB
<p>p111111111</p>
CCCC
<p>p222222222</p>
</div>
<p>p33333333</p>
</body>
</html>
3.6.伪元素选择器
6) 伪类选择器
(1) : 静态伪类:规定是用 : 来定义.只有两个.只能用于超链接.
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色
eg: a:link{color:red ;}
a:visited{color:yellow;}
注意: a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)
(2) : 动态伪类 : 针对所有的标签都适用
:hover : 是移动到某个标签上的时候
:focus : 是某个标签获得焦点的时候
:active : 点击某个标签没有放松鼠标时
eg: label:hover{color:#00ff00; }
input:focus{
border:1px solid red;
}
a:active{
color:blue;
}
演示超链接案例:
语法格式:
选中的标签名:伪元素名称 {
css代码
}
伪元素名称:
:link 某个html标签未被点击之前的状态
:visible 鼠标点击之后,松开了
:hover 鼠标悬浮式
:active 鼠标点击,但没有松开
注意:上述4个伪元素是由先后顺序的。L V H A,如果顺序乱了可能会出现不一样的效果;
需求:超链接 未点击背景红色,悬浮时背景为绿色,点击未松开背景为蓝色,鼠标点击之后为黄色
<html>
<head>
<title>锚伪类</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
/* 超链接 未点击字体红色,悬浮时字体为绿色, 点击未松开字体为蓝色,鼠标点击之后为黄色 */
a:link {color: red} /* 超链接未被点击的状态样式 */
a:visited {color: yellow} /* 点击之后的状态样式 */
a:hover {color: green} /* 鼠标悬浮在超链接上的状态样式 */
a:active {color: blue} /* 鼠标点击超链接,但未松开 */
</style>
</head>
<body>
<a href="01.html">01页面</a>
<a href="02.html">02页面</a>
</body>
</html>
4.边框(盒子模型)
需求1、先创建一个div,他的内部也创建一个div,同时设置边框
需求2、外层div背景色蓝色,内部div背景色为绿色
需求3、设置内部div的外边距10px,内边距为50px
<html>
<head>
<title>model.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#myimg {
padding : 20px;
}
/* 需求1、先创建一个div,他的内部也创建一个div,同时设置边框 */
/* 需求2、外层div背景色蓝色,内部div背景色为绿色 */
/* 需求3、设置内部div的外边距10px,内边距为50px */
#outer{
border : 1px solid red;
height : 400px;
}
#inner{
border : 1px solid blue;
height : 200px;
margin: 10px;
padding: 20px;
}
</style>
</head>
<body>
<!-- <img src="img1.jpg" width="500px" id="myimg" border="1px"/> -->
<hr/>
<div id="outer">
<div id="inner">39期 大牛班</div>
</div>
</body>
</html>
扩展需求: 3个div
注意:相同的属性效果可以用class选择器封装在一起,不同的属性效果可以用id选择器分别封装;
<html>
<head>
<title>model.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.divClass {
border : 1px solid red;
width : 900px;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
#div1{
height: 100px;
}
#div2{
height: 400px;
}
#div3{
height: 100px;
}
</style>
</head>
<body>
<div id="div1" class="divClass"></div>
<div id="div2" class="divClass"></div>
<div id="div3" class="divClass"></div>
</body>
</html>