CSS样式入门-CSDN博客

本文链接：https://blog.csdn.net/Digitalmon/article/details/73997626

最近做的小项目需要搭建一个小网站，因此从慕课网上学习HTML+CSS的基础知识，接触到的知识点用这个博客总结出来。

CSS的概念： CSS全称为层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

代码示例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识CSS样式</title>
<style type="text/css">
p{
   font-size:17px;/*设置文字字号*/
   color:red;/*设置文字颜色*/
   font-weight:bold;/*设置字体加粗*/
}
</style>
</head>
<body>
<p>维德说：“未来的技术进步现在已成为不确定的事情，如果人类在太空中一直是蜗牛的速度，那我们就应该尽早开始爬。”</p>
</body>
</html>

举例：修改字体颜色

把要修改颜色的字段用< span>< /span>括起来；
写入如下代码： span { color:red; } .

示例代码：（观察上文的代码，注意css代码出现的位置！）

<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>“我们去哪儿？”程心喃喃地问道。 “<span>去找他们</span>。”罗辑说，这时他的图像更加模糊，而且变成了黑白的。 这话像闪电般照亮了程心黑色的思绪，她和 AA 对视了一眼，她们当然明白<span>“他们”</span>的含意。 罗辑接着说：“他们还在，五年前掩体世界收到了他们发出的<span>引力波</span>信息，很简短的信息，不知道他们在哪儿。‘星环’号在航行时会定期发出呼叫他们的引力波信号，也许你们能找到他们，或者他们找到你们。”</p>
</body>

运行截图：
这里写图片描述

CSS代码语法： css 样式由选择符和声明组成，而声明又由属性和值组成

这里写图片描述

当有多条声明时，中间可以用英文分号“;”分隔，最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。同时为了使用样式更加容易阅读，可以将每条代码写在一个新行内。

CSS注释代码：用/* 注释语句*/来标明（Html中使用< !–注释语句–>)。

CSS样式：
1.内联式：把css代码直接写在现有的HTML标签中，注意要写在元素的开始标签里，并且css样式代码要写在style=”“双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。

如：< p style=”color:red;font-size:12px”>这里文字是红色< /p>

2.嵌入式：把css样式代码写在< style type=”text/css”>< /style>标签之间（本文一开始的例子）。

<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    ......
</body>

3.外部式：外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在< head>内（不是在< style>标签内）使用< link>标签将css样式文件链接到HTML文件内。

语法：< link href=”base.css” rel=”stylesheet” type=”text/css” />

PS：

css样式文件名称以有意义的英文字母命名，如 main.css;
rel=”stylesheet” type=”text/css” 是固定写法不可修改;
< link>标签位置一般写在< head>标签之内 .

示例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>“我们去哪儿？”程心喃喃地问道。 “<span>去找他们</span>。”罗辑说，这时他的图像更加模糊，而且变成了黑白的。 这话像闪电般照亮了程心黑色的思绪，她和 AA 对视了一眼，她们当然明白<span>“他们”</span>的含意。 罗辑接着说：“他们还在，五年前掩体世界收到了他们发出的<span>引力波</span>信息，很简短的信息，不知道他们在哪儿。‘星环’号在航行时会定期发出呼叫他们的引力波信号，也许你们能找到他们，或者他们找到你们。”</p>
</body>
</html>