详解css的四种书写方式介绍

优先级: 外部样式

优先级,即:同名的选择器右边的会覆盖左边

1.内部样式表

            /*内部样式表,一般用于覆盖公用样式*/        #headTip {            color: 0xff5;         }    

2.使用link标签,在文档中声明使用外接资源,最常用的一种方式。

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

css外部样式表指定编码的@CHARSET=”utf-8″; 需要放在第一行。

<head>    <link href="./my-common.css" rel="stylesheet" media="screen" type="text/css"/></head>

3.@方式,引入css,注意这个是异步加载的,在整个html加载之后才加载,会导致页面闪烁。不推荐使用。

            @import 'my-common.css';    

4.内联样式表,优先级最高最直白,但不能复用不容易维护。

    

 

以上就是详解css的四种书写方式介绍的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 21:27:40
下一篇 2025年12月15日 04:21:02

相关推荐

  • 详解css绝对定位对元素宽度的影响

    一、问题来源      自己编写轮播图切换的时候前一幅图滑动时后边出现空白直到前一幅图全部滑出后第二幅图才出现。刚开始出现问题到网上搜发现有的说定时器动画可能会造成这种情况,于是我在代码调试里注释掉了定时器,让图片只走一步就停下来,发现后边还是有空白,所以确定不是定时器的问题。于是我查看了一下盒模型…

    2025年12月23日 好文分享
    000
  • 详解css的外边距margin的使用

     这篇文章详解css的外边距margin的使用 h2{margin:10px 0;}p{margin:20px 0;}……这是一个标题 这是又一个标题本例中,第一个h2的margin-bottom(10px),p的margin-top(20px),第二个h2的margin-top(10px)…

    好文分享 2025年12月23日
    000
  • 使用CSS制作简易3D效果旋转木马实例代码

    最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的。就练习了一下。开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可。然后利用css的animate属性让3d舞台无线旋转,就有了一简易的旋转木马效果。感兴趣的可以看一下…

    2025年12月23日
    000
  • 使用css改变下拉列表select框的默认样式介绍

    这篇文章使用css改变下拉列表select框的默认样式介绍 原理 原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。当然右侧的小箭头可以用伪元素before或者after来实现。 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了…

    好文分享 2025年12月23日
    000
  • 使用CSS实现Footer置底的五种方式

    页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。 方法一:将内容部分的margin-bottom设为负数 footer htm…

    2025年12月23日
    000
  • 移动端css单位之 “vh” & “vw”的分别介绍

    一、前言: 响应式web设计离不开百分比。但是,css百分比并不是所有的问题的最佳解决方案。css的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该怎么办? 二、“vh” & “vw”: vh:相对于视窗的高度:视窗高度…

    2025年12月23日
    000
  • css背景有关的属性详细介绍

    印象中css控制背景的就一个background,但是background是一个复合属性 它包括: background-color:背景颜色,css支持的颜色表示方法,都可以用 background-image:背景图片(url) background-repeat:背景是否重复(repeat、n…

    2025年12月23日 好文分享
    000
  • css超出2行部分省略号解决方法

    今天做东西,遇到了这个问题,百度后总结得到了这个结果。 首先,要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 立即学习“前端免费学习笔记(深入…

    好文分享 2025年12月23日
    000
  • CSS定位position使用介绍

    position选项来定义元素的定位属性,选项有5个可选值:static、relative、absolute、fixed、inherit 属性值为relative、absolute、fixed时top | left | right| bottom | z-index才能起作用。 static(默认值…

    好文分享 2025年12月23日
    000
  • 关于css的垂直水平居中六种方法分享

    总结了几种css居中实现的方式,注:*为常用方式,“wrap”为容器,“div”为要居中的元素。 *1.绝对定位,宽高都已知的情况下如下代码可实现,或者可以使用negative margins; .div { width: 200px; height: 200px; margin: auto; po…

    好文分享 2025年12月23日
    000
  • 详解css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下css中margin属性的两种特殊现象  1, 外边距的合并现象: 如果两个p上下排序,给上面一个p设置margin-bottom,给下面一个p设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个。  对于这种现象一般不用处理。 2,margin…

    好文分享 2025年12月23日
    000
  • 如何解决css文件失效的方法

    css都是正确的,链接也没有出错的话,为什么偏偏css样式不生效 Transitional类型:是指一种过渡类型,使用这种类型浏览器对XHTML的解析比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML的语法。这种是现在通用的方法,用dreamweaver创建网页时默认就是这种类型。aa…

    好文分享 2025年12月23日
    000
  • 使用css设置div背景颜色的方法介绍

    这篇文章主要介绍了css设置p背景颜色的方法,需要的朋友可以参考下 一、p标签内直接设置背景颜色 代码如下: 背景为黑色 p标签内设置背景色为黑色,字体颜色为白色 立即学习“前端免费学习笔记(深入)”; p标签内设置背景色截图 通过p标签内设置style设置背景色等CSS样式。 二、外部css设置p…

    2025年12月23日
    000
  • 使用css实现页面居中的方法介绍

    在网页制作的过程中,为方便读者的阅读,会把网页内容限定在一个较小的方框中,并居中显示,如何实现这一功能呢? 1)把正文放在一个 标签中,只要这个标签居中整个网页就居中了。 2)接下来要介绍一种方法:负边框,即 margin 的值为负 #text{ 立即学习“前端免费学习笔记(深入)”;     pa…

    好文分享 2025年12月23日
    000
  • 实现css文字飞入效果示例代码

    这篇文章实现css文字飞入效果示例代码 一、页面的主体布局 左右淡入的企业介绍 上海世茂集团企业招聘 世茂集团,是以房地产开发为主的国际化企业集群,房地产界领袖企业之一。 上面就不用说了吧~~~~就四句话布局就完成了~~~我实在太懒了,一个多余的美观性布局我都不愿意写QAQ,最直接的代码是为了方便我…

    好文分享 2025年12月23日
    000
  • 详解CSS属性值用法

    万维网联盟(w3c) 使用了一套特别的语法来定义 css 的属性值,能让所有的 css 属性都用。如果你曾看过 css 规范,你可能已经见过这套语法了。就像  border-image-slice  的语法 ,让我们看看: = [ | ]{1,4} && fill?如果你不知道这些符…

    2025年12月23日 好文分享
    000
  • 详解css中border-image的使用方法

    border-image-source 属性设置边框的图片的路径[none | ] p { border: 20px solid #000; border-image-source: url(border.png);} border-image-slice 属性图片边框向内偏移[ | ](1,4) …

    2025年12月23日
    000
  • 解析CSS3中nth-child与nth-of-type的区别

    css3中nth-child与nth-of-type的区别其实很简单::nth-of-type为什么要叫:nth-of-type?因为它是以”type”来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是…

    2025年12月23日 好文分享
    000
  • CSS常用字体属性:background-origin和background-clip介绍说明

    (一)常用的字体属性:       font-weight: 属性值100-900  400等于正常 700等于bold ,数值越大,越粗       font-size:字体大小,单位可以为px或者%       font-family:字体族 比如说:微软雅黑       font-style:…

    好文分享 2025年12月23日
    000
  • CSS中的伪类与伪元素及二者间的区别说明

    这篇文章主要介绍了详解css中的伪类与伪元素及二者间的区别,实际上css3中规范了一种简单粗暴的方法,即伪类前用一个冒号表示,而伪元素前用两个冒号表示,这样就不容易混淆了,需要的朋友可以参考下 CSS伪类的概念及作用CSS伪类(Pseudoclasses)是选择符的螺栓,用来指定一个或者与其相关的选…

    2025年12月23日 好文分享
    000

发表回复

登录后才能评论
关注微信