CSS_基础知识

最新推荐文章于 2024-10-10 19:30:00 发布

飞Link

最新推荐文章于 2024-10-10 19:30:00 发布

阅读量110

点赞数

分类专栏： HTML 文章标签： css html javascript css3 vue

本文链接：https://blog.csdn.net/feizuiku0116/article/details/119701352

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括其用于美化界面和控制页面布局的作用。详细阐述了CSS的三种引入方式：行内式、内嵌式和外链式，分析了各自的优缺点并提供了实例。行内式方便但不可重用，内嵌式适用于单页复用，而外链式则提高了代码的组织和重用性。

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

一.CSS介绍

描述

美化界面
控制页面布局

语法

选择器{样式规则}
样式规则
- 属性名1：属性值1
- 属性名2：属性值2

二.CSS的三种引入方式

行内式

<!-- - 描述：直接在标签的 style 属性中添加 css 样式
- 优点：优点：方便、直观。 
- 缺点：缺乏可重用性。
- 实例： -->
<div style="width:100px; height:100px; background:red ">hello</div>

内嵌式

<!-- - 描述：在<head>标签内加入<style>标签，在<style>标签中编写css代码。
- 优点：在同一个页面内部便于复用和维护。 
- 缺点：在多个页面之间的可重用性不够高。
- 实例： -->
<head>
   <style type="text/css">
      h3{
         color:red;
      }
   </style>
</head>

外链式

<!-- - 描述：将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中。
- 优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
- 缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。
- 实例： -->
<link rel="stylesheet" type="text/css" href="css/main.css">