【Web前端入门学习】—CSS-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Web前端入门学习】—CSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS简介

什么是CSS？
CSS全名是Cascading Style Sheets ，中文名：叠层样式表。用于定义网页样式和布局的样式表语言。通过CSS，你可以指定页面中各个元素的字体、大小、间距、边框、背景等样式从而实现更精确的页面设计。

CSS语法

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

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

1、选择器后面大括号的内容也叫做选择器的声明，选择器的声明中可以写无数条属性。
2、选择器选择要应用样式的HTML元素（标签），可以选择所有元素或特定元素。
3、声明的每一个属性都要以英文分号为结尾。
4、声明中的所有属性和值都是以键值对的形式出现的。

例：

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

p标签选择器，页面中的所有p标签都被选中，p标签的字体颜色都改为蓝色，p标签中的字体大小改为16像素。

CSS三种导入方式

1、内联样式
2、内部样式表
3、外部样式表

内联样式：
内联样式就是将CSS样式直接放到HTML元素标签中。
内部样式表：
在HTML文档的head标签中定义。
外部样式表：
将CSS样式单独放到一个CSS文件中，之后在head标签中使用另一个标签将它链接到HTML文档中。（这种方式允许在多个页面中重复使用相同的样式。
内部样式表例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS导入方式</title>
    <style>
        p{
        color:blue;
        font-size:26px;
    }
    </style>
</head>
<body>
    <p>这是一个应用了CSS样式的文本。</p>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css
内联样式例：

<body>
    <h1 style="color:red">应用了内联样式的文本。</h1>
</body>

【Web前端入门学习】—CSS,前端,学习,css
外部样式表例：
在同目录下创建CSS文件夹。

在CSS文件夹内创建style样式.css文件。

在style文件.css文件中写入样式。

注意：该选择器名须和改动的标签一致。

h3 {
    color:blueviolet;
    font-style: italic;
}

【Web前端入门学习】—CSS,前端,学习,css
下面在CSS导入方式.html文件中将style文件.css文件导入。
在CSS导入方式.html文件的title下使用link。

herf内填入style文件.css文件的路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS导入方式</title>
    <link rel="stylesheet" href="./CSS文件/style文件.css">
    <style>
        p{
        color:blue;
        font-size:26px;
    }
    
    </style>
</head>
<body>
    <p>这是一个应用了CSS样式的文本。</p>
    <h1 style="color:red">应用了内联样式的文本。</h1>
    <h3>使用外部样式。</h3>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css
三种导入方式的优先级：内联样式>外部样式表>内部样式表

优先级有什么作用？
优先级高的会覆盖优先级低的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS导入方式</title>
    <link rel="stylesheet" href="./CSS文件/style文件.css">
    <style>
        p{
        color:blue;
        font-size:26px;
     }
     h3{
        color:chartreuse;
        font-size: larger;
     }
    
    </style>
</head>
<body>
    <p>这是一个应用了CSS样式的文本。</p>
    <h1 style="color:red">应用了内联样式的文本。</h1>
    <h3>使用外部样式。</h3>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css

CSS选择器

元素选择器（标签选择器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        h2{
            color: aqua;
        }
    </style>
</head>
<body>
    <h2>元素选择器</h2>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
       .highlight{
        background-color: bisque;
       }
    </style>
</head>
<body>
    <h3 class="highlight">类选择器</h3>
    <h3>这是另一个类选择器</h3>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css

ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
       #header{
        font-size: larger;
       }
    </style>
</head>
<body>
    <h4 id="header">这是一个ID选择器</h4>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css

通用选择器

通用选择器表示对所有的元素进行选择。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
       #header{
        font-size: larger;
       }
       * {
               /* 更改字体 */
        font-family: 'Courier New', Courier, monospace;
       }
    </style>
</head>
<body>
    <h4 id="header">这是一个ID选择器</h4>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css

子元素选择器

