CSS样式表引用方式 css样式引用方式不包括哪种类型

   2023-03-08 学习力0
核心提示:1、外部文件引用方式;(推荐使用)2、使用@import引用外部CSS文件;3、内部文档头方式也叫内嵌法调用;4、直接插入式也叫行内样式。它们主要的差别在于它们规定的风格使用的范围不同:  一、外部文件引用方式  外部文件引用方式即将CSS写成一个文件,在HTML

1、外部文件引用方式;(推荐使用)

2、使用@import引用外部CSS文件;

3、内部文档头方式也叫内嵌法调用;

4、直接插入式也叫行内样式。

它们主要的差别在于它们规定的风格使用的范围不同:


  一、外部文件引用方式

  外部文件引用方式即将CSS写成一个文件,在HTML文档头通过文件引用来进行风格控制。

  也就是把写好的CSS属性的文件保存为文件扩展名为.CSS文件。

  CSS文件的引用是在HTML的标记之间写下列语句:

<link rel="stylesheet" href="CSS/test.CSS">

如当前文件目录下有一CSS 文件名为myStyle.css,内容如下:

    P{
         font-family:'宋体';
      font-size:9pt;
      color:blue;
    }
      H2{
          font-family:'宋体';
      font-size:13pt;
      color:red;
      }

 

  则在引用是,用下列语句:

<link rel="stylesheet" href="CSS/test.CSS">


    当然,你可以复制这句,然后改下引用文件的路径及文件名就可以了。

  应用CSS文件的一个最大好处就是,你可以在每个HTML文件中引用这个文件,从而可使整个站点的HMTL文件在风格上保持一致,避免重复的CSS属性设置;

  另外,当你遇上改版或作某些重大调整要对风格进行修改时,可直接修改这个CSS文件,

  当然了,HTML文件一直引用最近更新的样式单,而不必每个每个HTML文件进行修改,

  如果在建站之初没有网站风格的统一规划并形成CSS文件,以后内容一多,想调整一下风格会累死你的。


  二、使用@import引用外部CSS文件

   这种方式在文档头<heade></head>之间使用style标签引用外部css

 

    <Style Type="text/css">
      <!--
    @import url(myStyle.css);/*这里是通过@import引用CSS的样式内容*/
      -->
      </Style>

 

  三、内部文档头方式

  这种方式与外部文件方式区别在于这种方式是将风格直接定义在文档头<heade></head>之间,而不是形成文件。

  这种风格定义产生作用的范围也只局限于本文件,其格式如下(套用上边的CSS)

    <Style Type="text/css">
      <!--
      P{
          font-family:'宋体';
      font-size:9pt;
      color:blue
         }
      H2{
         font-family:'宋体';
      font-size:13pt;
      color:red;
      }
      -->
      </Style>

   这种方式的主要用处是,在一些方面统一风格的前提下,可针对具体页面进行具体调整。这两种方式并不相排斥,而是相互结合,

  比如在CSS文件中定义了P标志的字体大小font-size为10pt,而在内部文档中可定义P标志字体颜色font-color为Red;

  而在另一个HTML文件中定义颜色为Green,从这里,你也可能明白为什么风格样式单叫层叠式样单了。

  四、直接插入式

  直接插入式很简单,只是在每个HTML标记后书写CSS属性就可以了。

  这种方式很直接,如我们想规定一个Table标志中的字为红色,字体大小为10pt,则可书写如下:
  

<Table style="color:red;font-size:10pt" />

  这种方式主要用于对具体的标记做具体的调整,其作用的范围只限于本标记。

  综上所述,这几种方式各有用途,在统一整个站点风格上,用第一种方式在整个页面风格统一上,

  用第三种方式在页内某个标记的具体微调上,第三种方式也有用武之地,所以各有千秋吧!

  前三种的目的在于一是统一风格,二是减少繁琐的标记属性设置,真是功不可没哟!

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • css实现弹出框 css弹出菜单
    弹出框也是前端里面经常使用的一个应用场景了,最开始想到的是用js实现这个效果,看到codepen上面有用css实现的。其实就是用到了css里面的一个:target选择器+visibility属性。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标
    03-08
  • jfinal框架页面找不到相关css,js文件404
    在JFinalConfig中添加配置: @Overridepublic void configHandler(Handlers handlers) {handlers.add(new ContextPathHandler());}页面中添加:base href="${CONTEXT_PATH}/"/之前页面找不到资源,把tomcat工程路径去掉了(path=""),这样暂时解决了问题推荐
    03-08
  • 纯CSS3实现的一些酷炫效果 css实现炫酷背景
    纯CSS3实现的一些酷炫效果 css实现炫酷背景
      之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的。一、笑脸猫动画实现效果如下:这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整。1.先看下页面结构:bodydiv class="container"!-- 脸 --div
    03-08
  • 移动端CSS底部固定和fixed定位在ios上的bug
    fixed定位在ios上的bugcss三栏布局假设我们页面的 HTML 结构是这样: div class="wrapper"div class="content"!-- 页面主体内容区域 --/divdiv class="footer"!-- 需要做到 Sticky Footer 效果的页脚 --/div/div方法1.:absolute通过绝对定位处理应该是常见的
    03-08
  • css实现图片翻转 css使图片旋转
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/h
    03-08
  • css3 渐变gradient
    css3 渐变gradient
           CSS3引入了背景渐变、background-origin、background-clip、background-size、遮罩等多个属性。这里将记录我从网上和书上学习的笔记和心得体会。   首先是渐变,我这里讲述的渐变不仅仅是背景色的渐变还将包括透明度渐变。以前做这种背景色渐
    03-08
  • CSS3中的px,em,rem,vh,vw辨析 css3 vw
    1、px:像素,精确显示2、em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端          em换算工具:http://www.runoob.com/tags/ref-pxtoemconversion.html3、rem:与em类似,
    03-08
  • gulp自动化构建工具--自动编译less为css--学习
     1.安装      命令:npm install gulp-less 或者 cnpm install gulp-less2.编写文件 //获取gulpvar gulp = require('gulp')//获取gulp-less模块var less = require("gulp-less")//编译less//在命令行输入gulp less启动此任务gulp.task('less',function(){
    03-08
  • 关于动画Animate.css的使用方法
        首先贴个官网:https://daneden.github.io/animate.css/  1、引入animate css文件 1 head2 link rel="stylesheet" href="animate.min.css"3 /head   2、给指定的元素加上指定的动画样式名div class="animated bounceOutLeft"/div    这里包
    03-08
  • selenium Firefox禁用js,css.falsh,缓存,设置
    1 profile = FirefoxProfile() 2 #请求头 3 #profile.set_preference("general.useragent.override", util.http_agent_insert(xinhuaUtil.agent_path)) 4 # 激活手动代理配置(对应着在 profile(配置文件)中设置首选项) 5 profile.set_preference("network
    03-08
点击排行