牛腩发布系统--在HTML中引入CSS

    1、CSS简介

级联样式表(Cascading style Sheet)简称CSS,是一种用来表现HTML或XML等文件样式的计算机语言,也是能够真正做到网页表现与内容分离的一种样式设计语言。能够对网页中的对象的位置排版进行像素级的控制,是目前基于文本展示应用最为广泛的语言。

牛腩发布系统中,就应用了CSS对网页进行了排版和控制,接下来讲解一下CSS在HTML中的引入方式。

 2、引入方式

HTML与CSS时两个作用不同的语言,他们同时对一个网页产生作用,因此必须把两者挂接在一起,才能正常工作。在HTML中,引入CSS的方法主要有:行内式、内嵌式、导入式和链接式四种。

  1)行内式

行内式即在标记的style属性中设定CSS样式,这种方式仅对一个标题产生效果,这种方式本质上没有体现出CSS的优势,所以,在实践中应用较少。

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML引入CSS</title>
</head>
<body>
    <h1 style ="color :cadetblue ;background-color : gray ">
        行内式引入
    </h1>
</body>

以上代码为行内式,仅对这一个h1标题产生效果,将文字颜色设为蓝色,背景色设为灰色,效果如下:

    2)嵌入式

嵌入式将对页面中各种元素的设置集中在<head>和</head>之间,比较适用于单一的网页,对于多页面网站,内嵌式的引入就失去了CSS自身的优点。

上例中,如果希望页面中所有的h1标记都使用同一样式,就可以把样式移动到head部分,升级到内嵌式,代码如下:

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML引入CSS</title>
    <style type="text/css" >
        h1 {
            color: cadetblue;
            background-color: gray;
        }
    </style>
</head>
<body>
    <h1>内嵌式引入CSS</h1>
    <h1>对整页h1标题产生效果</h1>
</body>

效果如图:

3)导入式

导入式是将一个独立的CSS文件引入HTML文件中。相对于前两种引入方式使用更为广泛。但是,使用导入式时,整个页面装载完成后才会装载CSS文件,对于一些网页文件体积比较大的浏览器,会先显示出无样式的页面,然后才会显示设置样式后的页面。代码如下:

h1 {    /*mystyle.css*/
    color :cadetblue;background-color: gray
}
/*HTML文档中style部分改为*/
<style type ="text/css" >
    @import "mystyle.css"
</style>

      4)链接式

链接式与导入式一样是将一个独立的CSS文件引入HTML文件中。但在显示效果方面,会先载入CSS文件然后装载页面主体部分,所以页面从一开始显示就是带有样式效果的,在浏览者感受上来说,优于导入式。引入代码直接将导入式style部分删除,在head部分加入如下语句(也是牛腩中用的导入方法):

<link href="mystyle.css" rel="stylesheet" type="text/css" />

导入式和链接式两种引入方法,都是将独立的CSS文件导入。除了以上在显示效果方面有差别以外,是否容易维护方面也有差别。当有多个CSS文件时,如果使用链接式引入,就需要几个语句分别导入CSS 文件。如果要调整整CSS 文 件 的 分 类,就需要调整HTML文件,不利于维护。导入式则可以指引见一个总的CSS文件,再在文件中导入其他独立的CSS文件。使用何种引入方式,要视具体情况而定。

时间: 2024-10-23 15:59:47

牛腩发布系统--在HTML中引入CSS的相关文章

牛腩发布系统--HTTP 错误 403.14 - Forbidden

忘了是谁说的"至理名言",做牛腩发布系统,不怕出错误,就怕出跟牛老师不一样的错误!! 刚做就开始出现各种错误了,不过话说错误越多,收获越多.把每次困难都当做历练成长的机会.不多说,直接上图. 刚开始牛腩发布系统,由于IIS(Internet Information Service--互联网信息服务)没有配置好,才会发生以上问题,解决方案如下:  1.首先确定自己已经启用IIS服务器 启用办法:控制面板-->程序和功能-->启用或关闭Windows功能-->点击Inte

牛腩发布系统小试牛刀之HTTP错误403.14

在敲牛腩新闻发布系统的时候,在向类别新闻类写入姓名的时候出现了错误,下面先来看看我的代码: U层 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using DAL; namespace 牛腩新闻发布系统 { public partial class Web : Sys

HTML中引入CSS的方法

在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <style type="text/css"> ...此处写CSS样式 </

在html中引入css和js的方法

在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分通过link进行链接 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 其中href表示的是外部css文件的路径和名

在HTML中引入CSS的方式

有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件.   ㈠内联方式 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS.   ㈡嵌入方式 嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码.     ㈢链接方式 链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件.     ㈣导入方式 导入方式指的是使用 C

vue中引入css文件

两种方式引入css文件,一种是直接在main.js中引入,即下面这种写法: import 'element-ui/lib/theme-default/index.css' 这种写法适用于此css文件存在于项目中,不适用于通过网址访问的方式引入,会报错.偶试着引入Font Awesome,结果报错: import "http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 而直接在组件中引入却可

Spring MVC:在jsp中引入css

为了将css引入jsp中,今天可真是踩了好多坑,最后在stackoverflow上找到了解决方法,不多说贴出代码. 在web.xml中添加以下代码: <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.css</url-pattern> </servlet-mapping> spring-servlet.xml配置如下: <?xml vers

CSS系列:在HTML中引入CSS的方法

HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行内式即在标记的style属性中设定CSS样式,这种方式本质上没有体现CSS的优势,因此不推荐使用. 行内式示例: <div style="font-size:12px; text-align:center;">HTML中引用CSS的行内式方法</div> 2. 嵌入

如何在vue &amp;&amp; webpack 项目中的单文件组件中引入css

引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapState, mapMutations} from "vuex" import DetailItem from "@components/detail" require('../assets/css/swiper-3.4.1.min.css') export default {