CSS基础语法之CSS的3种引入

这次给大家带来css基础语法之css的3种引入,css基础语法的css3种引入的注意事项有哪些,下面就是实战案例,一起来看一下。

CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout)。

Web早期,HTML是一种很有限的语言,这种语言不关心外观,它只是一种简洁的小型标记机制。

随着Mosaic网页浏览器的出现,网站开始到处涌现。对于页面改变外观的需求增加,于是增加了类似和之类的标记元素。

几年之后,大多数网站标记几乎完全由表格和font元素组成,且对于所要表现的内容不能传达任何实际含义,使文档可用性降低,且不易于维护。

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

于是1995年,W3C发布了CSS草案,试图解决结构与样式混杂的问题。

1996年,W3C正式推出CSS1。

1998年,推出CSS2。

2001年从CSS3开始,CSS这门语言分割成多个独立的模块,每个模块独立分级,且只包含一小部分功能。

2011年开始设计CSS4

 一、css样式表的引入

1.内嵌样式表

内嵌样式表是写在Tag(标签)里面的。内嵌样式只对所在的Tag有效 。(如果有多种样式,内嵌式会覆盖其它的样式,并生效自己的)

 示例:

这个style定义

里面的文字 是20pt字体,字体颜色是红色。

2.内部样式表

内部样式表是写在HTML的

里面的。内部样式表只对所在的网页有效。

内部样式表要用到style这个Tag,写法如下 :

     div{           color : red;         }

3.外部样式表

如果很多网页需要用到同样的样式(Styles),要用外部样式表。外部样式表需要将样式写在一个css文件中,然后在页面中用标签引入,在需要应用该样式的每个页面中引入该文件。

示例:

1、标签位置一般写在

标签之内。

2、css样式文件名称以有意义的英文字母命名,如 main.css。

3、href=””是引入css的路径

4、rel=”stylesheet” type=”text/css” 是固定写法不可修改。

记住他们的优先级:内联式 > 嵌入式 > 外部式

在CSS中也有注释语句:用/*注释语句*/来标明  (Html中使用)

相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章!

相关阅读:

vscode的常用设置

10进制数如何转为16进制

怎样将自己的maven项目托管到github

以上就是CSS基础语法之CSS的3种引入的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:35:19
下一篇 2025年12月21日 17:35:34

