CSS基础知识入门教程-原创手记-慕课网

概述

CSS基础知识涵盖了CSS的基本概念、语法和选择器，介绍了如何通过CSS控制网页样式和布局，包括内联样式、内部样式表和外部样式表的使用方法。此外，文章还详细讲解了CSS的盒模型、常用属性和不同布局方式的应用。

CSS简介

什么是CSS

CSS（层叠样式表）是一种用于描述HTML或XML（包括XHTML）文档样式的语言。它允许网页设计师精确地控制网页内容的布局、颜色、字体、边距、填充等视觉特性。CSS使得网页设计更加灵活和强大，能够实现复杂而美观的布局和效果。

CSS的语法基于属性和值。属性是需要设置的样式特性，而值则是这些属性的具体表现形式。一个基本的CSS规则由选择器、属性和值组成。例如：

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

这里，p 是选择器，指定了被此规则影响的HTML元素。color 和 font-size 是属性，而 blue 和 16px 是这些属性的值。

CSS的作用和重要性

CSS的主要作用是使网页的外观与内容分离。通过将样式从HTML文件中分离出来，设计师可以更容易地管理网站的整体外观。这不仅提高了网站的可维护性，还使得网站在不同设备和浏览器上的表现更加一致。以下是CSS的一些重要特性：

样式分离：CSS允许将样式规则从HTML文档中分离出来，因此可以更方便地管理网站的样式。
响应式设计：通过使用媒体查询，CSS可以根据不同的设备和屏幕尺寸调整样式，实现响应式设计。
动画和过渡效果：CSS动画和过渡效果使得网页更加生动，增强了用户体验。
网页结构控制：CSS通过定位和布局属性，控制页面元素的排列和对齐，使得网页布局更加灵活。

如何使用CSS

CSS可以通过多种方式嵌入到HTML文档中：

内联样式：直接在HTML标签中使用 style 属性。例如：
```
<p style="color: red; font-size: 18px;">这是一个段落。</p>
```

内部样式表：在HTML文档的 head 部分使用 <style> 标签定义CSS规则。例如：

<head>
   <style>
       p {
           color: red;
           font-size: 18px;
       }
   </style>
</head>

外部样式表：通过 <link> 标签将外部CSS文件链接到HTML文档。例如：
```
<head>
   <link rel="stylesheet" href="styles.css">
</head>
```

外部样式表是一种更灵活和易于维护的方法，允许将CSS规则集中管理在一个或多个文件中。这种方式使得样式能够应用于多个页面，提高代码的复用性和管理效率。

CSS选择器

基本选择器

CSS选择器用于选择HTML文档中的元素，并应用指定的样式。以下是几种常用的基本选择器：

标签选择器：通过元素标签名来选择元素。例如：
```
p {
   color: blue;
}
```
这个规则会选择所有的 <p> 元素并设置其文本颜色为蓝色。
类选择器：通过元素的类属性来选择元素。例如：
```
.highlight {
   background-color: yellow;
}
```
这个规则会选择所有具有 class="highlight" 属性的元素，并设置其背景颜色为黄色。
ID选择器：通过元素的ID属性来选择元素。例如：
```
#header {
   font-size: 24px;
}
```
这个规则会选择具有 id="header" 属性的元素，并设置其字体大小为24px。

子代选择器和后代选择器

子代选择器：选择某个父元素的直接子元素。例如：
```
div > p {
   color: red;
}
```
这个规则会选择所有作为 div 元素直接子元素的 <p> 元素，并设置其文本颜色为红色。
后代选择器：选择属于某个父元素的任意后代元素。例如：
```
div p {
   color: green;
}
```
这个规则会选择所有作为 div 元素后代的 <p> 元素，并设置其文本颜色为绿色。

相邻兄弟选择器和一般兄弟选择器

相邻兄弟选择器：选择紧跟在另一个元素之后的兄弟元素。例如：
```
<p>段落1</p>
<span>这是一个相邻兄弟元素。</span>
<p>段落2</p>
<style>
   p + span {
       color: purple;
   }
</style>
```
这个规则会选择所有紧跟在 <p> 元素之后的 <span> 元素，并设置其文本颜色为紫色。
一般兄弟选择器：选择属于同一个父元素的任意兄弟元素。例如：
```
p ~ span {
   color: orange;
}
```
这个规则会选择所有作为 <p> 元素兄弟的 <span> 元素，并设置其文本颜色为橙色。

伪类选择器

伪类选择器允许选择特定状态或类型的元素：

