基础认知
CSS初识
CSS的介绍
- CSS：层叠样式表（Cascading style sheets）
- CSS作用：给页面中的HTML标签设置样式
CSS 语法规则
- css写在style标签中，style标签一般写在head标签里面，title标签下面
CSS 初体验
- 注意点：
-CSS 标点符号都是英文状态下的
-每一个样式键值对写完之后，最后需要写分号 - 常见属性：
| CSS常见属性 | 作用 |
|---|---|
| color | 文字颜色 |
| font-size | 字体大小 |
| background-color | 背景颜色 |
| width | 宽度 |
| height | 高度 |
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content= "width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: Ored;
font-size: 30px;
background-color:pink;
width: 300px;
height: 300px;
</style>
</head>
<body>
<p>hello world 你好世界</p>
</body>
</html>
CSS引入方式
- 内嵌式：CSS 写在style标签中
-提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中 - 外联式：CSS 写在一个单独的.css文件中
-提示：需要通过link标签在网页中引入 - 行内式：CSS 写在标签的style属性中
-提示：之后会配合js使用
基础选择器
选择器的作用
- 选择器的作用：选择页面中对应的标签（找她），方便后续设置样式（改她）
标签选择器
- 结构：标签名 { css属性名:属性值;}
- 作用：通过标签名，找到页面中所有这类标签，设置样式
- 注意点：
-标签选择器选择的是一类标签，而不是单独某一个
-标签选择器无论嵌套关系有多深，都能找到对应的标签
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content= "width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>标签选择器</p>
</body>
</html>
类选择器
- 结构：.类名 { css属性名:属性值;}
- 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
- 注意点：
-所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
-类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
-一个标签可以同时有多个类名，类名之间以空格隔开
-类名可以重复，一个类选择器可以同时选中多个标签
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content= "width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one{
color:red;
}
</style>
</head>
<body>
<div class="one">类选择器</div>
</body>
</html>
id选择器
- 结构：#id属性值 { css属性名:属性值; }
- 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
- 注意点：
-所有标签上都有id属性
-id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
-一个标签上只能有一个id属性值
-一个id选择器只能选中一个标签
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content= "width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#two {
color:blue;
}
</style>
</head>
<body>
<div id="two"> id选择器</div>
</body>
</html>
补充：类与id的区别
class类名与id属性值的区别
- class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
- id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
类选择器与id选择器的区别
- 类选择器以 . 开头
- id选择器以 # 开头
实际开发的情况
- 类选择器用的最多
- id一般配合js使用，除非特殊情况，否则不要使用id设置样式
- 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）
通配符选择器
- 结构：* { css属性名:属性值; }
- 作用：找到页面中所有的标签，设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content-
<title>Document</ title>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<p>我是p标签</p>
<h1>我是h1标签</h1>
<div>我是div标签</div>
<span>我是span标签</span>
</body>
</html>
字体和文本样式
字体样式
字体大小
- 属性名：font-size
- 取值：数字 + px
- 注意点：
• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效
<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>
p {
font-size: 30px;
}
</style>
</head>
<body>
<!-- 默认字号是16 -->
<p>段落文字</p>
</body></html>
效果如下：
字体粗细
- 属性名：font-weight
- 注意点：
• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以：正常、加粗两种取值使用最多。 - 取值：
关键字：
| 正常 | normal |
|---|---|
| 加粗 | bold |
纯数字：100~900的整百数：
| 正常 | 400 |
|---|---|
| 加粗 | 700 |
<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 {
/* 加粗 */
font-weight: 700;
}
h1 {
/* 不加粗 */
font-weight: 400;
}
</style>
</head>
<body>
<div>这是div</div>
<h1>一级标题</h1>
</body></html>
效果如下：
字体样式（是否倾斜）
- 属性名：font-style
- 取值：
• 正常（默认值）：normal
• 倾斜：italic
<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 {
/* 倾斜 */
font-style: italic;
}
em {
/* 正常的, 不倾斜 */
font-style: normal;
}
</style>
</head>
<body>
<div>div文字</div>
<em>em</em>
</body></html>
效果如下：
常见字体系列（了解）
- 无衬线字体（sans-serif）
• 特点：文字笔画粗细均匀，并且首尾无装饰
• 场景：网页中大多采用无衬线字体
• 常见该系列字体：黑体、Arial
- 衬线字体（serif）
• 特点：文字笔画粗细不均，并且首尾有笔锋装饰
• 场景：报刊书籍中应用广泛
• 常见该系列字体：宋体、Times New Roman
- 等宽字体（monospace）
• 特点：每个字母或文字的宽度相等
• 场景：一般用于程序代码编写，有利于代码的阅读和编写
• 常见该系列字体：Consolas、fira code
字体系列 font-family
-
属性名：font-family
-
常见取值：具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
• 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
• 字体系列：sans-serif、serif、monospace等……
-
渲染规则：
• 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
• 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体 -
注意点：
• 如果字体名称中存在多个单词，推荐使用引号包裹
• 最后一项字体系列不需要引号包裹
• 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
<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 {
/* font-family: 宋体; */
/* 如果用户电脑没有安装微软雅黑, 就按黑体显示文字 */
/* 如果电脑没有安装黑体, 就按任意一种非衬线字体系列显示 */
font-family: 微软雅黑, 黑体, sans-serif;
}
</style>
</head>
<body>
<div>
这是一个div标签
</div>
</body></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>
p {
/* 层叠性: 后面的覆盖前面的属性 */
/* 覆盖 */
color: red;
color: blue;
}
</style>
</head>
<body>
<p>ppppp</p>
</body></html>
效果如下：
字体font相关属性的连写
- 属性名：font (复合属性)
- 取值：font : style weight size family;
- 省略要求：只能省略前两个，如果省略了相当于设置了默认值
- 注意点：如果需要同时设置单独和连写形式
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面
<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>
p {
/* font-size: ;
font-style: ;
font-weight: ;
font-family: ; */
/* font: style weight size 字体; */
/* font: italic 700 66px 宋体;
font-style: normal; */
font: 100px 微软雅黑;
/* 一个属性冒号后面书写多个值的写法 -- 复合属性 */
}
</style>
</head>
<body>
<p>这是p标签</p>
</body></html>
效果如下：
文本样式
文本缩进：text-indent
- 属性名：text-indent
- 取值：
• 数字+px
• 数字+em（推荐：1em = 当前标签的font-size的大小）
<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>
p {
/* text-indent: 50px; */
/* 首行缩进2个字的大小 */
/* 默认字号: 16px ; 32 */
/* text-indent: 40px;
font-size: 20px; */
/* em: 一个字的大小 */
text-indent: 2em;
font-size: 40px;
}
</style>
</head>
<body>
<p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
</body></html>
效果如下：
文本水平对齐方式：text-align
- 属性名：text-align
- 取值：
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
- 注意点：
• 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
<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: 552px;
height: 400px;
background-color: pink;
/* background-color: green; */
text-align: center;
/* 文字是单行的 */
/* 垂直居中技巧: 设置行高属性值 = 自身高度属性值 */
line-height: 400px;
font-size: 61px;
}
</style>
</head>
<body>
<div>文字</div>
</body></html>
效果如下：
标签水平居中方法总结 margin : 0 auto
- div、p、h（大盒子）水平居中：通过margin : 0 auto ; 实现
<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>
效果如下：
文本修饰：text-decoration
- 属性名：text-decoration
- 开发中会使用 text-decoration : none ; 清除a标签默认的下划线
- 取值：
| 属性值 | 效果 |
|---|---|
| underline | 下划线（常用） |
| line-through | 删除线（不常用） |
| overline | 上划线（几乎不用） |
| none | 无装饰性（常用） |
<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: left; */
/* text-align: right; */
text-align: center;
}
body {
text-align: right;
}
</style>
</head>
<body>
<h1>新闻标题</h1>
<img src="./images/1.jpg" alt="">
</body></html>
效果如下：
line-height行高
- 作用：控制一行的上下行间距
- 属性名：line-height
- 取值：
• 数字+px
• 倍数（当前标签font-size的倍数） - 应用：
• 让单行文本垂直居中可以设置 line-height : 文字父元素高度
• 网页精准布局时，会设置 line-height : 1 可以取消上下间距 - 行高与font连写的注意点：
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;
<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>
p {
/* line-height: 50px; */
/* 自己字号的1.5倍 */
/* line-height: 1.5; */
/* 66px 宋体 倾斜 加粗 行高是2倍 */
font: italic 700 66px/2 宋体;
}
</style>
</head>
<body>
<p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析</p>
</body></html>
效果如下：
拓展：颜色常见取值（了解）
-
属性名：
• 如：文字颜色：color
• 如：背景颜色：background-color -
属性值：
| 颜色表示方式及含义 | 属性值 |
|---|---|
| 关键词：预定义的颜色名 | red、green、blue、pink |
| RGB表示法：三原色，每项取值范围：0-255 | rgb(0,0,0,)、rgb(255,255,255)、rgb(255,0,0) |
| rgba表示法：三原色+a表示透明度，取值范围是0-1 | rgba(255,255,0,0.5) |
Chrome调试工具
Chrome调试工具操作
-
打开方式
• ① 右击 → 检查 ② 看哪里 -
选择元素
• 两种常见方法 -
控制样式
• ① 修改属性值 ② 添加属性 ③ 控制样式生效 -
特殊情况
• ① 出现删除线 ② 出现小三角形
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
