`
qiannianhua
  • 浏览: 17954 次
社区版块
存档分类
最新评论

HTML中引入CSS的3种方法

 
阅读更多

      HTML与CSS是两种作用不同的语言,它们同时对一个网页产生作用,因此必须通过一些方法将CSS于HTML连接在一起,才能正常的工作。

    在HTML中,引入CSS的方法主要有以下3种:

1、内联属性(inline style attribute):在标记的style属性中设置CSS样式,但这种方法无法体现CSS的优势,因此不提倡使用;

<p style="border:2px; height:300px; width:250px; background-color:#00aaaa">
     文本内容
</p>

 

2、写在style标签里:将页面中的元素的属性设置写在<head>与</head>之间;

<head>
      <style type'text/css'>
            p{
                   border:2px;
                   height:300px;                   
                   width:250px; 
                   background-color:#00aaaa                   
              }
     </style>
</head>    
<p>文本内容</p>

       这种方法对于单一的网页是挺方便的,但是对于较多的页面的网站,如果对每一个页面都以内嵌的方式设置各自的样式,就会失去了css的优点了。

 

3、用link标签引用外部文件:就是将一个独立的css文件引入html文件中;

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

        这种方法适合用在一些较大的网站,便于维护,只需几个语句就可以分别导入css文件了,比较推广使用这种方法把css引入html中。

 

 

分享到:
评论

相关推荐

    HTML外部引用CSS文件不生效原因分析及解决办法

    作为一个前端小白,鼓捣了几...然后再我的html文件里面去引入这个外部css: XML/HTML Code复制内容到剪贴板 &lt;link rel=stylesheet type=text/css href=css/style.css&gt;  在浏览器一刷新。。哇,kao。竟然没

    在HTML中引入CSS的3种方式使用介绍

    在HTML中,引入CSS的方法主要有行内式、内嵌式、导入式和链接式行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用例: 复制代码代码如下: &lt;html&gt; &lt;head&gt;&...

    在网页中引用CSS 的方法

    1. CSS 的引入和基本选择器应用; 2. 利用CSS 对网页进行控制; 3. 利用W3school 网站进行CSS 的练习。 4. 用CSS 完成常见的几种网页布局形式的练习; 5. 使用Div+CSS,完成“实习二”中“index.htm”页面的布局; 6...

    HTML5+CSS3前端小案例——移动端购物支付页面

    内容涉及flex布局、公共样式公共类的挑选、多个大盒子与多个小盒子的嵌套(div&gt;li&gt;span、p&gt;span等)、多行内容的排版、字体图标的引入设置、图片的引入和设置、养成价格等后期需要加链接的元素单独成类。 包含内容:...

    28个纯css3 加载loading动画特效

    效果描述: css3应用范围越来越广,特别是在如今谷歌... 1、将head中的css样式以及js引入到你的网页中 2、选择一个你喜欢的loading效果,复制其中的html到你的网页中即可 (注意index.html底部的js别漏掉了)

    5种动画过渡效果的纯CSS3幻灯片特效

    CSS3-Slider是一款简单的带5种动画过渡效果的纯CSS3幻灯片特效。该幻灯片使用纯CSS3制作,使用非常简单,只需要按指定的格式编写HTML代码,并引入相应的CSS文件即可正常工作。

    HTML5&CSS3网页制作:引入CSS样式.pptx

    CSS核心基础--引入CSS样式;;引入CSS样式方式;引入CSS样式方式;引入CSS样式方式;;引入CSS样式 【内联方式】;引入CSS样式 【内联方式】;引入CSS样式 【链接方式】;引入CSS样式 【链接方式】;引入CSS样式 【嵌入方式】;...

    HTML5&CSS3网页制作:CSS控制视频的宽高.pptx

    在HTML5中,经常会通过为video元素添加宽高的方式给视频预留一定的空间,这样浏览器在加载页面时就会预先确定视频的尺寸,为其保留合适的空间,使页面的布局不产生变化。 通过元素自身属性控制 例:加载一个视频并...

    前端css+html+布局笔记

    将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入 &lt;link rel="stylesheet" type="text/css" href="文件的路径"/&gt; 将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现...

    基于HTML5+CSS+JS饿了么实战项目

    基于HTML5+CSS+JS饿了么实战项目,共11个页面 1. 运行 “饿了么前端网页项目” ,演示页面效果。 2. 本项目参照 “饿了么官网网页版”制作,演示饿了么官网效果。饿了么网页版:http://h5.ele.me/ 3. 本项目中的首页...

    Springboot访问templates下的html页面,CSS,JS失效

    Springboot访问templates下的html页面,CSS,JS失效。 此模板适用于PC和移动端

    html+js+css车牌号输入法

    html+js+css车牌号输入法,不需要添加太多代码,直接引入css和js就可以使用

    ie6实现css3属性

    通过引入htc文件,使ie可以支持css3的属性

    举例说明在html中引入css的方法.pdf

    ...

    举例说明在html中引入css的方法.docx

    ...

    css3点击动画效果

    简单有效的css3动画效果,当然,其中还引入了多个js插件 使用方法: 1、将lanren.css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可 (注意保持文件路径正确)

    纯CSS3伪类实现icon标签效果

    并且没有使用任何图片之类的东东,主要依靠CSS3代码中的::before ::after两个伪类 以前我还是比较忽视这两个家伙的,今天第一次见到原来伪类的好处这么多,以后会多多推荐CSS3伪类实现的效果 使用方法: 1...

    初窥HTML&CSS.md

    html 与 css 的学习笔记,简单的说明了 html 和 css 的用法,适合快速入门。文件为 markdown 文件,建议使用 typora

Global site tag (gtag.js) - Google Analytics