![d0bb916b6ae0888aca6af018a622566f.png](https://i-blog.csdnimg.cn/blog_migrate/45efe398b772829498f730aaaefc42b4.jpeg)
第四章 CSS 概述
第一节 CSS代码语法
• CSS全称为层叠样式表(Cascading Style Sheets),它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
• css代码通常存放在<style></style>标签内
• css 样式由选择符和声明组成,而声明又由属性和值组成
• 选择符{属性:值}例:p{color:red;}
• 选择符:又称选择器,指明网页中要应用样式规则的元素
• 声明:在英文大括号{}中的的就是声明,属性和值之间用英文冒号:分隔。当有多条声明时,中间用英文分号;分隔,如:
p{
font-size:12px;
color:red;
}
第二节 CSS 放置位置
行内样式
• 直接书写在标签的style属性中
• 不建议使用
<div style="width:200px; height:200px;"></div>
内联式样式表
• 写在<style></style>标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
</body>
</html>
外联样式表
• 将一个独立的.css文件引入到HTML文件中,使用<link>标签写在<head>标签中。 链接式会以网页文件主体装载前装载CSS文件。
• rel="stylesheet"定义类型为层叠样式表,一定要写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="My.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
第三节 CSS的继承
• CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。
• 不可继承样式:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
• 可以继承的样式:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor
第五章 CSS 选择器
第一节 选择器的种类
标签选择器
通过标签的名字,修改css样式
div{
width:200px;
height:300px;
}
通配符选择器
• 选择页面中所有的元素
*{
margin:0;
padding:0;
}
属性选择器
后代选择器
• 选择某个父元素下面所有的元素
.box p{
background-color:red;
}
一级子元素选则器
• 选择某个父元素的直接子元素
• 后代选择器是选择父元素的所有子孙元素,一级子元素原则器只选择第一级子元素,不会再向下查找元素
.box>p{
background-color:red;
}
id选择器
通过id查找页面中唯一的标签,用 # 标示id
#wrap{
width:200px;
height:300px;
}
class选择器
通过特定的class(类)来查找页面中对应的标签,以 . class名称
.box{
width:200px;
height:300px;
}
<div class="box"></div>
伪类选择器
• :hover鼠标移入某个元素
.box:hover{
color:red;
}
• :before在某个元素的前面插入内容
div:before{
content:"- 台词";
background-color:yellow;
color:red;
font-weight:bold;
}
• :after在某个元素的后面插入内容
div:after{
content:"- 台词";
background-color:yellow;
color:red;
font-weight:bold;
}
群组选择器
• 可以对多个不同的选择器设置相同的样式
.box,.box1,.box2{
width:200px;
height:300px;
}
第二节 选择器的优先级
• 当有不同的选择器对同一个对象进行样式指定时,并且两个选择器有相同的属性被赋予不同的值时。
• 通过测算那个选择器的权重值最高,应用哪一个选择器的样式
• 权重计算方式
– 标签选择器:1
– class选择器:10
– id选择器:100
– 行内样式:1000
– !important 最高级别,提高样式权重,拥有最高级别
p{width:200px} /*权重 1*/
.box{width:200px} /*权重 10*/
.box p{width:200px} /*权重 11*/
#txt{width:200px} /*权重 100*/
• 如果两个选择器的权重值一样高,则应用距离对象最近的css样式
第六章 CSS样式(属性)
第一节 背景样式
背景颜色background-color
• background-color:red
• 背景颜色的值可以是英文,可以是十六进制颜色值,可以是rgb,也可以是rgba
背景图片background-image
• background-image:url(bg01.jpg);
• 背景图片的大小可以和容器大小不一样
• 背景图片不会占位
• 如果容器大,背景图片小,背景图片会平铺 铺满整个容器
背景图片位置background-position
• background-position:10px 100px;
• 背景图片定位的值是两个单位,分别代表坐标x,y轴
• 背景图片定位的值可以是应为left,right,top,bottom,center
• 背景图片定位的值也可以是百分比或者像素
背景图片重复background-repeat
• background-repeat:no-repeat
• no-repeat 设置图像不重复,常用
• round 自动缩放直到适应并填充满整个容器
• space 以相同的间距平铺且填充满整个容器
背景图片定位background-attachment
• background-attachment:fixed
• 背景图像是否固定或者随着页面的其余部分滚动
• background-attachment的值可以是scroll(跟随滚动),fixed(固定)
background缩写
• background:#ff0000 url(bg01.jpg) no-repeat fixed center
•
第二节 字体样式
字体族font-family
• font-family:"微软雅黑","黑体";
使用逗号隔开多种字体(优先级从前向后,