知识点
- CSS样式表的书写位置
- 内嵌式
- 外链式
- 行内样式表
- 标签分类
- 块元素
- 行内元素
- 行内块元素
- 块元素、行内元素
- CSS三大特性
- 链接伪类
- 背景属性
CSS样式表的书写位置
- 内嵌式写法
<head>
<style type=”text/css”>
样式表写法
</style>
</head>
- 外链式写法
写在head里
<link rel=”stylesheet” href=”1.css”>
- 行内样式表
写在标签上
<h1 style="font-size:30px; color:red">霸气威武</h1>
三种写法特点:
★ 内嵌式写法,样式只作用于当前文件,没有真正实现结构表现分离。
★ 外链式写法,作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离。
★ 行内样式表,作用范围仅限于当前标签,范围小,结构表现混在一起。 (不推荐使用)
标签分类(显示方式)
块元素
- 特点:
★ 独占一行
★ 可以设置宽高
★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致。 - 典型代表
div
h1~h6
p
ul
li
行内元素
特点:
★ 在一行上显示
★ 不能直接设置宽高
★ 元素的宽和高就是内容撑开的宽高。
- 典型代表:
span
a
strong
em
del
ins
行内块元素(内联元素)
- 特点:
★ 在一行上显示
★ 可以设置宽高 - 典型代表
input
img
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
width: 300px;
vertical-align: top;
}
input{
width: 300px;
height: 200px;
background-color: #ffff00;
}
</style>
</head>
<body>
![](top.jpg)
<input type="text" name="myname"/>
</body>
</html>
块元素、行内元素转换
- 块元素转行内元素
display:inline;
块元素被转为行内元素就不再具有块元素的特性,而具有行内元素的所有特性
- 行内元素转块元素
display:block;
- 块元素或行内元素转行内块元素
display:inline-block;
css三大特性
层叠型
当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
继承性
-
继承性发生的前提是包含(嵌套关系)
★ 文字颜色可以继承
★ 文字大小可以继承
★ 字体可以继续
★ 字体粗细可以继承
★ 文字风格可以继承
★ 行高可以继承总结:文字的所有属性都可以继承。
特殊情况:
h系列不能继承文字大小。(实质上是继承了,h1默认的文字大小是2em,如果继承过来的文字大小为60,则h1的文字大小变为260*)
a标签不能继承文字颜色。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*.father{
color: red;
font-size: 50px;
font-family: 宋体;
font-weight: 700;
font-style: italic;
line-height: 20px;
}*/
.box{
font-size: 60px;
color: red;
}
</style>
</head>
<body>
<!-- <div class="father">
<p>14威武</p>
</div> -->
<div class="box">
<h1>威武</h1>
<h2>nihaoh2</h2>
<h3>nihaoh2</h3>
<a href="#">你好</a>
<p>你好</p>
</div>
</body>
</html>
优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 100以上
注意:数字知识描述权重的大概,并不是精确的。
- 优先级特点
★ 继承的权重为0
★ 权重会叠加
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
color: red !important;
}
.box{
color: green;
}
#con{
color: yellow;
font-size: 50px;
}
</style>
</head>
<body>
<div class="box" id="con" style="font-size:100px;color:blue;">nihao</div>
</body>
</html>
权重叠加:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p.son{/* 权重叠加: 1+10=11 */
color: yellow;
}
p{
color: red;
}
.son{
color: blue;
}
.father .son{/*权重叠加:10+10=10;*/
color: green;
font-size: 50px;
}
.father #baby{/*权重叠加:10+100=110;*/
color: orange;
font-size: 70px;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="baby">web威武</p>
</div>
</body>
</html>
链接伪类
a:link{属性:值;} a{属性:值}效果是一样的。
a:link{属性:值;} 链接默认状态
a:visited{属性:值;} 链接访问之后的状态
a:hover{属性:值;} 鼠标放到链接上显示的状态
a:active{属性:值;} 链接激活的状态
:focus{属性:值;} 获取焦点
注意:如果四个链接伪类都使用,必须按顺序书写。
导航条案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.nav{
text-align: center;
height: 60px;
background-color: #aaa;
}
a{
display: inline-block;
width: 100px;
height: 100%;
line-height: 60px;/*垂直方向要居中必须添加此属性*/
vertical-align: center;
text-decoration: none;
font-weight: 700;
}
a:hover{
background-color: #eee;
text-decoration: underline;
}
.public{
color: #f14400;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="public">天猫</a>
<a href="#" class="public">聚划算</a>
<a href="#" class="public">超市</a>
<a href="#" class="public">头条</a>
<a href="#">阿里旅游</a>
<a href="#">电器城</a>
<a href="#">淘抢购</a>
<a href="#">苏宁易购</a>
<a href="#">智能生活</a>
</div>
</body>
</html>
背景效果
background-color
背景颜色background-image
背景图片Background-repeat
repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺repeat:默认值,水平和垂直方向都平铺
no-repeat:水平和垂直方向都不平铺
repeat-x:只有水平方向平铺
repeat-y:只有垂直方向平铺
当同时有两个属性:repeat-x|repeat-y;相当于默认值repeat,水平和垂直方向都平铺。
Background-position
left | right | center | top | bottom 背景定位当只写水平方位的时候,垂直方位居中
background-position: right;
- 当只写垂直方位的时候,水平方位居中:
background-position: top;
- 当写两个值的时候,顺序无要求
background-position: right bottom;
background-position: bottom right;
上面的效果是一样的
- 写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向。
background-position: 200px 50px;
-
Background-attachment
背景是否滚动scroll | fixed
scroll:是指当标签滚动的时候,被跟着滚动直到消失
fixed:是指当标签滚动的时候,背景不会跟着标签滚动。
注意:
当background-position: center;
background-attachment: fixed;
,此时的背景图不再是基于div的居中了,而是基于浏览器的body的居中,所以这个时候如果div变小,背景图片可能会看不见。
当background-position: center;
background-attachment: scroll;
,这个时候才是基于div的居中,无论div的多大,都在div的中间。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
/*无论是设置背景颜色还是背景图片都必须有高度,否则没有效果*/
height: 400px;
background-color: #999;
background-image: url('1.png');
background-repeat:no-repeat; /* repeat-x|repeat-y;这样相当于:repeat */
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box">
<p>nihao</p>
<p>nihao</p>
<p>nihao</p>
<p>nihao</p>
<p>nihao</p>
<p>nihao</p>
......
<!--- 多复制几个p标签,让浏览器出现滚动条,测试background-attachment: fixed|scroll属性 ---->
</div>
</body>
</html>
- 背景属性连写
background: red url('1.png') repeat-x top fixed;
注意:
1.连写的时候没有顺序要求
2.url('1.png')
不能省略,其他都可以省略
练习
-
搜索框的案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input{
width: 470px;
height: 30px;
background: white url('search.jpg') no-repeat 440px center scroll;
}
</style>
</head>
<body>
<input type="text" name="mytext" placeholder="请输入关键字">
</body>
</html>
-
带图标的列表
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li{
list-style-type: none;
background: white url('li.gif') no-repeat left center scroll;
text-indent: 1.5em;
}
</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>
- 购物车
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
display: inline-block;
background:url('110.png');
width: 67px;
height: 32px;
}
a:hover{
background: url('110.png') bottom;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
- 五彩导航
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
display: inline-block;
width: 120px;
height: 58px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
a.one{
background:url('images/bg1.png');
}
a.one:hover{
background:url('images/bg2.png');
}
a.two{
background:url('images/bg4.png');
}
a.two:hover{
background:url('images/bg3.png');
}
a.three{
background:url('images/bg5.png');
}
a.three:hover{
background:url('images/bg6.png');
}
a.four{
background:url('images/bg7.png');
}
a.four:hover{
background:url('images/bg3.png');
}
</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>
</body>
</html>