前端入门——css 样式表简介

myzbx 2024-12-01 18:29 32 浏览

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

那css网页HTML有什么关系?

通俗的讲你可以把HTML比作是组成网页的框架，而css则是装饰美化网页的工具。一个没有任何css的网页是排版混乱，杂乱无章的，没有美感的。

本文下来主要介绍下如何在网页中使用css，以及css包括哪些知识点，具体的css知识点会在以后逐一介绍，一篇文章很难讲完。

回顾下HTML基础

css是作用于HTML标签上的，如果你还不是很熟悉HTML，请先学习HTML的知识，再来学习css。

一个HTML标签如下结构：

标签（Tag）—— 元素名称，如a, div
属性（Attribute）—— 元素属性，如href
值（Value）—— 属性值
元素（Element）—— HTML标记中所有的东西：属性、值和内容。

网页中如何使用css

网页中使用css一般有三种，行内样式，内部样式表及外部样式表。

1、行内样式

在html标签的style属性中写css代码，这样的方式就是行内样式。行内样式有个缺点就是对于页面中相同的元素必须每个元素都写一遍css代码，很不方便，所以这时需要使用内部样式表或外部样式表。

如下示例：

<html>
  <head>
		<title>行内样式</title>
  </head>
<body>
    <p style="color:red;font-size:14px;">hello world!</p>
  </body>
  </html>

2、内部样式表

使用<style></style> 标签之间写css代码，就是内部样式表。内部样式表缺点就是当页面复杂的时候，不利于组织代码，把不同模块功能的css代码组织成不同的css文件，这样更加清晰，便于组织维护代码。

如下示例：

<html>
  <head>
  <title>内部样式表</title>
  	<style type="text/css>
  			h1{
        	color: red;
        }
				p{
        	color: bule;
        }
    </style>
  </head>
<body>
  	<h1>标题1</h1>
    <p>hello world!</p>
  </body>
  </html>

3、外部样式表

使用<link href="css文件路径"> 的方式引入外部css 文件，这就是外部样式表，除此之外，在一个css 文件中还可以使用 @import "css文件路径" 引入另外一个css文件。

示例1：

<html>
  <head>
  <title>内部样式表</title>
  <link href="style.css" rel="stylesheet">
  </head>
  <body>
  	<h1>标题1</h1>
    <p>hello world!</p>
  </body>
  </html>

style.css

h1{
  color: red;
}
p{
  color: bule;
}

示例2：

如下代码，在style.css 中使用@import引入一个home.css文件，

style.css

@import "home.css"
h1{
  color: red;
}
p{
  color: bule;
}

home.css

div{
	color: #ff00ff;
}
p{
  color: red;
}

这里特别注意下，home.css 里面的css 选择器如果和style.css 的一样，那么style.css 的样式效果会覆盖home.css 的效果，比如这里p标签最终显示为蓝色，而不是红色。

css语法

css有三个部分组成：选择器、属性和值。

选择器 —— 用来查询选择HTML标签的
属性 —— 设置HTML元素的各种样式
值 —— 应用的样式值

例子：

#id{
	color: red;
}
p{
	color: green;
}
.head{
	color: blue;
  font-size: 12px;
}

如上#id,p,.head 就是选择器，大括号里面冒号前面是属性，冒号后面是值，每行以分号结束。

css 注释

cs样式表中注释语句以“/*”开始，以“*/”结束，如下所示：

/*这是注释*/
/*这是注释，可以多行
 这是注释，可以多行
*/
p{
	color: red; /*黑色字体*/
}

css 的继承和冲突

css 的继承规则是一个html元素的子元素会继承它的所有上级元素样式，有时会把很多外层的的样式叠加在一起，如下示例：

<html>
  <style>
  body{
  	color:red;
    font-size: 12px;
  }
div{
	 background-color: #0000ff;
}
  </style>
  <body>
  <div>
  	<p>段落文字</p>
  </div>
  </body>
  </html>

如上示例中，p段落包含在body中的div元素里，所以p段落继承了body 和 div 的样式，它将显示蓝色背景和红色字体。

如果在上面的示例代码中，再加上 p{color: #ffffff;} ,这个时候，p元素中的文字显示什么颜色？答案是白色，为什么，这就是css 产生冲突了。

在同一个元素上使用了同一个css属性但不同值的时候，就会产生冲突，浏览器会按照最后定义的样式为准。

css知识点

1、css 选择器

2 、css优先级

3、css 间距 —— margin、padding

4、css 盒子模型

5、css字体和文本 —— font

6、css链接样式

7、css颜色和背景 —— color 、background

8、css边框和圆角 —— border

9、css显示 —— display

10、css定位 —— position

11、css浮动 —— float

12、css布局：flex弹性盒子

13、css响应式：媒体查询

14、css 过渡和动画

15、css渐变和阴影

16、css网格

最后

css （层叠样式表）它有很多属性，但是平时只会用到一小部分，学习css不能死记硬背一大堆属性语法，这样没有多大用处，只需要掌握基本的概念和常用语法，基本上就够用了，对于其它的属性在用的时候再查询文档就可以了。

关于css详细内容，后面会按知识点介绍，感谢关注。

下一篇：前端入门——css 选择器

HTML 简介

上一篇：谁创造了 JavaScript ?
下一篇：HTML编辑器

前端入门——css 样式表简介

回顾下HTML基础

网页中如何使用css

css语法

css知识点

最后

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」