『CSS』CSS样式表的三种引入方式

简介: 📣读完这篇文章里你能收获到- 本文详细介绍了CSS样式表的三种引入方式- 分别给出三种引入方式的代码实例

请添加图片描述
📣读完这篇文章里你能收获到

  • 本文详细介绍了CSS样式表的三种引入方式
  • 分别给出三种引入方式的代码实例
  • 这篇文章强烈建议收藏!!!免得下次找不到

请添加图片描述---

一、行内样式

  • 使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
提示:这种写法实际应用较少

请添加图片描述---

二、内部样式表

  • 在style标签中书写CSS代码,style标签写在head标签中
<head>
   <style type="text/css">
        input{border:blue solid 1px;background-color: brown}
        a{border:blue solid 1px;background-color: brown}
   </style>
</head>

请添加图片描述---

三、外部样式表

  • CSS代码保存在扩展名为.css的样式表中
  • HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式

1 链接式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2 导入式

<style type="text/css">
  @import url("css文件路径");
</style>
相关文章
|
3月前
|
缓存 前端开发
css使用各类样式表
css使用各类样式表
|
2月前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
28 1
|
2月前
|
前端开发 流计算
程序与技术分享:css样式大全,完整的Css样式大全(整理)
程序与技术分享:css样式大全,完整的Css样式大全(整理)
27 1
|
3月前
|
前端开发 搜索推荐 开发者
CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
【4月更文挑战第6天】CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
38 3
|
3月前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
38 0
|
3月前
|
存储 缓存 前端开发
link 与 @import:CSS 样式表的加载策略(下)
link 与 @import:CSS 样式表的加载策略(下)
|
3月前
|
存储 前端开发 JavaScript
link 与 @import:CSS 样式表的加载策略(上)
link 与 @import:CSS 样式表的加载策略(上)
|
前端开发
原来CSS也能写出这么漂亮的登录页面,分享一个纯CSS样式Login页面
原来CSS也能写出这么漂亮的登录页面,分享一个纯CSS样式Login页面
166 0
|
3月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——CSS3、基础样式表
H5+CSS3+JS逆向前置——CSS3、基础样式表
52 0
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
74 0