CSS基础知识

浅笑心柔142

于 2024-08-20 15:25:02 发布

阅读量485

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_72013756/article/details/141357568

版权

一、CSS介绍

1、什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)又叫级联样式表
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
CSS文件后缀名为.css

在学习CSS之前，你需要具备HTML的基本知识。

2、为什么使用CSS？

让网页具有美观一致的页面

CSS允许您针对HTML元素应用特定的样式。

CSS的主要好处在于，它允许你将样式与页面内容进行分离。

仅使用HTML，样式将和页面内容格式混杂在一起，这样的页面将会变得难以维护。

所有的web页面样式都可以（也应该）从HTML文档中分离出来，建立成一个单独的CSS文件再进行引用。

3、CSS的优点

节省时间 ：可以编写一次CSS，然后在多个HTML页面中通过外部引入多次重复使用
页面加载速度更快：通过使用CSS，就不需要每次都编写HTML标记属性，只需要编写一个标记的CSS规则，并将其应用于该标记的所有实例，因此代码大大减少也就意味着下载时间短。
易于维护 ：如果要进行全局更改，则只需更改样式，所有网页中的所有元素都将会自动更新。
多设备兼容性 ：样式表允许针对多种不同类型的设备进行优化内容。

浏览器在样式表中从上到下读取样式定义。这也说明我们在样式表中定义的样式将覆盖样式表中先前定义的任何先前样式，不过我们可以在后面的元素中重新定义则不会被覆盖。

二、内联、内部样式、外部引用CSS

1、内联 CSS（行内样式）

在web文档中直接插入一个CSS是内联样式的使用方法之一。内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。

下面例子展示了，将段落内文本内容的颜色变为红色，背景变为蓝色：

2、内部样式表

在HTML页面的标题部分将内部样式定义在<style>元素中

例如：下列代码中的样式将作用在所有<p>段落中

3、外部引用CSS（推荐）

通过这种方法将所有的CSS样式保存在同一个后缀名为.css的拓展文件中。

然后通过html标签<link>在HTML页面的<head>部分将CSS文件引入。

如下例子所示：

HTML部分：

CSS部分：

结果：

相对路径和绝对路径都可以用来定义CSS文件的href。在我的示例中，路径是相对的，因为CSS文件与HTML文件位于同一目录中。

三、CSS规则与选择器

1、CSS语法

CSS是由浏览器解释的样式规则,然后应用于文档中相应的元素。

样式规则有三个部分：选择器，属性和值。

例如，标题颜色可以定义为：

h1 { color: orange; }

详解：

选择器要指向需要设置样式的HTML元素。

在CSS样式规则中：

各个属性与属性值间以“键值对”形式出现
所有的属性设置都用花括号括起来
属性名与属性值间用冒号连接
多个键值对之间用分号分开

例如：

h2{
  color: red;
  background: #ccc;
  font-size: 16px;
}

2、标签选择器

最常见和易于理解的选择器是标签选择器。该选择器以页面上的元素类型为目标，按标签名分类，为页面中某一类标签指定统一的CSS样式。

其基本语法格式如下：

p {
   color: red;
   font-size:130%;
}

CSS声明总是以分号结尾，而声明组则由大括号包围。

3、CSS注释

在DIV+CSS网页中时常使用html注释与css注释，而各种注释大多作用是在重要代码处加上注释说明注明意思。比如写了一段代码是比较特殊的时常需要改动的CSS代码，为了以后一下即可找到此段代码，这个时候加入CSS 注释加以说明，即可起到说明提示作用。

CSS注释语法为：/* 注释的内容 */

注释是以“斜杠+星号”开始，“星号+斜杠”结束，需要注意是注释字符均为英文半角小写。

/*这是一段注释*/

注释掉的内容是不会显示的，被注释的样式是不会产生对应的效果。

注释是可以跨越多行的，而且写法一样哦

CSS只有一种注释，不管是多行注释还是单行注释，都必须以/*开始，以*/结束，中间加入注释内容。

四、CSS样式的级联与继承

1、CSS级联

级联的顺序，首先要根据起源（origin）将规则分类。

网页的最终外观是不同的样式结合的结果。

通过样式的三个主要来源形成一个级联：

由页面的作者创建的CSS样式
浏览器的默认CSS样式
浏览页面的用户自定义CSS样式

具体优先顺序如下：

页面作者（author）设置的规则 > 用户（user）规则 > 浏览器（browser）规则

2、CSS继承

继承是指属性在页面中流动的方式。除非另有定义，子元素通常会采用父元素的特征。

例子：

<html>
   <head>
      <style>
      .father {
	color: red;

	font-size: 24px;

      }

     </style>
   </head>
   <body>       
      <div class="father">
            <div class="son">子元素</div>
      </div>

   </body>

</html>

结果：