CSS最重要的选择器

最新推荐文章于 2024-08-17 22:24:13 发布

刘 boss

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量522

点赞数 12

文章标签： css 前端

本文链接：https://blog.csdn.net/liuyangzhengwei/article/details/139373797

版权

概念

CSS（cascading Style Sheets） 层叠样式表是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

作用

简单来说就是让前端网页更美观。

好处

样式与内容分离：CSS允许将网页的样式信息（如颜色、字体、布局等）从HTML内容中分离出来。这意味着你可以在不改变HTML结构的情况下，对整个网站的外观进行统一的修改和更新。这大大简化了网站的维护和更新工作。
减少代码冗余：通过CSS，你可以为多个元素定义相同的样式，而无需在每个元素上都重复相同的样式代码。这减少了代码的冗余性，使代码更加简洁、易于管理。
更好的可访问性和可用性：CSS提供了许多工具和技术，可以帮助你创建更符合无障碍标准的网站。例如，你可以使用CSS来改善文本的可读性、增加颜色对比度、优化导航等，从而确保网站对所有用户（包括视觉障碍或运动障碍的用户）都是友好的。
灵活的布局和定位：CSS提供了丰富的布局和定位选项，使你可以轻松创建复杂的网页布局和视觉效果。无论是简单的文本排列还是复杂的网格系统，CSS都能帮助你实现。
响应式设计：CSS的媒体查询功能使得响应式设计成为可能。通过媒体查询，你可以根据设备的屏幕大小、分辨率等特性来应用不同的样式规则，从而确保你的网站在各种设备上都能良好地显示和工作。
动画和过渡效果：CSS支持动画和过渡效果，这使得你可以为网页添加动态和吸引人的视觉效果。这不仅可以提升用户体验，还可以使你的网站在众多竞争者中脱颖而出。
提高搜索引擎排名：优化CSS代码可以提高网页的加载速度，这对于搜索引擎排名非常重要。快速加载的网页往往能获得更高的搜索引擎排名，从而吸引更多的访问者

css的使用

三种方式

一、直接在标签中使用style属性

二、在头部写<style></style>标签，放入选择器 body { }；

三、外部.css文件样式

优先级

就近原则，谁离标签近用谁的样式

四种选择器

标签选择器

标签选择器，会选择到页面上所有的这个标签的元素

<head>
  <meta charset="UTF-8">
  <title>选择器</title>
  <style>
    h1{
      color: pink;
    }
  </style>
</head>
<body>
  <h1>我爱你</h1>
</body>

类选择器

类选择器.class的名称，好处，可以多个标签归类

.bao{
  color: pink;
  font-size:100px;
}

<head>
  <meta charset="UTF-8">
  <title>选择器</title>
  <link rel="stylesheet" href="../../Css/vita.css">
</head>
<body>
  <h1 class="bao">我爱你</h1>
  <h1 class="bao">我喜欢你</h1>
  <h1 class="bao">我中意你</h1>
</body>

ID选择器

id必须保证全局唯一

<head>
  <meta charset="UTF-8">
  <title>选择器</title>
  <link rel="stylesheet" href="../../Css/vita.css">
</head>
<body>
  <h1 id="hh">我爱你</h1>
  <h1 id="hg">我喜欢你</h1>
  <h1>我中意你</h1>
</body>

优先级

id选择器>类选择器>标签选择器