css样式类型有哪些

来源：互联网 2024-08-31 03:53:32

CSS样式主要包含以下三种类型：行内样式、内部样式和外部样式。

CSS样式类型有哪些？

CSS(层叠样式表，Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等衍生技术)文档的样式的语言，CSS样式可以控制网页的布局、颜色、字体和其他视觉效果，本文将介绍CSS样式类型的主要分类及其特点。

1、内联样式(Inline Styles)

内联样式是直接在HTML元素的"style"属性中定义的CSS样式，这种方式的优点是方便快捷，但缺点是代码冗余且不便于维护。

<p style="color: red; font-size: 16px;">这是一个红色字体的段落。</p>

2、内部样式(Internal Styles)

内部样式是在HTML文档的<head>部分使用<style>标签定义的CSS样式，这种方式的优点是可以将样式与HTML内容分离，便于维护，但缺点是需要将<style>标签放在<head>部分，可能导致页面加载速度较慢。

<!DOCTYPE html><html><head>  <style>    p {      color: red;      font-size: 16px;    }  </style></head><body>  <p>这是一个红色字体的段落。</p></body></html>

3、外部样式(External Styles)

外部样式是在HTML文档外部的CSS文件中定义的样式，这种方式的优点是可以将样式集中管理，便于维护，同时允许多个页面共享同一个样式表，但缺点是需要创建一个额外的CSS文件，并确保所有引用该样式表的HTML文档都正确链接到该文件。

<!DOCTYPE html><html><head>  <link rel="stylesheet" href="styles.css"></head><body>  <p>这是一个红色字体的段落。</p></body></html>

在styles.css文件中：

p {  color: red;  font-size: 16px;}

4、媒体查询(Media Queries)

媒体查询是一种根据设备的特定特性(如屏幕宽度、高度等)来应用不同样式的技术，通过使用媒体查询，可以实现响应式设计，使网站能够适应不同的设备和屏幕尺寸。

/* 当屏幕宽度小于等于600px时 */@media screen and (max-width: 600px) {  p {    font-size: 14px;  }}