首页 > 其他分享 >1 CSS的引入方式

1 CSS的引入方式

时间:2023-08-18 14:11:40浏览次数:37  
标签:行内 方式 样式 标签 样式表 使用 引入 CSS

1 CSS的引入方式

CSS样式有三种不同的使用方式,分别是行内样式,嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。

  • 行内样式
    行内样式,就是写在元素的style属性中的样式,这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式,因为那样不利于后期维护。
  • 嵌入式
    嵌入式,是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊,单独的样式时,可以使用内部样式表。
  • 链接式
    链接式,就是把CSS样式写在HTML文档的外部,一个后缀为 .css 的外部样式表中,然后使用时在head标签中,使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时,外部样式表是最理想的选择。在使用外部样式表的情况下,我们可以通过改变一个文件来改变这所有页面的外观。

common.css

div{
      color: white;
      background-color: #369;
      text-align: center
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的引入方式</title>

<!--    链接式-->
    <link rel="stylesheet" href="common.css">

<!--    嵌入式-->
    <style>
        p{
            color: darkseagreen;
        }
    </style>
</head>
<body>
    <div>故人西辞黄鹤楼</div>
    <div>烟花三月下扬州</div>

    <p>君不见黄河之水天上来,<br>奔流到海不复回.</p>

<!--    行内样式-->
    <div style="color: white;background-color: #369;text-align: center">行内设置</div>
</body>
</html>

标签:行内,方式,样式,标签,样式表,使用,引入,CSS
From: https://www.cnblogs.com/zczhaod/p/17640324.html

相关文章

  • Docker方式安装Archery
    Docker方式安装Archery基本环境信息OS:RHELServer7.8_x86_64()archery版本:hhyo/Archery-1.9.1Python版本:3.9.10准备docker环境1.安装Docker可以执行命令来获取安装脚本:curl-fsSLhttps://get.docker.com-oget-docker.sh|sudosh也可以直接访问https://get.docker.co......
  • 两种不同冷却方式的小型手持激光焊接机价格差异
    编辑:镭拓激光小型手持激光焊接机是当下在金属薄板焊接领域非常受欢迎的一种激光焊接设备,与传统的焊接方式相比,它的焊接速度更快、操作也更为简单,重点是焊接的效果也非常好。市面上关于小型手持激光焊接机价格其实差异还是比较大,这种差异主要是由于相应的配置差异造成的。本篇我们来......
  • WPF加载GIF的五种方式(Storyboard / WpfAnimatedGif / ImageAnimator / PictureBox / M
    部分内容参考博文WPF如何显示gif一、使用Storyboard效果:  (1)页面xaml:<Windowx:Class="PlayGifDemo.StoryboardWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2......
  • 7种创建方式,带你理解Java的单例模式
    本文分享自华为云社区《《Java极简设计模式》第01章:单例模式(Singleton)》,作者:冰河。单例设计模式看几个单例对象的示例代码,其中有些代码是线程安全的,有些则不是线程安全的,需要大家细细品味,这些代码也是在高并发环境下测试验证过的。代码一:SingletonExample1这个类是懒汉模式......
  • 瞅瞅吧!你可能会用到的 css 动画库
    原文链接:推荐几个你可能会用到的CSS动画库Animate.cssOBNOXIOUS.CSSCSShakeAnimXYZAimistaHover.cssMagicCSS如果你有正在用的觉得不错的库,可以在下方评论喔~......
  • CSS基础-浮动
    浮动浮动是为了元素标签的并排显示问题。我们在浏览网页的时候,经常会看到几个div块是可以并排显示的,浮动就是解决这样问题的方法之一。float属性有以下的值float:left;左浮动float:right右浮动浮动的特点浮动主要针对的是并排显示的盒子而言。在一个父容器的盒......
  • 7种创建方式,带你理解Java的单例模式
    本文分享自华为云社区《《Java极简设计模式》第01章:单例模式(Singleton)》,作者:冰河。今天给大家介绍Java极简设计模式中的单例设计模式(Singleton),用最短的篇幅讲述设计模式最核心的知识。单例设计模式看几个单例对象的示例代码,其中有些代码是线程安全的,有些则不是线程安全的,需要大家细......
  • Python字符串的三种定义方式
    一、为什么有多种定义方式我们在刚接触python字符串的时候,可能都只知道用双引号来定义(''),但如果我们要定义的字符串中包含了双引号,那么python还能识别并输出出来吗?显然是不能的,那么如何解决这个问题呢?很简单,如果语句中包含双引号,那么我们用单引号就可以区分开了。二、三种定义方......
  • docker查看日志的三种方式
    docker查看日志的三种方式:1.dockerlogs--tail=1000容器名称(查看容器前多少行的日志)2.docker容器启动后,可以进入以下位置查看日志(/var/lib/docker/containers/容器ID/容器ID-json.log)(进入容器内部查看日志)3.dockerattach容器名称(实时查看,但是CTRL+C强制退出以后也会影响......
  • 实现通用路由菜单的一种方式
    将路由数组引入后进行遍历,自行迭代,即可展示需要的菜单选项<a-menu-itemv-for="iteminroutes":key="item.path">{{item.name}}</a-menu-item>在通用布局中使用route-view渲染实际的页面内容,更加动态也更加灵活<a-layout-contentclass="center">......