目录
css的介绍
css:层叠样式表
作用:给页面中的html标签设置样式
结构:HTML 表现:CSS 行为:JavaScript
css语法规则
css写在style标签中,style标签一般写在head标签里面,title标签下面
选择器 {
属性名:属性值;
}
css的引入方式
内嵌式:css写在style标签中,style标签通常写在head里
外连式:css写在一个单独的.css文件中,需要通过link标签在网页中引入
行内式:css写在标签的style属性中,之后会配合js使用
引入方式 | 书写位置 | 作用范围 | 使用场景 |
内嵌式 | css写在style标签中 | 当前页面 | 小案例 |
外联式 | css写在单独的css文件中,通过link标签引入 | 多个页面 | 项目中 |
行内式 | css写在标签的style属性中 | 当前标签 | 配合js使用 |
基础选择器
作用:能够使用基础选择器在html中选择元素
标签选择器
结构:标签名{css属性名:属性值;}
作用:通过标签名,找到页面中所有这类标签,设置样式
注意:
1、标签选择器选择的是一类标签,而不是单独某一个
2、标签选择器无论嵌套关系有多深,都能找到对应的标签
类选择器
结构:.类名{css属性名:属性值;}
作用:通过类名,找到页面中所有带这个类名的标签,设置样式
注意:
1、所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
2、类名可以由数字、字母、下划线、中划线组成,但不能以数字或中划线开头
3、一个标签可以同时有多个类名,类名之间以空格隔开
4、类名可以重复,一个类选择器可以同时选中多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
color:green;
}
.red {
color:red;
}
.size {
font-size: 66px;
}
</style>
</head>
<body>
<p class="one">111</p>
<p class="red">222</p>
<div class="red size">类选择器</div>
</body>
</html>
id选择器
配合js加动态效果的
结构:#id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意:
1、所有标签上都有id属性
2、id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的,
3、一个标签上只能有一个id属性值
4、一个id选择器只能选中一个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#two {
color:blue;
}
#one {
color:red;
}
</style>
</head>
<body>
<div id="two">11111</div>
<p id="one">2222</p>
</body>
</html>
通配符选择器
结构:*{css属性名:属性值;}
作用:找到页面中所有的标签,设置样式
注意:
1、开发中使用极少,极特殊情况会用到
2、基础班小页面种可能会用于去除标签默认的margin和padding 内外边距
* {
margin:0;
padding:0;
}
字体和文本样式
字体样式
字体大小
属性名:font-size
取值:数字+px
注意:谷歌浏览器默认文字大小是16px
单位需要设置,否则无效
字体粗细
属性名:font-weight
取值:
关键字:
正常 | normal |
加粗 | bold |
纯数字:100-900的整百数:
正常 | 400 |
加粗 | 700 |
注意:不是所有字体都提供了九种粗细,因此部分取值页面中无变化。
实际开发中以:正常、加粗两种取值使用最多。
字体样式(是否倾斜)
属性名:font-style
取值:
正常(默认值):normal
倾斜:italic
字体
属性名:font-family
常见取值:具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
系统 | 默认字体 |
Windows | 微软雅黑 |
macOS | 苹方 |
常见字体系列:
无衬线字体(sans-serif):例如黑体(网页大多采用)
衬线字体(serif):例如宋体(报刊书籍中应用广泛)
等宽字体(monospace):例如Consolas(程序代码编写,有利于代码的阅读和编写)
div{
如果用户电脑没有安装微软雅黑,就按黑体显示文字
如果电脑没有安装黑体,就按任意一种非衬线字体系列显示
font-family:微软雅黑,黑体,sans-serif;
}
样式的层叠问题
如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效
css层叠样式表
表示样式可以一层一层的层叠覆盖,后覆盖前面
p {
color:red;
color:blue;
}
</style>
</head>
<body>
<p>1111</p>
p会显示蓝色
font复合属性
属性名:font(复合属性)
取值:
font:style weight size family
省略要求:
只能省略前两个,如果省略了相当于设置了默认值
注意:如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
p {
font: italic 700 66px 宋体;
}
div {
font: 100px 微软雅黑;
}
文本样式
文本缩进
属性:text-indent
取值:
数字+px
数字+em (1 em =当前标签的font-size的大小)
p {
text-indent: 32px;
//用这个更方便 就算font-size改变也没事 text-indent:2em;
}
/*首行缩进2个字的大小 默认字号:16px*/
文本水平对齐方式
属性名:text-align
取值:
属性值 | 效果 |
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
注意:
如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
text-align:center能让哪些元素水平居中?
1、文本
2、span标签、a标签
3、input标签、img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
text-align: center;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>新闻标题</h1>
<img src="13.png" alt="">
</body>
</html>
文本修饰
属性名:text-decoration
取值:
属性值 | 效果 |
underline | 下划线(常用) |
line-through | 删除线(不常用) |
overline | 上划线(几乎不用) |
none | 无装饰线(常用) |
注意:开发中会使用 text-decoration:none;清除a标签默认的下划线
行高
作用:控制一行的上下行间距
属性名:line-height
取值:
数字+px
倍数(当前标签font-size的倍数)
应用:
1、让单行文本垂直居中可以设置line-height:文字父元素高度
2、网页精准布局时,会设置line-height:1 可以取消上下间距
行高与font连写的注意点:
如果同时设置了行高和font连写,注意覆盖问题
font:style weight size/line-height family;
p {
//line-height: 50px;
//自己字号的1.5倍
line-height:1.5;
}
谷歌调试工具
css但凡出现删除线都是被别人重叠掉的 或者自己的注释
黄色三角感叹号 css语法出问题
可以进行调试 按键盘箭头
调试可以在上边添加
也可以去掉✔
颜色常见取值
#ff0000 可以简写为#f00
标签居中
标签水平居中方法总结
margin:0 auto;
上下间距0
左右auto
注意:
1、如果需要让div、p、h(大盒子)水平居中,直接给当前元素本身设置即可
2、margin:0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
综合案例一(新闻)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 800px;
height: 600px;
/* background: pink; */
margin: 0 auto;
}
/* h1 {
text-align: center;
} */
/* p {
text-align: center;
} 不是所有的p都居中*/
.center {
text-align: center;
}
.color1 {
color:#808080;
}
.color2 {
color:#87ceeb;
font-weight: 700;
}
a {
text-decoration: none;
}
.suojin {
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<h1 class="center">官方:别墅套房不在价格调控范围 </h1>
<!-- <p class="center">2023-01-13 14:29 来源: 光明网</p> -->
<!-- span在同一行 -->
<p class="center">
<span class="color1">2023-01-13 14:29</span>
<span class="color2">来源:</span>
<a href="#">光明网</a>
</p>
<hr>
<p class="suojin">近日,三亚市市场监督管理局价格处工作人员表示,
酒店价格属市场调节价,政府会在春节期间对旅游客房的价格进行调控,但调控主要针对标准间,别墅套房不在调控范围。
</p>
<p class="suojin">
某在线旅游平台日前发布的《2023年春节旅游市场预测报告》显示,元旦假期期间,三亚酒店单间夜价格最高为二十万元以上,
西双版纳酒店单间夜价格最高为将近八万元。而目前两家酒店春节期间的客房,在线上预订平台上都显示已售罄。
</p>
<p class="suojin">
相关专家建议,根据市场经济规律,节假日期间酒店价格适当调高可以理解,但一定要公开透明,不能价格欺诈,
确保消费者在充分知情的情况下做出自主选择。此外,游客也可以根据自己的消费能力选择合适的酒店。
</p>
<p class="suojin">
“半个多月前,凤凰岛有海景房128元一晚,现在估计四五百元了。”三亚市民闫先生告诉记者,元旦那天,五星级酒店都处于爆满状态,不少游客来三亚游玩。
旅游项目和酒店的价格随之上涨,而旅游热门景点主要集中于亚龙湾、海棠湾,酒店价格也相对较贵。
</p>
</div>
</body>
</html>
综合案例二 (小米九号平衡车)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #f5f5f5;
}
.goods {
width: 234px;
height: 300px;
background-color: #fff;
/* margin让标签div居中 */
margin:0 auto;
/* center让内容居中 */
text-align: center;
/* 图、文字、input这类的标签内容要居中 要给父级去加 */
}
img {
width: 160px;
}
/* 产品标题 */
.title {
font-size: 14px;
line-height: 25px;
}
.info {
font-size: 12px;
color:#ccc;
line-height: 30px;
}
.money {
font-size: 14px;
color:#ffa500;
}
</style>
</head>
<body>
<!-- div是用来网页布局的,一个页面可能用无数次,原则:如果使用div,尽量使用类名控制样式 -->
<div class="goods">
<img src="./九号平衡车.jpg" alt="">
<!-- 两段段落间有空隙 之后工作用h或p完成 div标签没有特殊的样式 很干净-->
<div class="title">九号平衡车</div>
<div class="info">成年人的玩具</div>
<div class="money">1999元</div>
</div>
</body>
</html>