百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2024-12-01 19:24 78 浏览

层叠样式表(英文全称：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 选择器

相关推荐

Excel高效技巧:批量合并重复数据的实用指南

在日常数据处理中，我们常会遇到需要合并相邻重复单元格的场景。无论是整理分类标签、统计重复项还是优化报表格式，手动逐个合并不仅耗时且容易出错。本文将详细介绍三种专业高效的批量合并方法，助您轻松应对各种复...

自主研发高速动车组列车又添新成员(新时代画卷)

数据来源：国铁集团">数据来源：国铁集团CR400AF—S型列车驶过重庆。龙帆摄（人民视觉）">CR400AF—S型列车驶过重庆。龙帆摄（人民视觉）CR400BF—GZ型列车行驶在京...

福彩双色球幻圆图的VBA程序(第一部分)

很多朋友喜欢玩福彩双色球彩票，都知道下面的这张图——福彩双色球红球幻圆图和篮球幻方图。图2是福彩双色球2024104期（红色）和2024105期（黄色）的幻圆图。图3是福彩双色球2024105期（红色...

技巧 | 往MCP服务器添加提示词模板

在我的上一篇文章[1]中，我已经构建了一个本地MCP服务器并向其添加了一些工具。在本文中，我们将向该MCP服务器添加提示词。这是如同上一篇博客的文件结构。但在这里，我为此创建了两个新文件。.├──...

Avalonia日志组件实现与优化指南

背景Avalonia目前没有富文本框可实现日志输出显示，但提供了SelectableTextBlock控件可以替换，这是站长实现的一个日志组件效果：可展示日志时间、日志级别、日志详细内容等，后台除输...

vim编辑器最后几行@代表什么意思

使用vim编辑文本时，屏幕下方会出现一些@符号，这些符号代表什么意思？当vim设置了wrap属性时，若一行太长则就会发生折行现象，此时一个逻辑行就会显示多个屏幕行，如下图由于文件的第2行太长，一个真实...

浅色AI云食堂APP完整代码(二)

以下是整合后的浅色AI云食堂APP完整代码，包含后端核心功能、前端界面以及优化增强功能。项目采用Django框架开发，支持库存管理、订单处理、财务管理等核心功能，并包含库存预警、数据导出、权限管理等增...

QML控件:TextInput, TextField, TextEdit, TextArea用法及自定义

本文主要介绍基本元素TextInput,TextField,TextEdit,TextArea等的基本属性。Textlnput与TextField为行编辑控件，TextEdit与T...

WPF - 10.特殊容器控件

摘要这里我们要介绍的特殊容器空间是ScrollViewer，该控件与其他控件不同的是，可以支持滚动显示容器内的元素。下面我们举例说明如何在WPF中使用ScrollViewer控件。新建一个WPF程...

rhino6.0 python中ETO的组件案例

1.按钮组件按钮几乎放置在每个对话框上。创建一个新的按钮很简单。使用forms.Button并指定Text显示在按钮面上。除了创建新按钮外，通常还通过.Click事件附加一个操作。使用+=语法，如下...

Rhino6.0 窗口开发使用角本说明

第1个：生成窗口代码第2点：Eto界面主要由Dialog（主程序界面）、Layout（界面布局）和Controls（控件）三个部分构成，逻辑简单且清晰。这个脚本被分为三个主要部分。该import...

手把手教你搭建属于自己的服务器!

最近总是想搭建自己的网站，奈何皮夹里空空如也，服务器也租不起，更别说域名了。于是我就寻思能否自己搭建个服务器，还不要钱呢？还真行！！！经过几天的冲浪，我发现有两个免费的建站工具：Apache和Ng...

HEAT杂志《欧美猛男》排行!“雷神”居然没进前三!

提到猛男的必备条件，应该就是要有着让人看了会流口水的大块肌肉，而一说到猛男，小编第一个想到的就是spanstyle="text-transform:none;background-color:...

Power Query 表格列历遍函数Table.TransformColumns函数

PowerQuery提取数字应该是非常方便的，EH有这样一道题：一看到这题首先想的是PowerQuery，可能中毒有点深，思路挺简单的，PowerQuery有一个从数字到非数字的分列分列后再提取...

自学前端踩了30个坑，终于整理出这份新手避坑指南

这是我在自学前端的第37天，对着一个简单的HTML页面卡了整整一下午。不是逻辑错误，不是语法问题，只是我不知道为什么，一个div死活居中不了。那时候的我，以为前端就是写写页面、调调样式，直到后来才...

一周热门
最近发表
标签列表