前端必知：5.css样式表及css的引入方式_前端响应式页面引入css-CSDN博客

本文链接：https://blog.csdn.net/qq_52799985/article/details/131624416

CSS是一种定义网页样式的技术，与HTML结构分离。它可以控制元素的外观、布局和动画，包括选择器、样式属性、盒模型、布局定位和响应式设计。通过媒体查询实现响应式设计，适应不同设备。CSS还支持动画和过渡效果，增强用户体验。

摘要由CSDN通过智能技术生成

CSS样式表（Cascading Style Sheets）是一种用于定义网页元素样式的技术。它与HTML结构分离，以独立的文件形式存在，可通过<link>标签或内联方式引入HTML文档中。

通过CSS样式表，可以定义网页元素的外观、布局和动画效果，从而实现对网页的美化和样式控制。以下是一些CSS样式表的特点和常见用法：

选择器（Selectors）：用于指定要应用样式的HTML元素。可以使用元素选择器、类选择器、ID选择器、属性选择器等等。
样式属性和值（Properties and Values）：CSS样式属性用于指定元素的具体样式，例如color（文字颜色）、font-size（字体大小）、background-color（背景颜色）等。每个属性可以有一个或多个取值。
盒模型（Box Model）：通过CSS样式表可以控制元素的盒模型，包括边距（margin）、边框（border）、填充（padding）和尺寸（width、height）。这些属性可以影响元素在页面中的位置和大小。
布局和定位（Layout and Positioning）：CSS样式表提供了多种布局和定位属性，如display、position、float、flexbox和grid等，用于实现不同的布局方案和元素定位。
响应式设计（Responsive Design）：通过使用CSS媒体查询（Media Queries），可以根据设备的屏幕大小和特性来应用不同的样式，以实现响应式设计，使网页在不同的设备上呈现最佳的显示效果。
动画和过渡（Animations and Transitions）：CSS样式表可以定义动画效果和过渡效果，通过使用@keyframes规则和transition属性，可以实现元素的动态变化和平滑过渡。

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">
    <link rel="shortcut icon" href="微信.png" type="image/x-icon">  
    <style type="text/css">
        /* 使用@import导入css */
        @import url('./css/goods.css');   
    </style>
</head>
<body>

    <!-- 
        css层叠样式表
        css引入方式  
        1.行间引入
        2.内部样式表
        3.外部样式表  
            开发的时候常用

        link 和 @import 引入css的区别
        1. @import 是 css2.1 之后才推出的，因此可能存在兼容问题
        link不存在兼容问题。
        2.link不仅可以引入css，也可以引入其他类型的文件，功能更加强大
        推荐使用link。
    -->
    <div class="show">show</div>
    <div class="wp">wp</div>

    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>