CSS3给网页穿上美丽的外衣
Posted tea_year
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 格式
以上是关于CSS3给网页穿上美丽的外衣的主要内容,如果未能解决你的问题,请参考以下文章