【2024】前端学习笔记9-内部样式表-外部导入样式表-类选择器

学习笔记

内部样式表

内部样式表是将 CSS 样式规则写在 HTML 文档内部。通过<style>标签在 HTML 文件的<head>部分定义样式。

简单示例:

html 复制代码
   <!DOCTYPE html>
   <html>
   <head>
     <style>
       p {
         color: red;
         font - size: 16px;
       }
     </style>
   </head>
   <body>
     <p>这是一个段落。</p>
   </body>
   </html>

其中<head>部分的<style>就是一个内部样式表,<p>是选择器,这个真是规则针对<html>中所有的<p>元素做出规范,在此例中是设置颜色为红色,字体大小为16px。

对于小项目而言定制方便,易于修改和维护;缺点是缺乏代码复用性,不利于大型项目。

需要注意行内样式表优先级高于内部样式表。

外部导入样式表

外部样式表是将 CSS 样式规则写在一个独立的.css 文件中,然后通过 HTML 文件引入这个.css 文件来应用样式。在 HTML 文件中,使用<link>标签来导入外部样式表。

示例:

我的项目中有一个css目录,其中有一个test.css文件,其中定义着以下内容:

css 复制代码
p {
    color: blue;
    font-size: 20px;
}

然后在html中引用此css文件

html 复制代码
<head>
  <link rel = "stylesheet" href = "css/test.css">
</head>
<body>
  <p>这是一个段落。</p>

展示效果:

link标签的rel属性值为stylesheet,表示这是一个样式表链接;href属性指定外部样式表的路径。

注意:link的位置决定哪个生效,如果在style后面则是link生效,在前面则是style生效。

类选择器:class

类选择器是 CSS 中一种常用的选择器,用于选择具有特定类名(class)的 HTML 元素。类名是开发人员在 HTML 元素的class属性中自定义定义的标识。

在 CSS 中,类选择器以一个点(.)开头,后面跟着类名。

示例:

一个test.css文件中定义两个元素,分别为introbackground

css 复制代码
.intro {
    color: blue;
    font-size: 20px;
}

.background {
    width: 300px; height: 200px;
    background-color: royalblue;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
}

然后在html中引用

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <link rel = "stylesheet" href = "css/test.css"> 
</head>
<body>
  <p class="intro">这是一个段落。</p>

  <div class="background"></div>
</body>
</html>

展示效果:


使用类选择器的优势:

  • 类选择器可以在多个不同的 HTML 元素上使用
  • 通过类选择器可以方便地对元素进行样式分组
相关推荐
骁的小小站2 小时前
Verilator 和 GTKwave联合仿真
开发语言·c++·经验分享·笔记·学习·fpga开发
kkkkk0211062 小时前
软考高级-系统架构设计师案例专题三:系统开发基础
笔记·系统架构
林强1813 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散5 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
颜颜yan_5 小时前
UU远程——让工作、学习、娱乐跨设备无缝衔接,“远程”更像“身边”
学习·娱乐·远程工作
衬衫chenshan5 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇6 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
新子y6 小时前
【小白笔记】区分类方法/实例方法和静态函数/命名空间函数
笔记·分类
哆啦A梦15887 小时前
点击Top切换数据
前端·javascript·vue.js
梁辰兴7 小时前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统