链接伪类：选择链接的不同状态。例如：
```
a:link {
   color: blue;
}
a:visited {
   color: purple;
}
a:hover {
   color: red;
}
a:active {
   color: green;
}
```
这些规则分别选择未访问过的链接（蓝色）、访问过的链接（紫色）、鼠标悬停在链接上时的链接（红色）和鼠标点击链接时的链接（绿色）。
表单伪类：选择表单元素的不同状态。例如：
```
input:focus {
   border-color: #0000ff;
}
```
这个规则会选择处于焦点状态的 <input> 元素，并设置其边框颜色为蓝色。
列表项伪类：选择列表中的特定项目。例如：
```
li:nth-child(odd) {
   background-color: #f2f2f2;
}
```
这个规则会选择列表中所有奇数序号的 <li> 元素，并设置其背景颜色为淡灰色。

CSS样式规则

样式规则的构成

CSS样式规则由三个主要部分组成：选择器、属性和值。选择器指定要应用样式的HTML元素，属性描述要设置的样式特性，值是属性的具体表现形式。例如：

p {
    color: blue;
    font-size: 16px;
    text-align: center;
}

该规则选择所有 <p> 元素，并设置其文本颜色为蓝色，字体大小为16像素，文本对齐方式为居中。

样式规则的优先级

当多个CSS规则应用于同一个元素时，优先级决定哪个规则会被应用。优先级规则如下：

内联样式：直接写在HTML标签中的 style 属性具有最高优先级。
ID选择器：选择特定ID的元素。
类选择器、标签选择器、属性选择器和伪类选择器：这些选择器优先级相同，但类选择器比标签选择器具有更高的优先级。
行内样式：通过 <style> 标签在HTML文档的 <head> 部分定义的样式。
外部样式表：通过 <link> 标签引入外部CSS文件中的样式。

例如，假设以下规则应用于同一个元素：

css1 { color: red; }    /* 优先级：5 */
#id1 { color: blue; }   /* 优先级：10 */
.class1 { color: green; } /* 优先级：10 */
p { color: yellow; }    /* 优先级：10 */
#id1 p { color: orange; }  /* 优先级：15 */

由于ID选择器具有最高优先级，因此最终应用的样式将是 #id1 p 规则中的 color: orange。

如何正确使用样式规则

避免使用内联样式：尽量避免直接在HTML标签中使用 style 属性，这会使代码难以维护。
使用类选择器：类选择器可以应用于多个元素，并且具有较高的复用性。
合理安排样式表的位置：将样式表放在HTML文档的 <head> 部分，或通过外部文件引入。
注意优先级：确保了解优先级规则，以便正确地设置优先级较高的样式。

CSS盒模型

margin、padding、border、content

在CSS中，盒模型是理解元素布局的基础。一个HTML元素通常由四部分组成：content（内容）、padding（内边距）、border（边框）和margin（外边距）。这些部分共同构成了元素的完整布局。

content：包含元素实际内容的部分。
padding：在元素内容和边框之间的填充区域。
border：环绕元素内容和填充区域的边框。
margin：在元素边框和相邻元素之间的外部空白区域。

以下是一个示例，展示如何使用这些属性：

<div class="box">
    <p>这是一个带有内边距、边框和外边距的盒子。</p>
</div>
<style>
    .box {
        box-sizing: border-box;
        width: 200px;
        height: 100px;
        padding: 10px;
        border: 2px solid black;
        margin: 15px;
        background-color: lightblue;
    }
</style>

在这个例子中，padding 为 10px，border 为 2px 宽的黑色实线，margin 为 15px，width 和 height 分别为 200px 和 100px，背景颜色为淡蓝色。

如何调整元素的大小和布局

通过设置CSS属性，可以精确控制元素的大小和布局。以下是一些常用的属性：

width 和 height：设置元素的宽度和高度。例如：
```
div {
   width: 200px;
   height: 100px;
}
```
padding 和 border：设置元素的内边距和边框。例如：
```
div {
   padding: 10px;
   border: 2px solid black;
}
```
margin：设置元素的外边距。例如：
```
div {
   margin: 15px;
}
```
box-sizing：通过 box-sizing: border-box 可以将元素的宽度和高度计算方式从内容区域扩展到整个盒子，包括边框和内边距。例如：
```
div {
   box-sizing: border-box;
   width: 200px;
   padding: 10px;
   border: 2px solid black;
}
```

在实际应用中，结合这些属性可以实现复杂的布局效果。例如，以下代码展示了一个带有内边距、边框和外边距的元素：

