前端css基础篇（一）css入门与标签选择器

最新推荐文章于 2024-03-06 17:08:15 发布

志若鸿鹄，尺步寸微

最新推荐文章于 2024-03-06 17:08:15 发布

阅读量257

点赞数 1

分类专栏：前端基础 css 文章标签： css 标签选择器

本文链接：https://blog.csdn.net/qq_41363062/article/details/85626998

版权

本文介绍了CSS的发展历史、基本概念以及常见的10种选择器，包括标签选择器、类选择器、ID选择器等。通过内部样式表、外部样式表、行内式和导入式等方式引入CSS，并探讨了它们的权重和使用场景。同时，文章详细讲解了子级选择器、后代选择器、并集选择器和伪类选择器等，帮助读者掌握CSS在网页布局和元素选择上的应用。

摘要由CSDN通过智能技术生成

css的发展历史

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果控制，最初只提供很少的显示属性。随着HTML成长，为了满足页面设计者的要求，添加了很多显示功能，使HTML变得杂乱，页面臃肿，于是就出现了css。

css初识

css(Cascading Style Sheets) 美化样式
css通称为css样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边距、边框）以及版面的布局等外挂案显示样式。

引入css样式表（书写位置）

内部样式表（内嵌）

内嵌式是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义，type="text/css"在html中可以省略；

<head>
  <style type="text/css">
     选择器｛属性1：属性值1；｝
  </style>
</head>

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签链接到html文档中

<head>
<link href="css文件的路径" type="text/css" rel="stylesheet">
</head>

注意： link是个单标签
link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
**href：**定义所链接外部样式表文件的URL。
type:定义所链接文档的类型，在这里需要指定为“text/css”,表示链接的外部文件为css样式表
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件