CSS概述
CSS:Cascading Style Sheet,意思是层叠样式表,其依赖于HTML。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
通常使用DIV+CSS进行网页布局。
CSS优势
HTML的缺陷:
- 不能够适应多种设备
- 要求浏览器必须智能化足够庞大
- 数据和显示没有分开
- 功能不够强大
CSS 优点:
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)
比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。
CSS结构
语法格式:
选择器{
属性名: 属性值;
属性名: 属性值;
}
我们写css的地方是style标签,就是“样式”的意思,写在head里面。后面的部分我们将知道,css也可以写在单独的文件里面,现在我们先写在style标签里面。
结构示意图如下:
CSS与HTML结合的三种方式
- 行内样式表:在某个特定的标签里采用style属性。范围只针对此标签。
- 内嵌样式表:在页面的head里采用
<style>
标签。范围针对此页面。 - 外部样式表:采用
<link>
标签。例如:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
1.行内样式表
采用style属性,范围只针对此标签使用,该方法比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改
<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>
2.内嵌样式表
在head标签中加入style标签,对多个标签进行统一修改,范围针对此页面。该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活。
<style type="text/css">
p{
font-weight: bold;
font-style: italic;
color: red;
}
</style>
<body>
<p>洗白白</p>
<p style="color:blue">你懂得</p>
</body>
3.外部样式表
采用link标签l引入外部声明的CSS文件,此声明相当于调用,解决了不同网页间样式重复使用的问题,一次声明,随处使用
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
CSS的四种基本选择器
CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
基本选择器:
- 标签选择器:针对一类标签
- ID选择器:针对某一个特定的标签使用
- 类选择器:针对你想要的所有标签使用
- 通用选择器(通配符):针对所有的标签都适用
1.标签选择器
作用:会将当前网页内的所有该标签增加相同的样式
结构:
标签名{
样式名1:样式值1;
样式名2:样式值2;
......
}
示例:
p{
font-size:14px;
}
上述示例意思是所有的<p>
标签里的内容都将显示14号字体。
2.ID选择器
作用:给某个指定的标签添加指定的样式
注意:任何的HTML标签都可以有id属性,HTML页面,不能出现相同的id,哪怕他们不是一个类型。
结构:
#标签的id属性值{
样式名1:样式值1;
样式名2:样式值2;
......
}
示例:
<style>
#aa{
color: red;
}
</style>
<h1 id="aa">我是中国人</h1>
上述示例意思是id为“aa”的标签,字体颜色设置为红色。
3.类选择器
作用:给不同的标签添加相同的样式
注意:和id非常相似,任何的标签都可以携带id属性和class属性。类选择器可以被多种标签使用。同一个标签可以使用多个类选择器。用空格隔开。
示例:同一个标签使用两个类选择器
<h3 class="teshu zhongyao">我是一个h3啊</h3>
结构:
.类选择器{
样式名1:样式值1;
样式名2:样式值2;
......
}
示例:
<style>
.aa{
color: red;
}
</style>
<h1 class="aa">我是中国人</h1>
上述示例意思是class为“aa”的标签,字体颜色设置为红色。
注意:class属性尽量交给CSS使用,id属性尽量交给JS使用。
4.通用选择器
作用:选择所有HTML标签,并添加相同的样式
结构:
*{
样式名1:样式值1;
样式名2:样式值2;
......
}
示例:
<style>
*{
color: red;
}
</style>
<h1 >我是中国人</h1>
上述示例意思是针对所有标签,字体颜色设置为红色。
CSS的高级选择器
高级选择器:
- 子标签选择器:用空格隔开
- 组合选择器:用逗号隔开
- 属性选择器:标签名[属性名=属性值]
1.后代选择器
后代选择器,描述的是一种祖先结构。当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器。
结构:
选择器,子标签选择器,下一层子标签选择器...{
样式名1:样式值1;
样式名2:样式值2;
......
}
示例:
<style>
div p{
color: red;
}
</style>
<div >
<h1>哈哈哈</h1>
<p>嘿嘿嘿</p>
</div>
上述示例意思是针对div标签下的子标签p,将该路径下的字体颜色设置为红色。
2.组合选择器
作用:解决不同的选择器之间重复样式的问题,三种基本选择器都可以放进来,需要用逗号隔开
结构:
选择器1,选择器2,选择器3...{
样式名1:样式值1;
样式名2:样式值2;
......
}
示例:
<style>
h1,p{
color: red;
}
</style>
<h1>哈哈哈</h1>
<p>啊啊啊</p>
上述示例意思是将h1标签选择器和p标签选择器的字体颜色设置为红色。
3.属性选择器
作用:选择某标签指定具备某属性并且属性值为某属性值的标签
标签名[属性名=属性值]{
样式名1:样式值1;
样式名2:样式值2;
......
}
示例:
<style>
input[type=text]{
background-color: red;
}
</style>
<input type="text" />
<input type="password" />
上述示例意思是将input标签下,属性type为text的标签背景颜色设置为红色。
CSS的伪类(伪类选择器)
伪类用于设置同一个元素在不同状态下的样式。伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover 来描述这个元素的状态。
伪类用冒号来表示。
常用伪类:
- :link-----------------向未被访问的超链接添加样式
- :visited-------------向已被访问的超链接添加样式
- :active--------------当鼠标点击标签,但是不松手时,向该元素添加样式
- :hover--------------当鼠标悬停至元素上方时,向该元素添加样式
- :focus--------------当元素获取焦点时,向该元素添加样式(比如某个输入框获得焦点)
使用伪类选择器效果图如下:
伪类选择器:根据元素的状态选择元素
1.:link
示例:本示例对超链接的不同状态,显示不同的效果。未被访问过的超链接显示为红色,已被访问过的链接显示为绿色。
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
a:link{
color: red;
}
a:visited{
color:green
}
</style>
</head>
<body>
<a href="http://www.baidu.com" >百度一下</a><br />
<a href="http://www.taobao.com" >淘宝</a><br />
<a href="http://www.jd.com" >京东</a><br />
<a href="http://www.cnm.com" >cnm</a><br />
</body>
</html>
2.:visited
示例:本示例对超链接的不同状态,显示不同的效果。未被访问过的超链接显示为红色,已被访问过的链接显示为绿色。
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
a:link{
color: red;
}
a:visited{
color:green
}
</style>
</head>
<body>
<a href="http://www.baidu.com" >百度一下</a><br />
<a href="http://www.taobao.com" >淘宝</a><br />
<a href="http://www.jd.com" >京东</a><br />
<a href="http://www.cnm.com" >cnm</a><br />
</body>
</html>
3.:active
示例:本示例对按钮的不同状态显示不同的效果,当鼠标为点击时,按钮背景色显示为绿色,当鼠标点击且不松手时,显示为棕色。
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input[type=button]{
background-color: greenyellow;
}
input[type=button]:active{
background-color: brown;
}
</style>
</head>
<body>
<input type="button" value="hello"/>
</body>
</html>
4.:hover
示例:本示例对超链接的不同状态显示不同的效果,当鼠标未悬停时,超链接显示为默认黑色,当鼠标悬停时,超链接显示为红色。
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="www.baidu.com" >百度一下</a><br />
<a href="www.taobao.com" >淘宝</a><br />
<a href="www.jd.com" >京东</a><br />
</body>
</html>
5.:focus
示例:本示例对文本框的不同状态显示不同的效果,当未激活文本框时,文本框背景显示为绿色,当文本框被激活时,背景显示为紫色。
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input[type]{
background-color: greenyellow;
}
input[type]:focus{
background-color: blueviolet;
}
</style>
</head>
<body>
<input type="text" />
</body>
</html>
CSS盒子模型
概述
盒子模型,英文即box model。无论是div,span,还是a都是盒子。可以认为每个html标签都是一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒子模型。但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。
结构
一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:
- width和height:内容的宽度、高度(不是盒子的宽度、高度)。
- padding:内边距。
- border:边框。
- margin:外边距。
两种盒子模型:标准盒子模型和IE盒子模型
IE模型和标准模型唯一的区别是内容计算方式的不同
标准盒子模型width=content,高度计算相同。
IE盒子模型width=content+padding
注意:我们目前所学习的知识中,以标准盒子模型为准。使用哪个盒模型可以由box-sizing(CSS新增的属性)控制,默认值为content-box,即标准盒模型;如果将box-sizing设为border-box则用的是IE盒模型。
CSS定位属性
文档流:简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline),不独占一行。只要不是float和绝对定位方式布局的,都在文档流里面。
postion属性:
position 属性自 CSS2 起就有了,该属性规定元素的定位类型。所有主流浏览器都支持 position 属性。
CSS的定位属性有三种,分别是相对定位、绝对定位、固定定位。
position: relative; <!-- 相对定位 -->
position: absolute; <!-- 绝对定位 -->
position: fixed; <!-- 固定定位 -->
相对定位:让元素相对于自己原来的位置,进行位置调整(可用于盒子的位置微调)。
语法:
position: relative; //相对定位:相对于自己原来的位置
left: 50px; //横坐标:正值表示向右移动,负值表示向做移动
top: 50px; //纵坐标:正值表示向下移动,负值表示向上移动
相对定位的定位值
-
left:盒子右移
-
right:盒子左移
-
top:盒子下移
-
bottom:盒子上移
PS:负数表示相反的方向。
示例:
<style>
.div2{
position: relative;
left: 200px;
top: 100px;
}
</style>
<div class="div2">狭路相逢</div>
上述示例的意思是将div2标签相对于原来的位置,向右移动50px,向下移动50px。示意图如下:
绝对定位:定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示,纵坐标用top或者bottom表示。
绝对定位的元素使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父元素进行绝对定位。如果不存在这样的父元素,则相对于 body 元素,即相对于浏览器窗口。
绝对定位与相对定位的一大不同之处就是,当我们把一个元素设置成绝对定位,那么这个元素将会脱离文档流,其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。
绝对定位的参考点(重要)
(1)如果用top描述,那么参考点就是页面的左上角,而不是浏览器的左上角:
(2)如果用bottom描述,那么参考点就是浏览器首屏窗口尺寸(好好理解“首屏”二字),对应的页面的左下角:
首屏:可见屏幕上的窗口大小为首屏。
“首屏”示意图如下所示:永远针对可见屏幕的窗口大小。
以盒子为参考点
一个绝对定位的元素,如果父辈元素中也出现了已定位(无论是绝对定位、相对定位,还是固定定位)的元素,那么将以父辈这个元素,为参考点。如下:(子绝父相)
以下几点需要注意。
(1) 要听最近的已经定位的祖先元素的,不一定是父亲,可能是爷爷:
<div class="box1"> 相对定位
<div class="box2"> 没有定位
<p></p> 绝对定位,将以box1为参考,因为box2没有定位,box1就是最近的父辈元素
</div>
</div>
再比如:
<div class="box1"> 相对定位
<div class="box2"> 相对定位
<p></p> 绝对定位,将以box2为参考,因为box2是自己最近的父辈元素
</div>
</div>
(2)不一定是相对定位,任何定位,都可以作为儿子的参考点:
子绝父绝、子绝父相、子绝父固,都是可以给儿子定位的。但是在工程上,如果子绝、父绝,没有一个盒子在标准流里面了,所以页面就不稳固,没有任何实战用途。
工程应用:
“子绝父相”有意义:这样可以保证父亲没有脱标,儿子脱标在父亲的范围里面移动。于是,工程上经常这样做:
父亲浮动,设置相对定位(零偏移),然后让儿子绝对定位一定的距离。
(3)绝对定位的儿子,无视参考的那个盒子的padding:
下图中,绿色部分是父亲div的padding,蓝色部分p是div的内容区域。此时,如果div相对定位,p绝对定位,那么,
p将无视父亲的padding,在border内侧为参考点,进行定位:
固定定位:就是相对浏览器窗口进行定位。无论页面如何滚动,这个盒子显示的位置不变。
用途1:网页右下角的“返回到顶部”
比如我们经常看到的网页右下角显示的“返回到顶部”,就可以固定定位。
<style type="text/css">
.backtop{
position: fixed;
bottom: 100px;
right: 30px;
width: 60px;
height: 60px;
background-color: gray;
text-align: center;
line-height:30px;
color:white;
text-decoration: none; /*去掉超链接的下划线*/
}
</style>
用途2:顶部导航条
我们经常能看到固定在网页顶端的导航条,可以用固定定位来做。
需要注意的是,假设顶部导航条的高度是60px,那么,为了防止其他的内容被导航条覆盖,我们要给body标签设置60px的padding-top。
<style type="text/css">
.backtop{
position: fixed;
bottom: 100px;
right: 30px;
width: 60px;
height: 60px;
background-color: gray;
text-align: center;
line-height:30px;
color:white;
text-decoration: none; /*去掉超链接的下划线*/
}
</style>
用途2:顶部导航条
我们经常能看到固定在网页顶端的导航条,可以用固定定位来做。
需要注意的是,假设顶部导航条的高度是60px,那么,为了防止其他的内容被导航条覆盖,我们要给body标签设置60px的padding-top。
顶部导航条的实现如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/*为什么要写这个?*/
/*不希望我们的页面被nav挡住*/
padding-top: 60px;
/*IE6不兼容固定定位,所以这个padding没有什么用,就去掉就行了*/
_padding-top:0;
}
.nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
z-index: 99999999;
}
.inner_c{
width: 1000px;
height: 60px;
margin: 0 auto;
}
.inner_c ul{
list-style: none;
}
.inner_c ul li{
float: left;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
}
.inner_c ul li a{
display: block;
width: 100px;
height: 60px;
color:white;
text-decoration: none;
}
.inner_c ul li a:hover{
background-color: gold;
}
p{
font-size: 30px;
}
.btn{
display: block;
width: 120px;
height: 30px;
background-color: orange;
position: relative;
top: 2px;
left: 1px;
}
</style>
</head>
<body>
<div class="nav">
<div class="inner_c">
<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>
<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>
</div>
</div>
</body>
</html>
CSS的z-index属性
z-index属性:表示谁压着谁。数值大的压盖住数值小的。
有如下特性:
(1)属性值大的位于上层,属性值小的位于下层。
(2)z-index值没有单位,就是一个正整数。默认的z-index值是0。
(3)如果大家都没有z-index值,或者z-index值一样,那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
(4)只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的元素不能用。
(5)从父现象:父亲怂了,儿子再牛逼也没用。意思是,如果父亲1比父亲2大,那么,即使儿子1比儿子2小,儿子1也能在最上层。
使用CSS的流程
1.声明CSS代码域
2.使用选择器选择要添加样式的标签(一般使用通用选择器来给整个页面添加基础样式,使用类选择器给不同的标签添加基础样式,使用标签选择器给某类标签添加基础样式,使用id,属性选择器,style属性声明方式给某个标签添加个性化样式)
3.书写样式单
边框设置 border:solid 1px;
字体设置 font-size:10px; font-family:"黑体"; font-weight:bold;
字体颜色设置 color:red;
背景颜色设置 background-color:red;
背景图片设置 backgrouond-img:url(图片的相对路径); background-repeate:no-repate; background-size:cover;
高和宽设置 width:10; height:10;
浮动设置 float:left|right;
行高设置 line-height:10;
参考链接:
https://www.cnblogs.com/qianguyihao/p/4853995.html
https://www.cnblogs.com/qianguyihao/p/4855106.html
https://www.cnblogs.com/qianguyihao/p/7253929.html
https://www.cnblogs.com/qianguyihao/p/7256371.html
https://www.cnblogs.com/qianguyihao/p/7297736.html
https://www.cnblogs.com/qianguyihao/p/8277895.html
https://www.cnblogs.com/qianguyihao/p/8280814.html
https://www.cnblogs.com/qianguyihao/p/8296748.html
https://www.cnblogs.com/qianguyihao/p/8426799.html
https://www.cnblogs.com/qianguyihao/p/8430898.html
https://www.cnblogs.com/qianguyihao/p/8435182.html
https://www.cnblogs.com/qianguyihao/p/8476602.html
https://www.cnblogs.com/qianguyihao/p/8512617.html