CSS学习笔记

ScienceLi1125

已于 2023-10-12 18:12:14 修改

阅读量120

点赞数 2

分类专栏：软件开发文章标签： css 学习 html

于 2022-08-10 19:31:21 首次发布

本文链接：https://blog.csdn.net/m0_51976564/article/details/126268927

版权

软件开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文参考 w3school在线教程，仅供本人学习使用。

1. CSS 简介

CSS 是一种描述 HTML 文档样式的语言，用于 html 中文本样式与布局的修饰，从而获得更丰富的效果。

也许你会问，为什么不直接对 html 进行版本升级以增加更多样式，而要发明一种新的语言？因为创建 HTML 的目的是描述网页的内容而不是样式，HTML 从未打算包含用于格式化网页的标签！而 CSS 正是用于对网页样式进行装饰。如果将所有的修饰都写在 html 中，那么一个炫酷的网站的 html 文件可能很大，用户需要好几分钟才能够打开，然而实际内容可能只占代码量的1/10。不仅如此，编写 html 时程序员也会相当恼火，代码可读性太差！

以下给出 CSS 应用在 HTML 中的一个实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS实例</title>
		<style>
			body{
			  background-color:lightblue;
			}
			h1{
			  color:white;
			  text-align:center;
			}
			p{
			  font-family:verdana;
			  font-size:20px;
			}
		</style>
	</head>
	<body>
		<h1>这是一个标题</h1>
		<p>这是一个段落</p>
	</body>
</html>

网页效果如下：

2. CSS 选择器

CSS 选择器用于选取要设置样式的 HTML 元素并设置成目标样式。

（1）元素选择器

元素选择器根据元素名称来选择 HTML 元素，如下代码中选择所有的 <p> 元素并设置样式为居中对齐，并带有红色文本颜色：

p {
  text-align: center;
  color: red;
}

（2）id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。由于元素的 id 在页面中是唯一的，因此 id 选择器用于选择唯一的元素。如下代码中选择id=“para1” 的 HTML 元素：

#para1 {
  text-align: center;
  color: red;
}

（3）类选择器

类选择器选择有特定 class 属性的 HTML 元素。如下代码中选择所有带有 class=“center” 的 HTML 元素将为红色且居中对齐：

.center {
  text-align: center;
  color: red;
}

还可以通过 ’ . ’ + 类名选择拥有特定 class 的元素，如下代码中选择具有 class=“center” 的 <p> 元素设置样式为居中对齐：

p.center {
  text-align: center;
  color: red;
}

（4）通用选择器

通用选择器选择页面上的所有的 HTML 元素。如下代码中选择页面上所有元素设置样式为蓝色且居中对齐：

* {
  text-align: center;
  color: blue;
}

（5）分组选择器

分组选择器用逗号来分隔每个选择器以将不同元素设置成同一样式：

h1, h2, p {
  text-align: center;
  color: red;
}

3. 添加 CSS

有三种插入样式表的方法：外部 CSS、内部 CSS、行内 CSS。

（1）外部 CSS

每张 HTML 页面必须在 head 部分的 <link> 元素内 包含对 外部样式表.css文件 的引用，外部 .css 文件不应包含任何 HTML 标签。通过使用外部样式表，我们只需修改外部样式表.css文件即可改变整个网站的外观。

如下代码中将 static\css 文件夹下存储的 mystyle.css 文件导入 HTML 页面：

mystyle.css：

body {
	background-color: lightblue;
}
h1 {
	color: navy;
	margin-left: 20px;
}

HTML 文件：

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="\static\css\mystyle.css">
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>This is a paragraph.</p>
	</body>
</html>

（2）内部 CSS

内部样式是在 head 部分的 <style> 元素中 进行定义。如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS实例</title>
		<style>
			body{
			  background-color:lightblue;
			}
			h1{
			  color:white;
			  text-align:center;
			}
			p{
			  font-family:verdana;
			  font-size:20px;
			}
		</style>
	</head>
	<body>
		<h1>这是一个标题</h1>
		<p>这是一个段落</p>
	</body>
</html>

（3）行内 CSS

行内样式（也称内联样式）可用于单个元素应用唯一的样式。如需使用行内样式，需要将 style 属性添加到相关元素，style 属性可包含任何 CSS 属性。

