1 CSS介绍&引入方式

1 CSS介绍

  • 我们为什么需要CSS

    使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。

CSS的出现解决了下面两个问题：

1. 将HTML页面的内容与样式分离。
2. 提高web开发的工作效率。

  • 什么是CSS

    CSS是指层叠样式表(**C**ascading **S**tyle **S**heets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

CSS的优势:

  1.内容与表现分离 
  2.网页的表现统一，容易修改维护
  3.丰富的样式，使页面布局更加灵活 
  4.减少网页的代码量，增加网页浏览器速度，节省网络带宽 
  5.运用独立页面的css,有利于网页被搜索引擎收录
  6.多设备的兼容性

  • 如何使用CSS

    我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过`link`标签引用该CSS文件即可。这样浏览器在解析到该`link`标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。

2 CSS的基本语法

image

CSS的基本语法由选择器、属性、属性的值组成，如果选择符有多个属性，由分号隔开。
注意，这里的代码都是英文格式，例如花括号、冒号和分号。


3 CSS的引入方式

CSS样式有三种不同的使用方式，分别是行内样式，嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。

  • 行内样式
    行内样式，就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式，因为那样不利于后期维护。

    <div style="color: white;background-color: #369;text-align: center">行内设置</div>

  • 嵌入式
    嵌入式，是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊，单独的样式时，可以使用内部样式表。

    <!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>title</title>
	<meta charset="utf8">

	<style>
		div{
			color: white;
			background-color: #369;
			text-align: center
		}
	</style>
</head>
<body>

<div> 嵌入式</div>

</body>
</html>

  • 外部式 - link标签（推荐使用）
    链接式，就是把CSS样式写在HTML文档的外部，一个后缀为 .css 的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时，外部样式表是最理想的选择。在使用外部样式表的情况下，我们可以通过改变一个文件来改变这所有页面的外观。

    common.css:

    div{
  color: white;
  background-color: #369;
  text-align: center
}

    html文件

    <!DOCTYPE HTML>
<html lang="en-US">
  <head>
	 <title>title</title>
	  <meta charset="utf8">

	  <link rel="stylesheet" href="common.css">
  </head>
  <body>

  <div>链接式</div>

  </body>
</html>
posted @ 2022-08-04 15:33  角角边  Views(136)  Comments(0)    收藏  举报