CSS3给网页穿上美丽的外衣
CSS3给网页穿上美丽的外衣
二、给网页穿上美丽的外衣
1、本章目标
掌握CSS的语法结构和在网页中的应用
掌握CSS的文本和字体样式
掌握CSS背景样式
2、为什么要使用css
使用css，可以让原始的页面即黑色文字页面变得丰富起来，漂亮起来，实现我们想要的排版布局的效果
3、css是什么
层叠样式表（Cascading Style Sheet）
html是骨架。css是衣服，起到装饰的作用，花花绿绿的
4、CSS的优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
5、css代码书写的位置
1、内联式（头部）
head标签的内部
写法在同一文件里，写在head里面，写style标签里面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是h1</h1>
</body>
</html>2、外联式
在不同的文件中，需要新建一个css 文件，然后在head中写link 按table，在href中写入css代码路径，关联起来即可。同一个html文件，可以引入无数个css文件。
- 新建一个css文件 。示例：外联样式.css
h1{
color: blue;
}- 新建html，导入css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./外联样式.css">
</head>
<body>
<h1>我是h1</h1>
</body>
</html>3、内部
在标签内部，写css样式 在开始标签内部，写style=”color:blue” ，
<body>
<h1 style="color: green;">我是h1</h1>
</body>6、css样式的优先级
css样式的优先级
内部样式>内联样式表>外联样式表
7、css代码样式
选择器{
属性：值；
属性：值；
}
8、选择器的类型
1、标签选择器，通过标签来选择页面元素。直接写标签名
h1{
属性：值；
}
2、id选择器
通过自定义的id来选择元素，id唯一，不可重复id=”id名”
#id名{
属性：值；
}
3、类选择器
通过自定义的类名来选择元素，类可以重复，可以多个，class=”类名”
.类名{
属性：值；
}
9、选择器优先级
ID选择器>类选择器>标签选择器
范围越小，优先级越高
10、字体样式
修改字体时，只要电脑内有的字体都可以进行修改
怎么看电脑内装的字体，计算机，c盘，Windows，fonts,就可以看到我们电脑上装的所有字体
设置字体大小，学习新的一个知识，px像素。
font-weight 取值 100——900的范围 字体加粗
字体颜色：直接color
11、文本样式
- color颜色取值的格式 1、直接写颜色 也要复合写法 yellowgreen 黄绿色 2、16进制 3、RGB 红绿蓝 三原色 颜色不需要记，ui会给你的
- 文字对齐方式 text-align: center 居中 right 右对齐 left 左对齐 对齐参照点不同 ，对齐的方式也不同，以父级元素为标准，不设宽度，默认为浏览器宽度。暂时有这个概念，盒子模型学完就推翻了 如果想要指定对齐，需要设置宽和高 宽：weight 高：hight
- text-indent 首行缩进 单位可以是px，像素，也可以是em，即缩几个字体，根据全部字体的大小来变化，首行缩进用em比较合适 开启控制台进行调整
- line-height： 设置行高，设置文字的垂直居中 line-height，和父元素的高度保持一致，即垂直居中
- 设置文本装饰 text-decoration: line—throw 中划线 underline 下划线 overline 上划线
12、伪类语法
| | |
**注释：**在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
**注释：**在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！
13、鼠标形状 cursor：
hover 当鼠标移动到上面的时候，执行的样式
语法 ：
a:hover{
cursor: move;
}visited 针对a标签超链接，当链接从未访问过时，显示初始颜色，只要点击过，就显示visite设置的颜色。
鼠标指针变化
直接在style下面写属性cursor：值；
其中的值分别代表：
pointer:指针变小手
move: 移动
wait: 等待（不要用）
14、制作京东新闻资讯页
15、div标签
div就是一个容器，一个盒子。把东西都装在一起。目的就是为了方便管理，把页面分成一块一块的，管理界面，进行调整的时候，不需要一个个的调整，可以拿着盒子一个个的调整，更加方便快捷。
背景图片和插入img的图片，img直接插入，背景图片是用来做背景的 ，和桌面一样
坐标移动的原理
div背景图片 图片小 div大
background：url(“图片路径”) no-repeat（不平铺） 坐标（x轴） y轴；
background: url(“1.jpg”) no-repeat 80px 90px;
移动坐标 x轴为左负 右正 y轴为上负 下正 ，可以直接写像素值
若移动左上右下等等，可以直接用上 top 下 bottom 左 left 右 right
居中 center
例：移动到右下
background: url(“1.jpg”) no-repeat right bottom;
div背景图片，图片大，div小的时候
可以直接用坐标进行调整，左负右正，上负下正，控制台，进行调整
练习：
制作我的购物车
16、span标签
span是一个文字标签 等于小括号
移动坐标 x轴为左负 右正 y轴为上负 下正 ，可以直接写像素值
若移动左上右下等等，可以直接用上 top 下 bottom 左 left 右 right
居中 center
例：移动到右下
background: url(“1.jpg”) no-repeat right bottom;
div背景图片，图片大，div小的时候
可以直接用坐标进行调整，左负右正，上负下正，控制台，进行调整
练习：
制作我的购物车
[外链图片转存中…(img-7KtnYo72-1629374083250)]
16、span标签
span是一个文字标签 等于小括号
span的添加，不会对文字造成任何的变化，目的作用在于，将一段文字中的某一个或者几个文字进行样式的更改，可以用span尽心包裹，然后设置span 格式
腾讯云开发者
