CSS入门及应用

CSS入门及应用

引用

CSDN

1.

https://m.blog.csdn.net/qq_36799762/article/details/142919131

本文是一篇CSS入门教程，详细介绍了CSS的基础概念、语法、选择器、属性、盒模型、导入方式以及网页布局方式等知识点。适合前端开发初学者阅读。

CSS简介

全称Cascading Style Sheets（级联样式表），简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的，控制网页外观。比如，字体、颜色、大小、间距，背景等。

CSS语法

CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式。

选择器{
属性1:属性值1;
属性2:属性值2;
}

1.声明的每一行属性，都需要以英文分号结尾;
2.声明中的所有属性和值都是以键值对这种形式出现的;

<style>
    label{color: red;font-weight: bold;}
</style>

选择器

选择器是CSS中的关键部分，它允许你针对特定元素或一组元素定义样式

• 元素选择器 （标签）
• 类选择器（.）
• ID选择器 (#)
• 通用选择器 (*)
• 子元素选择器 (父元素内部的选择器，其实就是嵌套 如：.father > .son )
• 后代选择器(包含选择器 如：.father p)
• 并集选择器(兄弟选择器 如：h2 + p 紧跟h2标签后边的兄弟元素p)
• 伪类选择器(:开头，如:hover，:active，:first-child，:last-child，:nth-child() 等)

注意：

1. ID选择器是唯一的，在HTML文档中，每个ID的值必须是唯一的，即每个ID只能被使用一次。
2. class类选择器，与ID不同，类名可以在多个元素中重复使用。
3. 一个HTML标签只能应用于一个ID选择器。
4. 一个HTML标签可以应用多个class选择器。

CSS属性

CSS属性非常多，其实也没必要全都掌握，有些使用频率很低，用的时候查询。

CSS盒子模型

所有HTML元素可以看作盒子，封装周围的HTML元素包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

• Margin(外边距)- 清除边框外的区域，外边距是透明的。
• Border(边框)- 围绕在内边距和内容外的边框。
• Padding(内边距)- 清除内容周围的区域，内边距是透明的。
• Content(内容)- 盒子的内容，显示文本和图像。

CSS三种导入方式

下面是三种常见的CSS导入方式:

1. 内联样式 (stlyle属性中使用的样式)
2. 内部样式表 （在HTML文档中使用