子元素选择器：选择直接位于父元素内部的子元素。也就是嵌套，一个大标签嵌套一个小标签，大标签相对于小标签来讲就是父元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        *{
            font-weight: bolder;
        }
        .father>.son{
            color:blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son">这是一个子元素选择器</p>
    </div>
</body>
</html>

这里的div标签相对于p标签来讲就是父元素。
这里要注意子元素选择器的语法形式
.父类>.子类{ }

【Web前端入门学习】—CSS,前端,学习,css

后代选择器（包含选择器）

【Web前端入门学习】—CSS,前端,学习,css

给father类的子元素添加了蓝色字体，但是为什么后代选择器颜色没有改变？
子代和后代的区别：后代是包含子代的，而子代不包含父代。如下：

【Web前端入门学习】—CSS,前端,学习,css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        *{
            font-weight: bolder;
        }
        /* 子元素选择器 */
        .father>.son{
            color:blue;
        }
        /* 后代选择器 */
        .father p{
            color: red;
            font-size:larger;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son">这是一个子元素选择器</p>
        <div>
            <p class="grandson">这是一个后代选择器</p>
        </div>
    </div>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css

并集选择器（兄弟选择器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
       /* 相邻兄弟选择器 */
       h3 + p{
        background-color: brown;
       }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <h3>这是一个相邻兄弟选择器</h3>
    <p>这是另一个p标签</p>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css

相邻元素选择器会选择在同一级别下的元素中的紧跟在选中元素之后的第一个p标签。

伪类选择器

伪类选择器选择HTML文档的元素的特定状态或者位置。伪类选择器以冒号开头，通常给用户交互文档结构或者其他条件下的元素应用样式。例如鼠标悬停在一个元素上，这是处于一个悬停状态，可以用伪类选择器来实现。
鼠标悬停示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
      /* 伪类选择器 */
      #element:hover{
        /* 当鼠标放到这一行字上时，背景色会发生变化 。*/
        background-color: blueviolet;
      }
    </style>
</head>
<body>
   <h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>

选中第一个子元素:first-child
选中第n个子元素：nth-child
链接状态:active

伪元素选择器

用于创建一个虚拟元素，并且样式化，而不是选择实际存在的元素。伪元素选择器通常以双冒号开头。

::after
::before

CSS常用属性

CSS参考手册： link
字体font属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
</head>
<body>
    <h1 style="font:bolder 50px 'KaiTi';">这是一个font复合属性示例</h1>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css
line-height设置行高属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
</head>
<body>
    <p style="line-height:40px">这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css
width属性和height属性：

行内块元素：
1、水平方向上排列，但是可以设置宽度、高度、内外边距等。
2、行内块元素可以包含其他行内元素或块级元素。
行内元素：inline
行内块元素:inline-block
块元素:block

行内块元素和块元素可以设置宽和高，但是行内元素对于所设置的宽和高是无效的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
        .block{
            background-color: aqua;
            width: 200px;
            height: 150px;
        }
        .inline{
            background-color: brown;
            width: 200px;
            height: 150px;
        }
        .inline-block{
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <!-- 行内块元素 -->
    <img src="./logo.png.jpeg" alt="" class="inline-block">
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
        .block{
            background-color: aqua;
            width: 200px;
            height: 150px;
        }
        .inline{
            background-color: brown;
            width: 200px;
            height: 150px;
        }
        .inline-block{
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="block">这是一个块级元素</div>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <!-- 行内块元素 -->
    <img src="./logo.png.jpeg" alt="" class="inline-block">
    <img src="./logo.png.jpeg" alt="" class="inline-block">
    <img src="./logo.png.jpeg" alt="" class="inline-block">
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css
行内元素、行内块元素和块元素互相转换：使用display属性

<body>
    <div style="display: inline;background-color: red;">这是一个转换成行内元素div标签</div>
</body>

【Web前端入门学习】—CSS,前端,学习,css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
       .div-inline{
        display:inline;
        background-color: aqua;
       }
    </style>
</head>
<body>
    <div class="div-inline">这是一个转换成行内元素div标签</div>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性</title>
    <style>
       .span-inline-block{
        display:inline-block;
        background-color: aqua;
       }
    </style>
</head>
<body>
    <span class="span-inline-block">这是一个转换成行内块元素的span标签。</span>
</body>
</html>

【Web前端入门学习】—CSS,前端,学习,css

在这里display还可以设置成其他值。

盒子模型

盒子模型是CSS中一种常用布局的基本概念，描述了文档中的每个元素都可以被看成是一个矩形的盒子。这个盒子包含了内容（Content)，内边距（Padding)，文本边框（Border)，外边距（Margin)。
【Web前端入门学习】—CSS,前端,学习,css
盒子模型的相关属性：

属性名	说明
内容Content	盒子包含的实际内容，比如：文本，图片等
内边距Padding	围绕在内容的内部，是内容与边框之间的空间。可以使用padding属性来设置。
边框Border	边框围绕在内边距的外部，是盒子的边界，可以使用border属性来设置。
外边距Margin	围绕在边框的外部，是盒子与其他元素之间的空间。可以使用Margin属性来设置。