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

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中。

 

 

分享到:
评论

相关推荐

    HTML5 CSS3 chm中文参考手册_html5_CSS3_css3.chm_参考手册_

    压缩包中的"CSS3.0(飘零雾雨版).chm"很可能是针对CSS3的一个详细教程或参考文档,涵盖了CSS3的所有新特性、语法和实例。而"HTML5(W3CSchool版).chm"则可能包含W3School提供的HTML5学习资料,包括基本概念、元素...

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

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

    HTML 与 CSS3 各种文档

    综上所述,这个压缩包为学习者提供了全面的HTML4.01、XHTML1.0和CSS3的参考资料,无论是初学者还是经验丰富的开发者,都可以从中受益,提升对这两种语言的理解和应用能力。通过深入学习这些文档,可以掌握创建美观、...

    HTML5+CSS3中文参考手册(3手册).zip

    CSS3还引入了边框图像(Border Image)、渐变(Gradient)、阴影(Shadow)、动画(Animation)和过渡(Transition)等特性,使得网页设计更加生动。另外,CSS3的媒体查询(Media Queries)是实现响应式设计的关键,...

    html5+css3面试题答案.docx

    HTML5 和 CSS3 是当前 Web 开发中两个非常重要的技术,以下是关于 HTML5 和 CSS3 的一些常见面试题答案: 优雅降级和渐进增强 优雅降级(Gracious Degradation)和渐进增强(Progressive Enhancement)是两种不同...

    HTML5_CSS3_中文参考手册 【完整版】

    4. **Canvas绘图**:元素提供了一种在浏览器中动态绘制图形的方法,可以实现动画和复杂的交互式图像。 5. **SVG矢量图**:HTML5支持内嵌SVG(Scalable Vector Graphics)图形,可以创建高质量、可缩放的矢量图像。 ...

    HTML5+CSS3实例 :3D立方体旋转

    在本实例中,CSS3的transform属性被用于实现3D立方体的旋转效果,通过设置rotateX、rotateY和rotateZ来控制立方体的各个轴向转动。 实现3D立方体旋转需要用到的关键CSS3属性有: 1. `perspective`:定义观察者与3D...

    html5+css3+JS代码

    在本篇文章中,我们将深入探讨这三种技术的详细知识点,并结合《精通html5+css3+JavaScript页面设计》这本书中的实践代码进行说明。 首先,HTML5(超文本标记语言第五版)是描述网页内容的标准语言。它引入了许多新...

    html5+css3实现html5游戏页面

    总的来说,"html5+css3实现html5游戏页面"是一个结合了HTML5新特性和CSS3高级样式的实践案例,它展示了如何通过这两种技术构建一个功能齐全、视觉效果出色的手机游戏页面。对于想要学习HTML5游戏开发或者提升网页...

    html5+css3源代码

    这个"html5+css3源代码"压缩包中,你将能找到各种实际应用的代码示例,包括但不限于上述提到的HTML5新特性及CSS3的新功能。通过研究和实践这些例子,初学者能够快速掌握这两门技术的基本用法,并逐步进阶到更高级的...

    html5+css3实战 例子

    在实际应用中,HTML5和CSS3的结合可以创建出互动性强、视觉效果出众的网页,如拖放功能、地理定位、表单控件的增强等,都为用户带来了更为便捷和丰富的体验。通过学习和熟练掌握这两项技术,前端开发者能够构建出...

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

    3. **导入式**:导入式CSS通过CSS的`@import`规则引入外部CSS文件。例如: ```html &lt;style type="text/css"&gt; @import url("/content/base.css"); ``` 这种方式在HTML文档加载完成后才加载CSS,可能导致页面先...

    《从零开始学HTML5+CSS3》中文PDF及配套代码.rar

    2. 层叠上下文:理解CSS3中的层叠上下文(Cascading Order)对于解决样式冲突至关重要,它定义了样式规则的优先级。 3. 盒模型:CSS3盒模型包括标准盒模型和IE盒模型,理解两者差异有助于布局设计。 4. 颜色与渐变...

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

    本文将详细介绍四种在HTML中引入CSS的方法:行内式、内嵌式、导入式和链接式,并探讨它们的优缺点。 1. **行内式**: 行内式CSS是在HTML元素的`style`属性内直接定义样式。例如: ```html ;"&gt;这是一段红色的文字...

    HTML5+CSS3中文参考手册(3手册) chm版中文参考手册打包

    HTML5和CSS3是现代网页开发的基石,它们极大地扩展了网页的表现力和交互性。这份"HTML5+CSS3中文参考手册(3手册) chm版中文参考手册打包"包含两个重要的资源:HTML5和CSS3的中文电子书,为开发者提供了详细的技术...

    HTML5与CSS3基础教程 第八版 中文版 高清 PDF

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉效果出色的网页提供了强大的工具。《HTML5与CSS3基础教程 第八版 中文版》是一本全面介绍这两个技术的书籍,旨在帮助初学者快速入门,并提供给...

    html5+css3从入门到精通

    CSS3引入了模块化发展,包括选择器扩展(如nth-child、attribute selectors)、过渡(transitions)、动画(animations)、多列布局(multi-column layout)、Flexbox(弹性盒布局)和Grid(网格布局),使设计更加...

    HTML5 + CSS3 实现 3d 室内布局源码

    这个“HTML5 + CSS3 实现 3d 室内布局源码”项目是一个很好的实例,展示了如何利用这两种技术来构建具有三维效果的室内设计展示。 首先,HTML5是超文本标记语言的最新版本,它引入了许多新的元素和功能,旨在提高...

    CSS3+HTML5+从入门到精通-PDF中文教程

    《CSS3+HTML5+从入门到精通》是一本针对初学者和有一定基础的学习者编写的全面教程,旨在帮助读者掌握这两个现代Web开发的核心技术。HTML5和CSS3是构建现代网页和应用程序不可或缺的工具,它们带来了丰富的交互性和...

Global site tag (gtag.js) - Google Analytics