CSS简介

CSS指的是层叠样式表（Cascading Style Sheets），是一种标记语言，控制网页布局，描述了如何在屏幕、纸张或其他媒体上显示HTML元素，并且节省了大量工作。它可以同时控制多张网页布局。CSS的引入方式有三种：内嵌式、外联式、行内式。内嵌式中css写在style标签中，style标签通常放在head中，作用范围是当前页面，使用场景为小案例中；外联式写在单独的CSS文件中，通过link标签引入，作用范围是多个页面，使用场景通常为项目中；行内式中css写在标签的style属性中，作用范围是当前标签，通常配合js使用。

CSS选择器

1.1 ID选择器

• ID选择器用于选择具有特定ID的元素。
• 语法：#idName { styles }
• 示例：#header { color: blue; }

1.2 类选择器

• 类选择器用于选择具有特定类名的元素。
• 语法：.className { styles }
• 示例：.highlight { background-color: yellow; }

1.3 伪类选择器和伪元素选择器

• 伪类选择器用于选择元素的特定状态或位置。

• 语法：selector:pseudo-class { styles }

• 示例：a:hover { color: red; }

• 伪元素选择器用于选择元素的特定部分或位置。

• 语法：selector::pseudo-element { styles }

• 示例：p::first-line { font-weight: bold; }

2.字体和文本样式

• 可以使用CSS来设置字体和文本样式，如字体大小、颜色、对齐等。
• 示例：font-family: Arial; font-size: 16px; color: #333; text-align: center;

3.背景相关属性

3.1 背景颜色: background-color

• 用于设置元素的背景颜色。
• 语法：background-color: color;
• 示例：background-color: #f1f1f1;

3.2 背景图片

• 用于设置元素的背景图片。
• 语法：background-image: url('image.jpg');
• 示例：background-image: url('https://example.com/image.jpg');

4.元素的显示模式

4.1 块级元素

• 块级元素独占一行，可以设置宽度、高度和边距等。
• 示例：<div>, <p>, <h1>

4.2 行内元素

• 行内元素不会独占一行，只占据其内容所需的空间。
• 示例：<span>, <a>, <strong>

4.3 行内块元素

• 行内块元素不会独占一行，但可以设置宽度、高度和边距等。
• 示例：<img>, <input>, <button>

5.盒子模型

• 盒子模型描述了元素的布局和尺寸。
• 包括内容区域、内边距、边框和外边距。
• 示例：box-sizing: border-box; padding: 10px; border: 1px solid #ccc; margin: 20px;

以上是CSS选择器、字体和文本样式、背景相关属性、元素的显示模式和盒子模型的基本概念和语法。可以根据这些内容进行CSS样式的设置和布局设计。