<!DOCTYPE html>
<html>
<head>
    <title>Box Model Example</title>
    <style>
        .box {
            box-sizing: border-box;
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 2px solid black;
            margin: 15px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box">Hello, CSS!</div>
</body>
</html>

CSS常用属性

文本属性

CSS提供了多种属性用于控制文本样式。以下是一些常用属性：

font-size：设置文本的字体大小。例如：
```
p {
   font-size: 16px;
}
```
font-family：设置文本的字体系列。例如：
```
p {
   font-family: Arial, sans-serif;
}
```
color：设置文本的颜色。例如：
```
p {
   color: #000000;
}
```
text-align：设置文本的对齐方式。例如：
```
p {
   text-align: center;
}
```
text-decoration：设置文本的装饰效果，如下划线、删除线等。例如：
```
p {
   text-decoration: underline;
}
```

以下是一个示例，展示了如何使用这些属性：

<!DOCTYPE html>
<html>
<head>
    <title>Text Properties Example</title>
    <style>
        p {
            font-size: 18px;
            font-family: 'Courier New', Courier, monospace;
            color: #333333;
            text-align: justify;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with various text properties applied.</p>
</body>
</html>

背景属性

CSS提供了多种属性用于控制元素的背景样式。以下是一些常用属性：

background-color：设置元素的背景颜色。例如：
```
div {
   background-color: #cccccc;
}
```
background-image：设置元素的背景图像。例如：
```
div {
   background-image: url('image.jpg');
}
```
background-repeat：控制背景图像的重复方式。例如：
```
div {
   background-repeat: no-repeat;
}
```
background-position：设置背景图像的位置。例如：
```
div {
   background-position: center;
}
```

以下是一个示例，展示了如何使用这些属性：

<!DOCTYPE html>
<html>
<head>
    <title>Background Properties Example</title>
    <style>
        div {
            background-color: #cccccc;
            background-image: url('image.jpg');
            background-repeat: no-repeat;
            background-position: center;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框属性

CSS提供了多种属性用于控制元素的边框样式。以下是一些常用属性：

border-width：设置边框的宽度。例如：
```
div {
   border-width: 2px;
}
```
border-style：设置边框的样式。例如：
```
div {
   border-style: dashed;
}
```
border-color：设置边框的颜色。例如：
```
div {
   border-color: #000000;
}
```
border-radius：设置边框的圆角。例如：
```
div {
   border-radius: 10px;
}
```

以下是一个示例，展示了如何使用这些属性：

<!DOCTYPE html>
<html>
<head>
    <title>Border Properties Example</title>
    <style>
        div {
            border-width: 2px;
            border-style: dashed;
            border-color: #000000;
            border-radius: 10px;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

CSS布局

浮动布局

浮动布局是一种常见的布局方式，用于将元素沿水平方向排列。以下是一些常用的属性：

float：设置元素的浮动方向。例如：

.left {
   float: left;
}
.right {
   float: right;
}

clear：清除元素周围浮动元素的影响。例如：
```
.clear {
   clear: both;
}
```

以下是一个示例，展示如何使用浮动布局：

<!DOCTYPE html>
<html>
<head>
    <title>Float Example</title>
    <style>
        .left {
            float: left;
            width: 50%;
            background-color: lightblue;
        }
        .right {
            float: right;
            width: 50%;
            background-color: lightgreen;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="left">Left Section</div>
    <div class="right">Right Section</div>
    <div class="clear"></div>
</body>
</html>

定位布局

定位布局允许更精确地控制元素的位置。以下是一些常用的属性：

position：设置元素的定位方式。例如：

.absolute {
   position: absolute;
   top: 10px;
   left: 10px;
}
.relative {
   position: relative;
   top: 10px;
   left: 10px;
}

top、right、bottom 和 left：设置元素的边距。例如：

.absolute {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 100px;
   height: 100px;
   background-color: lightblue;
}
.relative {
   position: relative;
   top: 10px;
   left: 10px;
   width: 100px;
   height: 100px;
   background-color: lightgreen;
}

以下是一个示例，展示如何使用定位布局：

<!DOCTYPE html>
<html>
<head>
    <title>Position Example</title>
    <style>
        .absolute {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .relative {
            position: relative;
            top: 10px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="absolute">Absolute Position</div>
    <div class="relative">Relative Position</div>
</body>
</html>

弹性布局

弹性布局（Flexbox）是一种强大的布局方式，允许更灵活地控制元素的排列和对齐。以下是一些常用的属性：

display：设置元素的显示模式。例如：
```
.container {
   display: flex;
}
```
justify-content：设置主轴方向的对齐方式。例如：
```
.container {
   justify-content: center;
}
```
align-items：设置交叉轴方向的对齐方式。例如：
```
.container {
   align-items: center;
}
```
flex-direction：设置主轴的方向。例如：
```
.container {
   flex-direction: column;
}
```
flex-wrap：设置是否允许主轴方向上的子元素换行。例如：
```
.container {
   flex-wrap: wrap;
}
```

以下是一个示例，展示如何使用弹性布局：

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
            flex-wrap: wrap;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

通过以上示例，可以更好地理解和应用CSS的基础知识，包括选择器、样式规则、盒模型、常用属性以及不同类型的布局方式。这些知识将帮助你在实际项目中实现更复杂和灵活的网页设计。