<!DOCTYPE html>
<html>
	<body>
		<h1 style="color:blue;text-align:center;">This is a heading</h1>
		<p style="color:red;">This is a paragraph.</p>
	</body>
</html>

4. CSS 颜色

（1）RGB和RGBA颜色

rgb(red, green, blue) 指明了 RGB 颜色，rgba(red, green, blue, alpha) 是增加了 alpha 通道的 RGBA 颜色，它指定了颜色的不透明度。

（2）HEX 颜色

#XXXXXX 指明了 HEX 颜色，本质与 RGB 颜色一致，只是表示方法不同。

5. CSS 背景

CSS 背景属性用于定义元素的背景效果

（1）背景颜色

background-color 指定元素的背景色，以及透明度。

（2）背景图片

background-image 指定用作元素背景的图像。

（3）背景重复

background-repeat 属性指定水平和垂直方向上图像的重复与否。background-position 属性用于指定背景图像的位置。

（4）背景附着

background-attachment 属性指定背景图像是滚动还是固定的（是否随页面的其余部分一起滚动）。

以上四个属性可简写为：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

6. CSS 边框

border-style 属性指定要显示的边框线条类型以及显示上、右、下、左哪几个边框。若不设置 border-style 属性，则后续其他 CSS 边框属性都不会起作用。

还有 border-width 属性可以指定四个边框的宽度、border-color 属性用于设置四个边框的颜色、border-top-style, border-right-style, border-bottom-style, border-left-style 属性可以单独指定每个边框的线条样式、border-radius 属性用于添加圆角边框等。

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.one {
        border-style: solid;
        border-color: red green blue yellow;
        border-width: 10px;
      }
    </style>
  </head>
  <body>
    <h1>border-color 属性</h1>
    <p class="one">多色的实线边框</p>
  </body>
</html>

更多边框属性可参考官网。

7. CSS 边距

（1）外边距

CSS 通过 margin-top、margin-right、margin-bottom、margin-left 为元素的每一侧指定外边距的属性。并且外边距允许有负值。

注意，当两个垂直外边距相遇时，它们将形成一个外边距，即外边距合并：

（2）内边距

CSS 通过 padding-top、padding-right、padding-bottom、padding-left 为元素的每一侧指定内边距的属性。

注意，内边距不允许有负值。

上述外边距、内边距和边框、实际内容构成了 CSS 框模型：

8. CSS 高/宽度

CSS 通过 height、width 设置元素的高度和宽度，其中 height 和 width 属性不包括内边距、边框或外边距。它设置的只是元素内边距、边框以及外边距内的区域的高度和宽度。

CSS 还有 max-height、max-width、min-height、min-width 属性来设置元素的最大高度、最大宽度、最小高度和最小宽度。

9. CSS 文本

（1）文本颜色与背景颜色

CSS 通过 background-color、color 属性设置文本颜色与背景颜色：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightgrey;
        color: blue;
      }
      h1 {
        background-color: black;
        color: white;
      }
  	</style>
  </head>
  <body>
    <h1>此标题是带黑色背景的白色文本</h1>
    <p>此页面有灰色背景和蓝色文本。</p>
  </body>
</html>

（2）水平对齐

CSS 通过 text-align 属性设置文本的水平对齐方式，包括左对齐left、居中center、右对齐right、左右对齐justify：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
        width: 200px;
        height: 150px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div>
    	'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
    </div>
  </body>
</html>

（3）垂直对齐

CSS 通过 vertical-align 属性设置文本的垂直对齐方式，包括上对齐top、居中middle、下对齐bottom。

（4）划线

CSS 通过 text-decoration 属性设置文本的划线，包括上划线overline、穿过文本line-through、下划线underline。

（5）字体

CSS 通过 font-family 属性设置文本字体。如果字体名称不止一个单词需要加上引号，如：“Times New Roman”。

注意，为了确保浏览器与操作系统之间的最大兼容性，font-family 属性一般包含多个字体名称作为“后备”系统，用逗号隔开：

.p {
  font-family: "Times New Roman", Times, serif;
}

还有 text-transform 属性指定文本中的大小写字母、text-indent 属性指定文本第一行的缩进、letter-spacing 属性指定文本中字符之间的间距、line-height 属性指定行距、word-spacing 属性指定文本中单词间距、font-style 属性指定斜体文本、font-weight 属性指定字体的粗细、font-size 属性指定文本的大小。