CSS基础

淮南2.0

于 2025-04-13 00:29:40 发布

阅读量637

点赞数 11

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/m0_73793850/article/details/146991086

版权

一、CSS概念

1.基本概念

CSS即级联样式表，与HTML（超文本标记语言）配合使用，用于定义网页的布局、颜色、字体、间距等视觉效果，实现网页的独特风格。

2.特点及优势

CSS通过定义标记或属性的外在表现，对页面风格进行控制，实现表现和内容分离，克服了传统HTML的缺点。CSS样式属性还提供了比HTML更多的格式设计功能，增强了网页的表现力。将CSS样式定义到样式表文件中，多个网页同时应用样式表文件中的样式，可以确保网页风格趋于统一。

3.编辑方法

（1）在html文件里编写CSS规则，可以写在某个元素的属性部分，作为style属性的值；也可以写在head标记里面，通过style标记包含。

（2）在单独文件里编写CSS规则，文件后缀名为.css。

二、CSS的使用

CSS规则由两个主要的部分构成：选择器和声明。

1.CSS选择器类型

元素选择器，直接使用HTML标记名称作为选择器，作用于页面中所有与选择器同名的标记
类选择器，由点号“.”及类名称直接相连构成，对应HTML标记中的class属性
id选择器，由#及id属性值直接相连构成，HTML文件中每个id唯一，且id属性取值必须以字母开头。
伪类选择器，以冒号:开头，用于选择元素的某种状态或位置，如:hover、:active，应对超链接访问前后等没有HTML标记的样式设计。
属性选择器，通过元素的属性或属性值选择元素，形式为[attribute]或[attribute=value]。

/* 元素选择器 */
body {
    font-family: "黑体";
    background-color: #f5f5f5;
    color: #333;
    padding: 20px;
}

p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
}

a {
    color: #007bff;
    text-decoration: none;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* 类选择器 */
.intro {
    font-size: 18px;
    color: #444;
    font-style: italic;
}

.link {
    font-weight: bold;
}

/* ID选择器 */
#main-heading {
    color: #ff5722;
    text-align: center;
    margin-bottom: 20px;
}

#my-button {
    background-color: #4caf50;
}

/* 伪类选择器 */
a:hover {
    text-decoration: underline;
}

button:hover {
    background-color: #0056b3;
}

button:active {
    background-color: #ff0000;
}

/* 属性选择器 */
input[type="text"] {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 10px;
}

input[type="password"] {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 10px;
    background-color: #f9f9f9; /* 为密码输入框添加不同的背景颜色 */
}

2.CSS选择器的声明

集体声明

h1, h2,p {
color:red; font-size:10px;
}

全局声明

*{color:red; font-size:10px}

派生选择器，根据文档上下文关系来确定某个标记的样式

li strong {
    font-style: italic;
    font-weight: normal;
  }

只对li元素中的strong元素进行作用

3.CSS定义与引用

内联样式表，直接在HTML元素的style属性中定义样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式</title>
</head>
<body>
    <h1 style="color: red; font-size: 30px;">内联样式表演示</h1>
    <p style="color: blue; font-family: "黑体";">
        这是一段蓝色的文本，展示了内联样式效果，使用了黑体字体。
    </p>
    <p>这句没有内联样式效果</p>
</body>
</html>

内部样式表，将CSS样式定义在HTML文档的<head>部分中，仅对所在网页有效。通常使用<style>标签来包裹样式规则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        /* 定义全局样式 */
        body {
            font-family: "黑体";
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        /* 定义标题样式 */
        h1 {
            color: red;
            font-size: 30px;
            text-align: center;
        }

        /* 定义段落样式 */
        p {
            color: blue;
            font-size: 18px;
            line-height: 1.5;
        }
        /* 定义div样式 */
        .container {
            background-color: lightgreen;
            padding: 20px;
            margin: 20px;
            border: 2px solid darkgreen;
        }

    </style>
</head>
<body>
    <h1>标题居中</h1>
    <p>这是段落</p>
    <div class="container">
        <p>这段话使用了类样式</p>
    </div>
</body>
</html>

链接外部样式表

将CSS规则写在.css为后缀的文件里

<link type="text/css" rel="stylesheet" href="styles.css">

导入外部样式表

<style type="text/css">
@import url("style.css")

三、CSS继层与层叠

CSS规则优先级：行内样式>id样式>class样式>标记样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 继承与层叠示例</title>
    <style>
        /* 全局样式 */
        body {
            font-family: "黑体"; /* 字体样式将被继承 */
            color: #333; /* 文本颜色将被继承 */
        }

        /*class样式 */
        .container {
            border: 2px solid #000; 
            padding: 20px; 
            background-color: #e0e0e0; /* 背景颜色 */
        }

        /* 元素样式 */
        h1 {
            color: red; /* 层叠：覆盖继承的文本颜色 */
        }


        /* ID样式 */
        #special {
            color: green; /* 层叠：覆盖其他文本颜色 */
            font-style: italic; /* 文本斜体 */
        }
    </style>
</head>
<body>
    这是body的文本内容
    <div class="container">
        <h1>受h1元素样式影响</h1>
        <p>继承body样式，并被.container的样式规则影响</p>
        <p id="special">这是一个id样式，优先级高于类样式</p>
    </div>
</body>
</html>

参考书籍：

《Web前端开发技术——HTML5,CSS3,JavaScript（第3版）》储久良著

以上是我的分享，希望对你有所帮助，有问题可以指出，共同进步！