CSS3知识点复习与总结
文章目录
一、术语解释
CSS规则 = 选择器 + 声明块
选择器：用来选中元素
- 元素选择器：使用元素名选择（
h1{}） - ID选择器：指定元素ID进行选择（
#id{}） - 类选择器：选中所有声明此类名的元素（
.red{}）
声明块：出现在大括号中，用来声明样式
二、CSS书写位置
1、内部样式表
通常书写在HTML页面的
<head>中，其实写在<body>中也可以，但要注意写在正文前面，先加载样式，后加载内容。
渡一袁进（比喻鬼才）：样式如果写在body最后，加载网页就好像先出来一个没有化妆的，过了一会才化好妆，视觉体验极差
在代码量少的时候，200行以内，可以使用内部样式表，可以提高第一次访问的响应速度，因为少加载了一个CSS文件。
<style>
h1{}
</style>
2、内联样式表，元素样式表
<h1 style="color: gray; background-color: hotpink">现在开始添加样式</h1>
3、外部样式表
将样式书写在独立的CSS文件中
<link rel="stylesheet" href="css/1.css">
为什么推荐使用外部样式表
- 外部样式表可以解决多页面样式重复的问题（便于维护）
- 有利于浏览器缓存，提高页面响应速度
- 有利于代码分离（HTML和CSS），更容易阅读和维护
三、常见样式声明
color（元素内部文字颜色）
- 预设值，常见的颜色单词，如red，blue
- 三原色，色值：（光学三原色，红绿蓝），每个颜色0-255，组合成色值.
- RGB表示法
rgb(0,255,0) - hex16进制表示法：
##FF4400（红绿蓝）
background-color（元素背景颜色）
background-color: #008c8c;
font-size（元素内部文字尺寸大小）
用到两种单位：像素px、em
- 像素px，绝对单位
- em，相对单位，相对于父元素的字体大小
每个元素都必须有字体大小，如果没有声明，则使用父元素的字体大小，如果没有父元素（HTML），则使用基准字号，基准字号在浏览器设置中。
font-weight（文字粗细程度）
可以使用数字和预设值（单词），默认值为“normal=400”
- 数字：默认为400，加粗为700
- 预设值：常用normal，bold
- strong也有加粗的效果
font-weight: bold;
<strong>表示重要的不能忽略 的内容</strong>
font-family（文字类型）
字体类型必须用户计算机中存在才有效，因此通常匹配多个字体
通常在末尾加上 sans-serif，如果其他字体都没有，则使用电脑上有的非衬线字体
font-family: consolas,'Times New Roman', Times, serif,微软雅黑,sans-serif;
font-style（字体样式，通常用来设置斜体）
i元素默认倾斜；但是实际使用中，通常用它表示一个图标
em 强调内容，样式为斜体
font-style: italic;
<i>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit, magni.</i>
<em>表示强调的内容，表示为斜体</em>
text-decoration（文本修饰，给文本加线）
- none，用于去掉超链接的下划线
- line-through，删除线
- underline，加下划线
del元素表示错误的内容，样式里面有删除线
s元素表示已经过期的信息，可以在商品原价上用
text-decoration: underline;
text-indent（首行文本缩进）
style="text-indent:2em " #缩进两个中文字符宽度
line-height（行文本高度）
值越大，每行文本之间的距离就越大
设置为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示当前元素字体大小的倍数
line-height: 1.5;
width和height（宽度和高度）
letter-spacing（文字间隙）
letter-spacing: 1em;
text-align（元素内部文字水平排列方式）
text-align: center
样式补充（透明度、盒子隐藏、鼠标、背景图）
透明度、鼠标样式
设置整个元素的透明度（包含所有子元素，文字，都会变得透明）
p{
background-color: black;
opacity: .5;
}
在颜色位置设置阿尔法通道改变透明度
鼠标样式
cursor: pointer;
cursor:url("img/1.ico");
盒子隐藏
最低0.47元/天 解锁文章
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
