前端快速入门学习3——CSS介绍与选择器

news2025/4/8 20:28:51

1.概述

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

HTML与CSS的关系：HTML相当于毛坯房，CSS是装修。

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

选择器的声明中可以写无数条属性
声明的每一行属性，都需要以英文分号结尾;
声明中的所有属性和值都是以键值对这种形式出现的;

CSS三种导入方式：
1.内联样式（Inline Styles）
2.内部样式表（Internal Stylessheet）
3.外部样式表（External Stylesheet）
三种导入方式的优先级：内联样式>内部样式表>外部样式表
内联样式：

<head>
	<link rel="stylesheet" href="style.css">
    <style>
        h2{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1 style="color: yellowgreen;">这是一个内联样式</h1>
<h2>二级标题标签，应用内部样式</h2>
<h3>三级标题标签,使用外部样式</h3>
</body>

style.css

h3{
    color: aqua;
    font-size: 20px;
}

效果：
在这里插入图片描述

2.选择器

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

(1)元素选择器

<head>
	<style>
        h1{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1>这是一个元素选择器</h1>
</body>

（2）类选择器

<head>
	<style>
        .highlight {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1 class="highlight">这是一个类选择器</h1>
</body>

（3）id选择器

<head>
	<style>
        #unique {
            color: blue;
            font-size: 25px;
        }
    </style>
</head>
<body>
 <h2 id="unique">这是一个ID选择器</h2>
</body>

（4）通用选择器

<head>
	<style>
        * {
            font-family: KaiTi;
            font-size: 20px;
            color: green;

        }
    </style>
</head>
<body>
     <h2 id="unique">这是一个ID选择器</h2>
     <p>这是一个简单的HTML示例1。</p>
     <p>这是一个简单的HTML示例2。</p>
</body>

（5）子元素选择器

<head>
	<style>
        .father > .son {
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
     <div class="father">
        <p class="son">这是一个子元素选择器</p>
    </div>
</body>

（6）后代选择器

<head>
	<style>
        .father .grandson {
            color: orange;
            font-size: 10px;
        }
    </style>
</head>
<body>
     <div class="father">
        <p class="son">这是一个子元素选择器</p>
        <div>
            <p class="grandson">这是一个后代选择器</p>
    </div>
</body>

（7）兄弟选择器

<head>
	<style>
        h3 + p {
            color: pink;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个普通的标签</p>
    <h3>这是相邻兄弟选择器示例</h3>
    <p>这是另一个P标签</p>
</body>

（8）伪类选择器

伪类是用来添加一些选择器的特殊效果。
如链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

<head>
	<style>
       #element:hover{
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <p id="element">这是一个伪类选择器</p>
</body>