零基础学习WEB前端开发(十九):CSS的引入方式(行内样式表、内部样式表、外部样式表)

本文主要是介绍零基础学习WEB前端开发(十九):CSS的引入方式(行内样式表、内部样式表、外部样式表),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、内部样式表

内部样式表,也叫内嵌样式表,写到html页面内部,是将所有的CSS代码抽取出来,单独放到<style>标签中。

前面笔记所记录的都是这种内部样式表。

  • <style>标签理论上可以放在html文档的任何地方,但一般都放在文档的<head>标签中。
  • 用这种方式,可以方便控制当前整个页面中的元素样式设置
  • 代码结构清晰,但是没有实现样式与结构的完全分离

二、行内样式表

行内样式表是用来修改段落中的一部分样式,就局部内容进行简单修改

语法:

<标签  style="color: red;font-size: 12px;">这是显示的内容< /标签>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><p>我不去想是否能够成功</p><p>既然选择了远方</p><p>便只顾风雨兼程</p><p style="font-size: 28px;color: blue;">我不去想能否赢得爱情</p><p>既然钟情于玫瑰</p><p style="font-size: 28px;color: blue;">就勇敢地吐露真诚</p></body>
</html>

不推荐大量使用,复杂样式就比较繁琐。只做简单修改可以使用。

三、外部样式表(推荐)

实际开发中都是外部样式表,适合样式比较多的情况,方法是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用

引入外部样式表分为两步:

  • 1.新建一个后缀为.css的样式文件,把所有的CSS代码都放到此文件中,例如style.css。
  • 2.在HTML页面中,使用<link>标签引入这个文件
  • <link rel = "stylesheet"  href = "css文件路径">

示例:

在style.css文件中写入样式: 

 

在html引入样式表:

 

效果:

这篇关于零基础学习WEB前端开发(十九):CSS的引入方式(行内样式表、内部样式表、外部样式表)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/947321

相关文章

Spring Boot中获取IOC容器的多种方式

《SpringBoot中获取IOC容器的多种方式》本文主要介绍了SpringBoot中获取IOC容器的多种方式,包括直接注入、实现ApplicationContextAware接口、通过Spring... 目录1. 直接注入ApplicationContext2. 实现ApplicationContextA

linux查找java项目日志查找报错信息方式

《linux查找java项目日志查找报错信息方式》日志查找定位步骤:进入项目,用tail-f实时跟踪日志,tail-n1000查看末尾1000行,grep搜索关键词或时间,vim内精准查找并高亮定位,... 目录日志查找定位在当前文件里找到报错消息总结日志查找定位1.cd 进入项目2.正常日志 和错误日

Java中最全最基础的IO流概述和简介案例分析

《Java中最全最基础的IO流概述和简介案例分析》JavaIO流用于程序与外部设备的数据交互,分为字节流(InputStream/OutputStream)和字符流(Reader/Writer),处理... 目录IO流简介IO是什么应用场景IO流的分类流的超类类型字节文件流应用简介核心API文件输出流应用文

React 记忆缓存的三种方法实现

《React记忆缓存的三种方法实现》本文主要介绍了React记忆缓存的三种方法实现,包含React.memo、useMemo、useCallback,用于避免不必要的组件重渲染和计算,感兴趣的可以... 目录1. React.memo2. useMemo3. useCallback使用场景与注意事项在 Re

Nginx屏蔽服务器名称与版本信息方式(源码级修改)

《Nginx屏蔽服务器名称与版本信息方式(源码级修改)》本文详解如何通过源码修改Nginx1.25.4,移除Server响应头中的服务类型和版本信息,以增强安全性,需重新配置、编译、安装,升级时需重复... 目录一、背景与目的二、适用版本三、操作步骤修改源码文件四、后续操作提示五、注意事项六、总结一、背景与

Vue3 如何通过json配置生成查询表单

《Vue3如何通过json配置生成查询表单》本文给大家介绍Vue3如何通过json配置生成查询表单,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录功能实现背景项目代码案例功能实现背景通过vue3实现后台管理项目一定含有表格功能,通常离不开表单

SpringBoot中@Value注入静态变量方式

《SpringBoot中@Value注入静态变量方式》SpringBoot中静态变量无法直接用@Value注入,需通过setter方法,@Value(${})从属性文件获取值,@Value(#{})用... 目录项目场景解决方案注解说明1、@Value("${}")使用示例2、@Value("#{}"php

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案:通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H