当前位置：首页 > news >正文

CSS基础入门

news 2025/2/11 8:47:57

如何学习CSS

1、什么是CSS

2、CSS怎么用（快速入门）

3、CSS选择器（重点+难点）

4、美化网页（文字、阴影、超链接、列表、渐变）

6、盒子模型

7、定位

8、网页动画

1.1什么是CSS

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

1.2发展史

CSS1（1996年推出）：CSS1是第一版的CSS规范，它引入了一套基本的样式属性和选择器，使得开发者可以通过样式表将样式应用于HTML文档。CSS1提供了对字体、颜色、背景、边框等基本样式的控制。它为网页布局和样式提供了一些基础，但功能相对有限。

CSS2（1998年推出）：CSS2是CSS的第二版规范，引入了更多的功能和选择器，增强了样式控制的能力。它引入了浮动、定位和层叠等特性，使得开发者能够更好地控制和布局网页元素。CSS2还引入了伪类和伪元素选择器，允许开发者根据元素的状态或位置选择应用样式。

CSS3（2001年开始，持续发展）：CSS3是CSS的下一代规范，由一系列模块组成，每个模块引入了新的特性和功能。CSS3引入了更多的选择器、盒模型属性、颜色和背景属性、文本效果、过渡和动画效果、多列布局等。它还引入了媒体查询（Media Queries），允许开发者根据设备的属性和特征应用不同的样式，从而实现响应式设计。CSS3的发展是渐进式的，新的模块和特性不断被添加和标准化。

1.三种导入方式

1.1、行内样式

<div style="background: red"></div>

1.2、外部样式

（1）链接式

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

（2）导入式

<style>@import url(style.css);
</style>

1.3、嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

<head><style>.content {background: red;}</style>
</head>

2.选择器

元素选择器（Element Selector）：通过元素名称选择 HTML 元素。例如，p 选择器将选择所有 <p> 元素。

类选择器（Class Selector）：通过类别名称选择具有特定类别的 HTML 元素。类选择器以 . 开头，后面跟着类别名称。例如，.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

ID 选择器（ID Selector）：通过元素的唯一标识符（ID）选择 HTML 元素。ID 选择器以 # 开头，后面跟着 ID 名称。例如，#logo 选择器将选择具有 ID 为 "logo" 的元素。

属性选择器（Attribute Selector）：通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。例如，input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

后代选择器（Descendant Selector）：通过指定元素的后代关系选择 HTML 元素。后代选择器使用空格分隔元素名称。例如，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

子元素选择器（Child Selector）：通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 > 符号分隔父元素和子元素。例如，ul > li 选择器将选择所有 <ul> 元素的直接子元素中的 <li> 元素。

相邻兄弟选择器（Adjacent Sibling Selector）：通过指定元素之间的相邻兄弟关系选择 HTML 元素。相邻兄弟选择器使用 + 符号分隔两个相邻元素。例如，h2 + p 选择器将选择紧接在 <h2> 元素后的 <p> 元素。

通用选择器（Universal Selector）：选择所有 HTML 元素。通用选择器使用 * 符号。例如，* 选择器将选择页面上的所有元素。