『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>
相关文章
|
7月前
|
缓存 前端开发
css使用各类样式表
css使用各类样式表
|
1月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
59 7
|
3月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
115 1
|
3月前
|
前端开发 JavaScript
uniapp动态修改css样式(通过js来修改css样式)
uniapp动态修改css样式(通过js来修改css样式)
|
6月前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
|
6月前
|
前端开发 流计算
程序与技术分享:css样式大全,完整的Css样式大全(整理)
程序与技术分享:css样式大全,完整的Css样式大全(整理)
52 1
|
7月前
|
前端开发 搜索推荐 开发者
CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
【4月更文挑战第6天】CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
53 3
|
前端开发
原来CSS也能写出这么漂亮的登录页面,分享一个纯CSS样式Login页面
原来CSS也能写出这么漂亮的登录页面,分享一个纯CSS样式Login页面
244 0
|
7月前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
69 0
|
7月前
|
存储 缓存 前端开发
link 与 @import:CSS 样式表的加载策略(下)
link 与 @import:CSS 样式表的加载策略(下)

热门文章

最新文章