零基础学习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

相关文章

MybatisPlus中几种条件构造器运用方式

《MybatisPlus中几种条件构造器运用方式》QueryWrapper是Mybatis-Plus提供的一个用于构建SQL查询条件的工具类,提供了各种方法如eq、ne、gt、ge、lt、le、lik... 目录版本介绍QueryWrapperLambdaQueryWrapperUpdateWrapperL

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea(严格

idea设置快捷键风格方式

《idea设置快捷键风格方式》在IntelliJIDEA中设置快捷键风格,打开IDEA,进入设置页面,选择Keymap,从Keymaps下拉列表中选择或复制想要的快捷键风格,点击Apply和OK即可使... 目录idea设www.chinasem.cn置快捷键风格按照以下步骤进行总结idea设置快捷键pyth

Linux镜像文件制作方式

《Linux镜像文件制作方式》本文介绍了Linux镜像文件制作的过程,包括确定磁盘空间布局、制作空白镜像文件、分区与格式化、复制引导分区和其他分区... 目录1.确定磁盘空间布局2.制作空白镜像文件3.分区与格式化1) 分区2) 格式化4.复制引导分区5.复制其它分区1) 挂载2) 复制bootfs分区3)

JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

《JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)》:本文主要介绍如何在IntelliJIDEA2020.1中创建和部署一个JavaWeb项目,包括创建项目、配置Tomcat服务... 目录简介:一、创建项目二、tomcat部署1、将tomcat解压在一个自己找得到路径2、在idea中添加

Java利用Spire.Doc for Java实现在模板的基础上创建Word文档

《Java利用Spire.DocforJava实现在模板的基础上创建Word文档》在日常开发中,我们经常需要根据特定数据动态生成Word文档,本文将深入探讨如何利用强大的Java库Spire.Do... 目录1. Spire.Doc for Java 库介绍与安装特点与优势Maven 依赖配置2. 通过替换

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存,通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流

java敏感词过滤的实现方式

《java敏感词过滤的实现方式》文章描述了如何搭建敏感词过滤系统来防御用户生成内容中的违规、广告或恶意言论,包括引入依赖、定义敏感词类、非敏感词类、替换词类和工具类等步骤,并指出资源文件应放在src/... 目录1.引入依赖2.定义自定义敏感词类3.定义自定义非敏感类4.定义自定义替换词类5.最后定义工具类

python项目环境切换的几种实现方式

《python项目环境切换的几种实现方式》本文主要介绍了python项目环境切换的几种实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 如何在不同python项目中,安装不同的依赖2. 如何切换到不同项目的工作空间3.创建项目

SpringBoot的内嵌和外置tomcat的实现方式

《SpringBoot的内嵌和外置tomcat的实现方式》本文主要介绍了在SpringBoot中定制和修改Servlet容器的配置,包括内嵌式和外置式Servlet容器的配置方法,文中通过示例代码介绍... 目录1.内嵌如何定制和修改Servlet容器的相关配置注册Servlet三大组件Servlet注册详