相关推荐

  • HTML和CSS重点难点问题

    本文主要和大家分享HTML和CSS重点难点问题,希望能帮助到大家。 1.怎么让一个不定宽高的 p,垂直水平居中? 使用flex 只需要在父盒子设置:display: flex; justify-content: center;align-items: center; 使用 CSS3 transfor…

    好文分享 2025年12月21日
    000
  • HTML和CSS重难点知识点总结

    本文主要和大家分享html和css重难点知识点总结,希望能帮助到大家。 怎么让一个不定宽高的 p,垂直水平居中? 使用 Flex 只需要在父盒子设置:display: flex; justify-content: center;align-items: center; 使用 CSS3 transfo…

    好文分享 2025年12月21日
    000
  • css实现聚光灯效果的代码分享

    简介 CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命。 之前使用变量的时候,需要借助sass、less等预处理工具来实现,现在我们可以直接使用css来声明变量。 兼容性 老规矩,先来看下兼容性 立即学习“前端免费学习笔记(深入)”; 兼容性一片绿,红的那不是还有两个…

    2025年12月21日 好文分享
    000
  • vue的css动画

    这次给大家带来vue的css动画,使用vue的css动画注意事项有哪些,下面就是实战案例,一起来看一下。 .toggle-cart-enter-active, .toggle-cart-leave-active {transition: all .3s ease-out;}.toggle-cart-…

    好文分享 2025年12月21日
    000
  • 关于CSS里的块级格式

    1.BFC 定义 bfc(block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有block-level box(块级元素)参与, 它规定了内部的block-level box如何布局,并且与这个区域外部毫不相干. 通俗地来说…

    好文分享 2025年12月21日
    000
  • CSS的伪类选择器

    这次给大家带来css的伪类选择器,css伪类选择器的注意事项有哪些,下面就是实战案例,一起来看一下。 a.random:hover{color:#64FFDA;font-size:120%;} //选择的是class=”random”的标签。 a#search:active{font-size:80…

    2025年12月21日
    000
  • 为什么把css文件放在头部

    我们知道,在html文件中,我们一般都是把css放在头部,把js放在尾部,这是为什么呢?今天给大家好好分析一下这样做的原因。 这样会先加载css的样式,在渲染dom的时候已经知道了自己的样式了,所以一次渲染成功 如果css放在底部,那么需要先渲染dom,然后加载css后会重新渲染之前dom,需要两次…

    好文分享 2025年12月21日
    000
  • style对象的cssText方法有哪些使用方法

    这次给大家带来style对象的csstext方法有哪些使用方法,style对象的csstext方法使用的注意事项有哪些,下面就是实战案例,一起来看一下。 cssText 本质是什么?   cssText 的本质就是设置 HTML 元素的 style 属性值。 cssText 怎么用? domElem…

    好文分享 2025年12月21日
    000
  • html+css+jquery做选项卡

    这次给大家带来html+css+jquery做选项卡,html+css+jquery做选项卡的注意事项有哪些,下面就是实战案例,一起来看一下。 列表选项卡 body{ margin:0px; padding:0px; } #main{ width:310px; border:1px solid #C…

    好文分享 2025年12月21日
    000
  • html+css+javascript如何实现列表循环滚动

    这次给大家带来html+css+javascript如何实现列表循环滚动,html+css+javascript实现列表循环滚动的注意事项有哪些,下面就是实战案例,一起来看一下。 说明:设置时间定时,在规定的时间内替换前一个节点的内容 1、关键代码:javascript: var dome=docu…

    好文分享 2025年12月21日
    000
  • 怎样操作meta标签中的viewport来控制设备屏幕的css属性

    这次给大家带来怎样操作meta标签中的viewport来控制设备屏幕的css属性,利用meta标签中的viewport来控制设备屏幕的css属性的注意事项有哪些,下面就是实战案例,一起来看一下。 width-viewport的宽度 height-viewport的高度 initial-scale 初…

    好文分享 2025年12月21日
    000
  • 怎样实现meta标签中的viewport来控制设备屏幕的css属性

    这次给大家带来怎样操作meta标签中的viewport来控制设备屏幕的css属性,利用meta标签中的viewport来控制设备屏幕的css属性的注意事项有哪些,下面就是实战案例,一起来看一下。 width-viewport的宽度 height-viewport的高度 initial-scale 初…

    好文分享 2025年12月21日
    000
  • 如何使用CSS对TD中INPUT的宽度设置

    这次给大家带来如何使用css对td中input的宽度设置,使用css对td中input的宽度设置的注意事项有哪些,下面就是实战案例,一起来看一下。 给某个option 添加 selected = “selected” 属性就是默认选项 全部 通过 未通过 则“通过”为默认选中…

    好文分享 2025年12月21日
    000
  • 怎样编写灵活、稳定、高质量的HTML和css代码

    这次给大家带来怎样编写灵活、稳定、高质量的html和css代码,编写灵活、稳定、高质量的html和css代码的注意事项有哪些,下面就是实战案例,一起来看一下。 黄金定律永远遵循同一套编码规范,不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. 一、语法:1.用两个空格来代替制表…

    好文分享 2025年12月21日
    000
  • 怎样用HTML和CSS做出大白

    这次给大家带来怎样用html和css做出大白,用html和css做出大白的注意事项有哪些,下面就是实战案例,一起来看一下。 PS:您最好对 HTML 和 CSS 有一定的了解,但如果你是小白也没关系,小白见「大白」也是可以的! 一、准备工作 进入到 /home/shiyanlou/ 目录下,新建空白…

    好文分享 2025年12月21日
    000
  • Html+css怎样实现纯文字和带图标的按钮

    这次给大家带来html+css怎样实现纯文字和带图标的按钮,html+css实现纯文字和带图标的按钮的注意事项有哪些,下面就是实战案例,一起来看一下。 本文总结一下一些基础页面元素的实现方式,后续陆续更新。首先我们遇到最多的可能是按钮的切图,按钮可能有很多种外观,但是一般可分为纯文字的和带图标的按钮…

    好文分享 2025年12月21日
    000
  • CSS的SASS样式应该怎么使用

    这次给大家带来css的sass样式应该怎么使用,css的sass样式使用的注意事项有哪些,下面就是实战案例,一起来看一下。 随着越来越多的开发者使用SASS,我们有必要关注一下SASS的代码的个数问题。 我们可以从CSS(层叠样式表)的语法出发,来解释SASS语法的一些特别之处,毕竟,CSS样式指南…

    好文分享 2025年12月21日
    000
  • HTML的基础知识.关于css样式表和样式属性的详细介绍

    这次给大家带来html的基础知识.关于css样式表和样式属性的详细介绍,使用html的基础知识css样式表和样式属性的注意事项有哪些,下面就是实战案例,一起来看一下。 一、position:fixed     锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。 二、position:a…

    好文分享 2025年12月21日
    000
  • css怎样固定div或者table在指定位置

    这次给大家带来css怎样固定div或者table在指定位置,用css固定div或者table在指定位置的注意事项有哪些,下面就是实战案例,一起来看一下。 .bottomTable{ background-color: rgb(249,249,249); z-index:99999999; posit…

    好文分享 2025年12月21日
    000
  • CSS3的文本阴影text-shadow属性应该如何使用

    这次给大家带来css3的文本阴影text-shadow属性应该如何使用,使用css3的文本阴影text-shadow的注意事项有哪些,下面就是实战案例,一起来看一下。 文本阴影text-shadow属性特效: 1.右下角阴影,左下角阴影,左上角阴影,右上角阴影 text-shadow p{ text…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信