Note
December 16, 2024

CSS学习笔记

0. CSS 综述

What is CSS ？

CSS：层叠样式表
特性：样式和内容/结构是分离的
用途：HTML 表达结构，CSS 表达样式。

1. CSS 样式基础

1.0 CSS 样式定义方式

1
2
3
4
5
<head>
	<style>
		/* code */
	</style>
</head>
1
2
<p style="background-color: yellow;">
</p>

1.1 CSS 样式继承关系

内嵌样式 > 头文件样式 > 外部 CSS 样式

2. CSS 背景样式

2.0 设置背景颜色 background-color

1
2
<p style="background: color/image/repeat/attachment/position ">
</p>
1
2
<body style="background-color: gray;">
</body>
1
2
3
4
5
6
7
8
9
10
11
/* 16进制表示 */
<body style="background-color: #FF0000">
</body>

/* 10进制表示-rgb */
<body style="background-color: rgb(255, 255, 0)">
</body>

/* 10进制表示包含透明度-rgba */
<body style="background-color: rgba(255, 255, 0, 0.5)">
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 基础设置 */
<body style="background-image: url(/images/hands1440.jpg);">
</body>

/* 设置图片位置 */
<body style="background-image: url(/images/hands1440.jpg); background-position: top right(or: 100px 100px);">
</body>

/* 铺设单张或多张图片 */
<body style="background-image: url(/images/hands1440.jpg); background-repeat: no-repeat;" >
</body>

/* 设置图片跟随滑动或固定 */
<body style="background-image: url(/images/hands1440.jpg); background-attachment: scroll/fixed;">
</body>

3. CSS 文本样式

3.0 段落样式

1
2
<p style="color: red;">
</p>
1
2
3
4
5
6
7
/* 缩进2字符 */
<p style="text-indent: 2em;">
</p>

/* 反向缩进2字符 */
<p style="text-indent: -2em;">
</p>
1
2
<p style="padding: 2em;">
</p>
1
2
<p style="line-height: 2;">
</p>
1
2
<p style="text-align: left;">
</p>
1
2
<p style="word-spacing: 30px;">
</p>

设置英文词空格间距大小

3.1 字体样式

1
2
<p style="font-family: Times, TimesNR, serif; ">
</p>
1
2
3
4
5
6
7
/* bold 加粗 */
<p style="font-weight: bold;">
</p>

/* 数字 */
<p style="font-weight: 200;">
</p>
1
2
3
4
5
6
7
/* 原字符的2倍 */
<p style="font-size: 2em;">
</p>

/* 像素数大小 */
<p style="font-size: 10px;">
</p>

3.2 文本效果

1
2
3
4
5
6
7
/* 一般阴影 */
<p style="text-shadow: 3px 5px 5px rgba(0,255,0,0.5)">
</p>

/* 多块阴影: 雕刻字效果 */
<p style="text-shadow: 0px -1px 0px #000000, 0px 1px 3px #606060; color: #606060;">
</p>
1
2
<p style="outline-color: red; outline-style: solid; outline-width: 10px;">
</p>

4. CSS 列表和表格样式

4.0 列表样式

1
2
<ul style="list-style-image: url(Star.png)">
</ul>

4.1 表格样式

1
2
<table style="border: 1px solid blue">
</table>
1
2
3
4
5
6
7
/* 合并为一条框线 border-collapse:collapse */
<table style="border: 1px solid blue; border-collapse:collapse">
</table>

/* 不合并为一条框线 border-collapse:separate */
<table style="border: 1px solid blue; border-collapse:seperate">
</table>

5. 盒子模型和定位

5.0 盒子模型

最终元素的总宽度计算公式：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

5.1 定位

1
2
3
4
5
6
7
8
9
/* 相对定位 */
<p style="position: relative; left: -20px; bottom: 20px;"></p>

/* 绝对定位 */
<p style="position: absolute; left: -20px; bottom: -20px;"></p>

<div style="position: absolute; top:120px">
	<p style="position: absolute; left: -20px; bottom: -20px;"></p>
</div>
1
<img src="hello.jpg" width=200 height=200 style="float:right" />

6. 样式选择器

6.0 id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id="para1":

1
2
3
4
5
#para1
{
    text-align:center;
    color:red;
}

6.1 class 类选择器

class 选择器用于描述一组元素的样式，可以在多个元素中使用

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 **.** 号显示：

以下例子中所有拥有 center 类的 HTML 元素均为居中

1
.center {text-align:center;}

如所有的 p 元素使用 class=”center” 让该元素的文本居中:

1
p.center {text-align:center;}

多个 class 选择器可以使用空格分开：

1
2
.center { text-align:center; }
.color { color:#ff0000; }

About this Post

This post is written by Tab Yang, licensed under CC BY-NC 4.0.

#note#web#html#css