3种CSS使用方法

3种CSS使用方法

(1)链接式:(外部引入.css文件)

( 用得比较多 ) 在html加载前就被引用

在网页的

标签对中用引入外部样式表,使用html规则引入外部css :

   

 导入式:(外部引入.css文件)     

( 不使用 ) @import在html加载完成后才引用,并且无法在JS DOM模型中插入样式

立即学习“前端免费学习笔记(深入)”;

引入外部CSS文件,标记也是写在标记中,使用的语法如下:

             @import "./css/style.css"          /*@import url(./css/style.css)*/      

(2)嵌入式  

直接写在标签下,常在

中,

优点:速度快,所有的CSS控制都是针对本页面标签的,直接在HTML文档中读取样式;

缺点: 单个页 面显得臃肿,不能被其他HTML引用造成代码量相对较多,维护麻烦

      div{border:1px #ff0 solid}    

(3)内联式   

( 不推荐 ) 其可以用在不经常改动的位置

内容

以上就是3种CSS使用方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615179.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:47:03
下一篇 2025年12月24日 04:47:21

相关推荐

  • 关于css中的id选择器与class选择器的介绍

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。 例如: #para1{ text-align:center; color:red;} 注意: ID属性不要…

    好文分享 2025年12月24日
    000
  • 深入理解px、rem、em、vh、vw之间的区别

    绝对长度 px px是像素值,是一个固定的长度,比如我们的米,厘米一样。 相对长度 为什么我们需要相对长度rem em等? 固定长度已经不能满足我们现在的需求了。 举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的盒子的宽高,我们还想要让我们字体大小也随之缩小,这样用户体验会更好一点。 …

    2025年12月24日
    000
  • 关于css样式表及多重样式优先级的介绍

    插入样式表的方法有三种,分别是: 1、外部样式表; 2、内部样式表; 3、内联样式 外部样式表 立即学习“前端免费学习笔记(深入)”; 在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部: 实例如下: 浏览器会从文件 myst…

    2025年12月24日
    000
  • 常用的css背景属性介绍

    一、background-color 该属性定义了元素的背景颜色。 页面的背景颜色使用在body的选择器中,如下: 效果图: 立即学习“前端免费学习笔记(深入)”; 在CSS中,颜色值通常以以下方式定义: 1、十六进制 – 如:”#ff0000″ 2、RGB &#…

    2025年12月24日 好文分享
    000
  • 关于css文本属性的详细介绍

    文本颜色 颜色属性被用来设置文字的颜色。 颜色值有如下写法: 1、十六进制值 如: #FF0000 立即学习“前端免费学习笔记(深入)”; 2、RGB值 RGB(255,0,0) 3、颜色的名称 如: red 示例: 注意:如果为字体定义了颜色属性,那么必须定义背景色属性。 结果显示: (视频教程推…

    2025年12月24日 好文分享
    000
  • CSS Grid 深入理解

    简介 本教程将深入探讨 CSS 网格布局,并探索几乎所有的属性和功能。读完之后,你将能够用这种出色的 CSS 附加功能去处理任何一种布局。 术语:Grid Grid 是二维网格系统。它可以用来构建复杂的布局以及较小的界面。 立即学习“前端免费学习笔记(深入)”; 属性:display 只需要把一个元…

    2025年12月24日
    000
  • css链接状态有哪些

    首先,链接的样式可以用任何css属性(如颜色,字体,背景等)。 链接可以有不同的状态,如下: a:link – 正常,未访问过的链接 a:visited – 用户已访问过的链接 a:hover – 当用户鼠标放在链接上时 立即学习“前端免费学习笔记(深入)”; a…

    2025年12月24日 好文分享
    000
  • 关于css中清除浮动(clearfix)的介绍

    清除浮动clearfix (视频教程推荐:css视频教程) 实例代码: .clearfix:after, .clearfix:before { content: ” “; display: table;}.clearfix:after { clear: both;} .clearfix{zoom:1…

    2025年12月24日
    000
  • CSS属性box-sizing详解

    css盒模型 你需要先了解CSS盒模型 CSS盒模型中 width 与 height 的计算规则: 在CSS中,你设置一个元素的width与height只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding,绘制到屏幕上时的盒子宽度和高度会加上设置的边框(border)和…

    2025年12月24日 好文分享
    000
  • css实现将网页变成黑白色

    将整个网页全局变色有三种方法,分别是:css直接设置,添加svg滤镜,通过js遍历所有标签更改颜色。 1、css直接设置 直接编辑样式,然后在需要应用的地方设置class .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(…

    2025年12月24日
    000
  • css中常用的水平垂直居中对齐方法有哪些

    一、文字的水平垂直居中 text-align: center; line-height: 单前元素高度; (视频教程推荐:css视频教程) 二、元素的水平垂直居中 1、使用绝对定位 立即学习“前端免费学习笔记(深入)”; 2、使用绝对定位+ calc() 3、使用绝对定位+transform 4、使…

    2025年12月24日 好文分享
    000
  • 如何用CSS写轮播图效果?

    相信很多小伙伴做过的项目里面都有轮播图这么一个需求,有的小伙伴可能会自己造轮子,有的小伙伴可能会直接Google轮播图插件 但是如果不使用javascript,能不能实现轮播图的效果呢?可能小伙伴们并没有考虑过这个问题,那么下面我们就一起来用css实现一个简易的轮播图 基本需求分析 由于css无法做…

    2025年12月24日
    000
  • css实现隐藏元素效果

    display: none 1、DOM结构: 浏览器不会渲染display:none 的元素, 并且不占据页面空间 2、事件监听: 无法对元素进行事件监听 3、继承: 不会被子元素继承(子元素设置display: block 不会显示) 4、改动: 改动属性值会引起页面的重排和重绘 立即学习“前端免…

    2025年12月24日
    000
  • CSS响应式布局之媒体查询

    在实际项目中,总会遇到响应式布局的问题,如果未曾使用一些响应式UI框架的话,那么一般就会用媒体查询来实现响应式布局,由于遇到的实在太频繁了,所以我觉得还是有必要稍微进行一下总结的。 首先我们需要了解到的一点是,使用媒体查询这种方式,当重置浏览器大小的过程中,页面就会根据浏览器的宽度和高度重新渲染页面…

    2025年12月24日
    000
  • css的四种引入方式分别是什么

    css的四种引入方式分别是:行内样式、内嵌样式、链接样式和导入样式。 1、行内样式 最直接最简单的一种,直接对HTML标签使用,例如: 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便。 (视频教程推荐:css视频教程) 立即学习“前端免费学习笔记(深入)”; 2、内嵌样式 内嵌…

    2025年12月24日
    000
  • 如何使用 CSS 颜色?

    CSS 中颜色有多种不同的应用方式;预定义的颜色名称、rgb、rgba 以及使用十六进制颜色值。下面的 CSS 展示的是使用预定义的颜色名称,背景色将设置为 ‘purple(紫色)’。 background-color: Purple; CSS 中有很多预定义的颜色,可以向上…

    2025年12月24日
    000
  • css如何实现底部tapbar栏效果

    首先我们来看一下实现效果: css代码: *{ margin: 0; padding: 0; text-decoration: none; list-style: none; } .foot { width: 100%; height: 68px; background: #FFFFFF; posi…

    2025年12月24日
    000
  • css样式引入方式的优缺点对比

    1、行内样式 优点:书写方便,权重高 缺点:没有做到结构样式相分离 (视频教程推荐:css视频) 2、内部样式 立即学习“前端免费学习笔记(深入)”; 优点:结构样式相分离 缺点:分离不彻底 div { color: violet; font-size: 16px; } 3、外部样式 优点:完全实现…

    2025年12月24日
    000
  • 如何利用css生成可控虚线

    目的: 生成如下图所示虚线 实现方式 实现方式,有的人用多个span生成,一个小圆点就是一个span,这样是可以,但是整个状态改变比较麻烦,有什么方式生成可以控制的虚线呢? 立即学习“前端免费学习笔记(深入)”; (视频教程推荐:css视频教程) 生成dashed 生成横向线 生成dashed虚线,…

    2025年12月24日
    000
  • 如何利用css改变浏览器滚动条样式

    注意:该方法只适用于 -webkit- 内核浏览器 滚动条外观由两部分组成: 1、滚动条整体滑轨 2、滚动条滑轨内滑块 在CSS中滚动条由3部分组成 立即学习“前端免费学习笔记(深入)”; name::-webkit-scrollbar //滚动条整体样式name::-webkit-scrollba…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信