css菜鸟 css菜鸟教程

CSS基础入门教程

在网页设计中，CSS（层叠样式表）是一种用于描述HTML元素外观和布局的样式语言，通过使用CSS，我们可以控制网页的字体、颜色、背景、边距等样式，从而使网页更加美观和易于阅读，本文将介绍CSS的基本概念、语法和常用属性，帮助初学者快速入门CSS。

CSS基本概念

1、选择器：选择器是用来选取HTML元素的模式，它可以是一个标签名、类名、ID或者属性等。

2、声明块：声明块是由一个或多个属性-值对组成的代码块，用来设置选中元素的样式。

3、属性：属性是CSS中用来设置元素样式的关键信息，如颜色、字体、大小等。

4、值：值是属性的具体设置，如颜色值、长度值等。

5、优先级：当多个CSS规则应用于同一个元素时，优先级决定了哪个规则会生效，优先级分为内联样式、内部样式表、外部样式表和浏览器默认样式。

CSS语法

1、CSS规则：CSS规则由选择器和声明块组成，用大括号括起来。

p {
  color: red;
  font-size: 16px;
}

2、注释：在CSS中，我们使用/*/来添加注释，注释不会影响页面显示，例如

/* 这是一个注释 */
p {
  color: red;
  font-size: 16px;
}

常用属性

1、文本属性：用于设置文本的样式，如颜色、字体、大小等。

- color：文本颜色。color: red;

- font-family：文本字体。font-family: Arial, sans-serif;

- font-size：文本大小。font-size: 16px;

- font-weight：文本粗细。font-weight: bold;

- text-align：文本对齐方式。text-align: center;

- text-decoration：文本装饰线。text-decoration: underline;

- line-height：行高。line-height: 1.5;

- letter-spacing：字母间距。letter-spacing: 2px;

- word-spacing：单词间距。word-spacing: 5px;

2、盒模型属性：用于设置元素的尺寸和边距。

- width和height：宽度和高度。width: 100px; height: 50px;

- margin：外边距。margin: 10px;（上、右、下、左四个方向的外边距）

- padding：内边距。padding: 5px;（上、右、下、左四个方向的内边距）

- border：边框。border: 1px solid black;（宽度、样式、颜色）

- box-sizing：盒模型类型。box-sizing: border-box;（默认为content-box）

- float：浮动。float: left;（向左浮动）

- clear：清除浮动。clear: both;（清除左右浮动）

- display：显示类型。display: block;（块级元素）或display: inline;（行内元素）

- position：定位类型。position: relative;（相对定位）或position: absolute;（绝对定位）

- z-index：层叠顺序。z-index: 1;（设置层叠顺序为1）

- overflow：溢出处理。overflow: hidden;（隐藏溢出内容）

- visibility：可见性。visibility: hidden;（隐藏元素）或visibility: visible;（显示元素）