CSS简介

最新推荐文章于 2024-04-15 16:37:06 发布

我还可以熬_

最新推荐文章于 2024-04-15 16:37:06 发布

阅读量632

点赞数 1

分类专栏： # css基础文章标签： css 前端 visual studio code

本文链接：https://blog.csdn.net/m0_67093160/article/details/132306970

版权

css基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS

CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

CSS文件后缀名为.css

CSS用于HTML文档中元素样式的定义

核心概念

选择器（Selectors）： 选择器是用来选择要应用样式的HTML元素的模式。它可以基于元素名称、类、ID、属性等来匹配元素。选择器指定了哪些元素将被样式化。
属性（Properties）： 属性是用来定义元素样式的关键字，如颜色、字体大小、边框等。每个属性对应一个或多个值，用于设置样式的具体细节。
值（Values）： 值是属性的具体设置，例如 color 属性的值可以是 "red"、"#00ff00"（颜色代码）等。不同的属性接受不同类型的值。
样式规则（Rules）： 样式规则由选择器和一组属性-值对组成，用于指定哪些元素应用什么样式。例如：
```
p {
    color: blue;
    font-size: 16px;
}
```
样式表（Stylesheets）： 样式表是包含一系列样式规则的文件。它可以内联写在HTML文档中，也可以作为外部文件链接到HTML中。
层叠性（Cascading）： 当多个样式规则应用在同一个元素上时，层叠性决定了哪些规则会被优先采用。层叠性遵循特定的优先级和继承规则，从而确保样式的有效应用。
- 盒模型（Box Model）： 盒模型是一种描述元素尺寸和布局的概念。每个元素被视为一个矩形盒子，由内容、内边距、边框和外边距组成。
- 响应式设计（Responsive Design）： CSS可以用于创建响应式的网页，使页面能够在不同设备和屏幕尺寸下呈现出最佳的外观和布局。
- 伪类和伪元素（Pseudo-classes & Pseudo-elements）： 伪类和伪元素允许你选择特定状态下的元素或向特定元素的某些部分应用样式，例如 :hover 表示鼠标悬停状态。
- 优先级（Specificity）： 当多个选择器应用在同一元素上时，优先级规则决定了哪个选择器的样式会被应用。

为什么需要CSS

使用css的唯一目的就是让网页具有美观一致的页面

样式控制： CSS允许你对网页的外观和样式进行精确的控制。你可以设置文字颜色、字体、背景、边框等，以创造独特的视觉效果。
分离内容和样式： 使用CSS可以将网页的内容和样式分离，使代码更加结构化和可维护。这种分离使得你可以单独修改样式，而无需改变HTML结构。
跨浏览器兼容性： 不同的浏览器可能在默认样式上有所不同。使用CSS可以确保你的网页在不同浏览器上都能保持一致的外观。
可重用性： 通过将样式定义在CSS文件中，你可以在网站的不同页面上重复使用相同的样式，从而减少重复劳动并提高效率。
响应式设计： CSS可以用于创建响应式的网页，使得网页能够在不同的设备和屏幕尺寸下自适应，提供更好的用户体验。
页面布局： 使用CSS可以控制元素的位置和布局。你可以实现多列布局、居中对齐等，使网页看起来更加整洁和专业。
动画和过渡： CSS支持动画和过渡效果，可以为元素添加平滑的过渡和动画效果，从而增加交互性和吸引力。
易于维护： 将样式集中在CSS中可以使代码更易于维护。如果需要修改样式，你只需修改CSS文件，而不必逐个修改每个HTML元素。
性能优化： 使用CSS可以减少HTML代码中的样式信息，从而减小文件大小，提升加载速度，改善性能。
统一风格： 通过为网站应用统一的样式，你可以创造出专业、一致的品牌形象，让用户更容易识别和记住你的网站。

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值组成

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

<style>
  h1{
    color: blue;
    font-size: 12px;
   }
</style>

CSS的引入方式

内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

温馨提示

缺乏整体性和规划性，不利于维护，维护成本高

<p style="background: orange; font-size: 24px;">CSS<p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

温馨提示

单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head>
  <style> 
    h1 { 
      background: red; 
    } 
  </style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部

<link rel="stylesheet" type="text/css" href="xxx.css">

我还可以熬_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS简介

css的介绍和引入方式
复制链接

扫一扫

专栏目录