参考链接: CSS教程 | 菜鸟教程
相关文章:
HTML基础复习(告一段落)
HTML中一些元素/属性的区别(更新中)
目录
- 1 CSS简介
- 2 CSS语法
- 3 CSS 常用的选择器
- 3.1 标签选择器
- 3.2 id选择器
- 3.3 class选择器
- 3.4 通配符选择器
- 4 CSS创建
- 4.1 外部样式表
- 4.2 内部样式表
- 4.3 内联样式
- 5 CSS背景
- 5.1 background-color
- 5.2 background-image
- 5.3 background-repeat
- 5.4 background-position
- 5.5 background-attachment
- 5.6 background
- 6 CSS Text格式
- 6.1 color属性
- 6.2 direction属性
- 6.3 letter-spacing属性
- 6.4 line-height属性
- 6.5 text-align属性
- 6.6 text-decoration属性
- 6.7 text-indent属性
- 6.8 text-shadow属性
- 6.9 text-transform属性
- 6.10 unicode-bidi属性
- 6.11 vertical-align属性
- 6.12 white-space属性
- 6.13 word-spacing属性
- 7 CSS Fonts
- 7.1 font-family
- 7.2 font-style
- 7.3 font-size
- 7.4 font-weight
- 7.5 font-variant
- 8 CSS链接
- 9 CSS列表
- 10 CSS表格
1 CSS简介
- CSS(Cascading Style Sheets)层叠样式表。
- 定义 如何显示HTML。
标准 | 说明 | 解释 |
---|
结构 | 用于对网页元素整理和分类,现阶段主要学习的是HTML | 身体 |
表现 | 用于设置网页元素的版式、颜色、大小等外观样式。主要是指CSS | 外观 |
行为 | 指网页模型的定义及交互的编写,主要是Javascript | 动作 |
- 样式通常储存在 样式表 中,外部样式表通常储存在 CSS文件 中。
- 多个样式定义可层叠为一个。
- 我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观。
2 CSS语法
- 选择器【需要改变样式的HTML元素】 + 一条/多条声明
3 CSS 常用的选择器
3.1 标签选择器
3.2 id选择器
- CSS 中以 # 来定义id选择器。
- HTML 中以 id属性 来定义id选择器。
- id选择器可以为标有特定id的HTML元素指定样式。
- id属性不要以数字开头,部分浏览器无法识别。
- 写在 head 标签内,约束在 style 标签里。
<!DOCTYPE html>
<html lang="zh-CN">
<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>id选择器</title>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World</p>
<p>这个段落不受影响</p>
</body>
</html>
3.3 class选择器
- 用于描述一组元素的样式。
- 有别于id选择器,class可以使用在多个元素中。
- CSS 中以 . 来定义类选择器。
- HTML 中以 class属性 表示。
- 类名第一个字符不能使用数字。
例1:所有拥有center类的HTML元素均为居中
<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>class选择器</title>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中</p>
</body>
例2:指定特定的HTML元素使用class
<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>class选择器</title>
<style>
p.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">标题不受影响</h1>
<p class="center">段落居中</p>
</body>
例3:多个类选择器
<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>多个类选择器</title>
<style>
.center {
text-align: center;
}
.color {
color: #ff0000;
}
</style>
</head>
<body>
<p class="center color">这是一个示例</p>
<p>这个段落不受影响</p>
</body>
3.4 通配符选择器
- 使用*号作为选择器。
- 可以一次性更改所有元素的样式。
4 CSS创建
- 多重样式优先级
- 内联样式> 内部样式 >外部样式 > 浏览器默认样式
4.1 外部样式表
- 用于样式需要应用到很多页面时。
- 通过改变一个文件来改变整个站点的外观。
- 在头部使用<link>标签链接到样式表。
示例
CSS文件
hr {
background-color: red;
height: 5px;
border: none;
}
p {
margin-left: 20px;
color: aquamarine;
}
body {
background-color: black;
}
HTML文件
<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>外部样式表</title>
<link rel="stylesheet" type="text/css" href="mystyle1.css" />
</head>
<body>
<p>这是一个示例</p>
<br />
<hr />
</body>
4.2 内部样式表
- 用于单个文档需要特殊的样式。
- 在头部使用 style 标签定义。
<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>内部样式表</title>
<style>
hr {
height: 5px;
background-color: sienna;
}
p {
margin-left: 20px;
color: aqua;
text-align: center;
}
body {
background-image: url("saturn-flat.png");
}
</style>
</head>
<body>
<p>这是一个示例</p>
</body>
4.3 内联样式
<body>
<p style="color: red; text-align: center;">这是一个示例</p>
</body>
5 CSS背景
5.1 background-color
5.2 background-image
- 设置一个元素的背景图像。
- 元素的背景是元素的总大小,包括填充和边界,但不包括边距。
- 默认情况下放置在元素的左上角。
- 放置多个图像时,先写的在上层。
- 属性值用时自查。
5.3 background-repeat
属性值 | 描述 |
---|
repeat-x | 只在水平方向平铺 |
repeat-y | 只在垂直方向平铺 |
no-repeat | 设置不平铺 |
5.4 background-position
5.5 background-attachment
属性值 | 描述 |
---|
scroll | 背景图片随着页面的滚动而滚动,默认 |
fixed | 背景图片不会随着页面的滚动而滚动 |
local | 背景图片会随着元素内容的滚动而滚动 |
5.6 background
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
6 CSS Text格式
6.1 color属性
属性值 | 描述 |
---|
颜色名称 | 颜色的名称,不区分大小写 |
十六进制 | 十六进制符号 #RRGGBB 或 #RGB |
rgb | 取值是0-255的整数或百分比 |
rgba | a表示透明度,0=透明 |
hsl | hue(0是红色,120是绿色,240是蓝色) |
hsl | saturation饱和度,0%表示灰色阴影,100%是全色 |
hsl | lightness亮度,百分比 |
hsla | 和rgba同理 |
6.2 direction属性
属性值 | 描述 |
---|
ltr | 默认,文本从左到右 |
rtl | 文本方向从右到左 |
inherit | 从父元素继承 deriction 的值 |
<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>文本方向</title>
<style>
div.exl {
direction: rtl;
unicode-bidi: bidi-override;
/*可以分别尝试有这一句和没有这一句运行结果的不同*/
}
</style>
</head>
<body>
<p>一些默认方向的文本</p>
<div class="exl">一些文本。从右到左</div>
</body>
</html>
6.3 letter-spacing属性
属性值 | 描述 |
---|
normal | 默认。规定字符之间没有额外的空间 |
length | 定义字符间的固定空间(允许使用负值) |
inherit | 规定从父元素继承属性的值 |
<head>
<style>
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
6.4 line-height属性
属性值 | 描述 |
---|
normal | 默认。设置合理的行间距 |
number | 设置数字,此数字回合当前的字体尺寸相乘来设置行间距 |
length | 设置固定的行间距 |
% | 基于当前字体尺寸的百分比行间距 |
inherit | 从父元素继承line-height的值 |
6.5 text-align属性
- 属性值都很常见了,left,right,center。
属性值 | 描述 |
---|
justify | 实现两端对齐文本效果 |
inherit | 从父元素继承text-align的值 |
<style>
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
<body>
<h1>CSS text-align 实例</h1>
<p class="date">2022 年 10 月 27 号</p>
<p class="main">
“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”
</p>
</body>
6.6 text-decoration属性
- 用于设置或删除文本的装饰。
- 主要是用于删除链接的下划线。
- 实际上是 text-decoration-line text-decoration-color text-decoration-style 三种属性的简写。
属性值 | 描述 |
---|
none | 默认,定义标准的文本 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 穿过文本的一条线。 |
inherit | 继承父元素。 |
<style>
h1 {
text-decoration: overline red;
}
h2 {
text-decoration: line-through wavy blue;
}
h3 {
text-decoration: underline dotted green;
}
a {
text-decoration: none;
}
</style>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<a href="https://www.runoob">菜鸟教程</a>
</body>
6.7 text-indent属性
6.8 text-shadow属性
text-shadow: h-shadow v-shadow blur color;
属性值 | 描述 |
---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的距离 |
blur | 模糊的距离 |
color | 阴影的颜色 |
6.9 text-transform属性
属性值 | 描述 |
---|
none | 默认。小写字母或大写字母都有 |
capitalize | 每个单词的首字母大写 |
uppercase | 仅大写字母 |
lowercase | 仅小写字母 |
inherit | 继承父元素 |
6.10 unicode-bidi属性
- 和 direction 属性一起使用,设置文本是否被重写。
- 便于在同一文档中支持多种语言。
属性值 | 描述 |
---|
normal | 默认。不使用附加的嵌入层面 |
embed | 创建一个附加的嵌入层面 |
bidi-override | 创建一个附加的嵌入层面。重新排序的方向取决于direction属性(ltr/rtl) |
initial | 设置该属性为它的默认值 |
inherit | 继承父元素 |
6.11 vertical-align属性
- 设置行内元素的基线相对于该元素所在行基线的垂直对齐方式。
6.12 white-space属性
6.13 word-spacing属性
7 CSS Fonts
font-style font-variant font-weight font-size/line-height font-family
属性 | 描述 |
---|
font | 在一个声明中设置所有字体的属性 |
font-style | 规定字体样式 |
font-variant | 规定字体异体 |
font-weight | 规定字体粗细 |
font-size/line-height | 规定字体尺寸和行高 |
font-family | 规定字体系列 |
7.1 font-family
- 设置文本的字体系列。
- 当字体系列的名称超过一个字是需要使用引号。
- 多个字体系列使用逗号隔开。
- 属性值就是各种字体的名字,有很多
7.2 font-style
属性值 | 描述 |
---|
normal | 正常显示文本 |
italic | 以斜体字显示文本(使用文字的斜体) |
oblique | 文字向一边倾斜(让没有斜体属性的文字倾斜) |
7.3 font-size
- 用于设置文字的大小。
- 默认值是16px。
- 推荐使用em来设置字体大小。
- 1em的默认大小为16px,em=px/16。
字体大小值 | 区别1 | 区别2 |
---|
绝对大小 | 设置一个指定大小的文本 | 不允许用户在浏览器中改变文字大小 |
相对大小 | 相对于周围的元素设置大小 | 允许用户在浏览器中改变文字大小 |
<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
7.4 font-weight
属性值 | 描述 |
---|
normal | 默认,对应数是400 |
bold | 粗体,对应数是700 |
bolder | 更粗 |
lighter | 更细 |
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
<body>
<p class="normal">这是一段话</p>
<p class="light">这是一段话</p>
<p class="thick">这是一段话</p>
<p class="thicker">这是一段话</p>
</body>
7.5 font-variant
- 将所有小写字母转换为大写,但是和其他字母相比尺寸会更小。
属性值 | 描述 |
---|
normal | 默认 |
small-cap | 显示小型大写字母 |
8 CSS链接
链接状态 | 描述 |
---|
a:link | 未访问链接 |
a:visited | 已访问链接 |
a:hover | 鼠标移动到链接上时 |
a:active | 鼠标点击时 |
- 顺序规则:L(link)OV(visited)E and H(hover)A(active)TE
- 后者必须在前者定义后定义才有效。
<style>
a:link,
a:visited {
display: block;
font-weight: bold;
color: white;
background-color: greenyellow;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover,
a:active {
background-color: green;
}
</style>
<body>
<a target="_blank" href="https://www.baidu">这是一个链接</a>
</body>
9 CSS列表
属性 | 值 | 描述 |
---|
list-style | | 在单个属性中指定所有的列表属性 |
list-style-image | URL | 将指定的图像设置为列表项标志 |
– | none | 默认,无图形被显示 |
list-style-position | inside | 设置列表中列表项标志在文本以内,且环绕文本根据标记对齐 |
– | outside | 默认值,保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 |
list-style-type | 太多了,自查 | 设置列表项标志的类型 |
- | none | 用于移除小标记 |
- 使用list-style时属性设置顺序:type/position/image
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.a {
list-style-type: upper-roman;
}
ol.b {
list-style-type: lower-alpha;
}
ol.c {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<body>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
10 CSS表格
<style>
caption {
caption-side: top;
text-align: center;
padding-bottom: 20px;
}
table,
th,
td {
border: 1px solid black;
text-align: center;
}
table {
border-collapse: collapse;
height: auto;
margin-left: auto;
margin-right: auto;
}
th {
background-color: green;
color: white;
padding: 15px;
width: 25%;
}
#odd {
background-color: yellowgreen;
}
</style>
</head>
<body>
<table>
<caption>这是一个表格</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr id="odd">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table>
</body>
- border-collapse 边框折叠
- 表格居中有很多种方法,这里使用了页边距居中。
发布评论