`

[CSS]CSS插入样式

CSS 
阅读更多

如何插入样式表

当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:

 

外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:

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

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

 

 

内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

 

内联样式

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

 

多重样式

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

例如,外部样式表拥有针对 h3 选择器的三个属性:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而内部样式表拥有针对 h3 选择器的两个属性:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

color: red; 
text-align: right; 
font-size: 20pt;

即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。

 

同一选择器,内联样式和内部样式表不能同时存在,只会有一个起作用.优先级是内联样式>内部样式表

分享到:
评论

相关推荐

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    CSS(层叠样式表)让网页设计者能够分离内容与表现,使得网页设计更加灵活且易于维护。本资源集合包含了“上百个CSS实例”,旨在帮助初学者快速掌握CSS的基础知识和应用技巧。 1. **CSS选择器**:CSS的选择器是定位...

    jsp页面中插入css样式的三种方法总结.docx

    jsp页面中插入css样式的三种方法总结 jsp页面中插入css样式的三种方法是开发中常见的需求,本文将对三种方法进行总结介绍,并对每种方法的使用场景和优缺点进行分析。 外部样式 外部样式表是将css代码写入到一个...

    css样式表中文手册

    **CSS(层叠样式表)**是Web前端开发中的核心技术之一,用于定义网页的布局、颜色、字体等视觉效果。CSS样式表手册是开发者学习和查阅CSS规则的重要参考资料,尤其对于中文用户,中文手册能更直观、准确地理解概念和...

    CSS文本框后插入背景

    为了提升用户体验和网页的整体美观度,我们可以利用CSS来对文本框进行美化,例如在文本框后插入背景图像或颜色。这不仅能够增加视觉吸引力,还可以与网页的整体设计风格保持一致,提升品牌识别度。 要实现CSS文本框...

    android TextView 支持CSS样式

    ### Android TextView 支持CSS样式详解 #### 一、引言 在Android开发过程中,为了增强界面的表现力和可维护性,开发者常常需要利用到HTML和CSS的技术来丰富`TextView`的内容展示。虽然原生的Android SDK并没有直接...

    CSS样式参考.rar

    4. **伪元素和伪类**:伪元素(如`::before`和`::after`)用于在元素内容前后插入内容,伪类(如`:hover`、`:active`、`:focus`)则在元素特定状态时应用样式。 5. **自适应图像和字体**:`img`元素的`srcset`属性...

    风格清新漂亮的CSS3开关按钮样式

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的样式控制和动画效果,极大地提升了用户体验。本文将深入探讨如何利用CSS3创建风格清新、漂亮的开关按钮样式,包括3D效果和扁平化设计。我们将通过分析...

    CSS样式案例集大全

    2. **伪类和伪元素**:`:hover`、`:active`、`:focus`等伪类用于元素在特定状态下的样式,`::before`和`::after`伪元素用于在元素前后插入内容。 3. **变量和预处理器**:CSS变量(CSS Custom Properties)允许...

    EasyUI很全的CSS样式文件与图标

    2. **使用图标**:通过 CSS 类名或者直接使用 SVG 代码来插入图标,类名通常与 EasyUI 的组件或功能对应。 3. **调整主题**:如果需要自定义主题,可以通过修改或覆写 CSS 样式实现,也可以利用 EasyUI 提供的主题...

    svg转css,css转svg,svg与css互相转换并压缩

    SVG是一种基于XML的矢量图像格式,能够提供高质量、可缩放的图形,而CSS则用于定义网页的样式和布局。在某些情况下,开发者可能需要将SVG转换为CSS,或者反过来,以便更好地管理和优化资源。同时,为了提高性能和...

    CSS样式表.doc

    2. **定义内部样式块**:在`&lt;head&gt;`部分插入`&lt;style&gt;`标签,直接编写CSS规则,例如: ```html &lt;style type="text/css"&gt; body {font-size: 16px;} h1 {color: blue;} ``` 3. **内联定义**:在HTML元素中...

    CSS 样式表查看手册

    **CSS(层叠样式表)**是网页设计中不可或缺的一部分,它用于定义页面的布局、颜色、字体等视觉样式。CSS让网页设计者能够将内容和表现分离,使得网页更加结构化,易于维护和更新。本手册《CSS样式表查看手册》是...

    css自定义文件上传按钮样式

    本文将深入探讨如何使用CSS来自定义文件上传按钮的样式。 首先,我们需要理解文件上传组件的基本结构。通常,HTML中的`&lt;input type="file"&gt;`元素用于创建一个文件选择器,但其默认样式非常朴素,不符合现代网页设计...

    CSS样式表高效使用的技巧

    在 HTML 中引入 CSS 的方式很多,例如直接插入式、使用链接外部样式表、使用"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。实际上,这些引入方式可以同时在一个网页中被调用,浏览器会按照...

    CSS样式表中文手册

    1. **伪类和伪元素**: 伪类如`:hover`和`:active`用于在特定状态改变元素样式,伪元素如`::before`和`::after`用于在元素前后插入内容。 2. **组合选择器**: 包括并集选择器(`h1, h2`)、后代选择器(`div p`)、子...

    HTML——CSS样式表教程

    3. **继承与优先级**:CSS中的样式具有继承性,子元素可以继承父元素的某些样式。优先级规则是:行内样式 &gt; 内部样式表 &gt; 外部样式表 &gt; 浏览器默认样式。 **二、选择器的种类** 1. **基本选择器**:包括标签选择器...

    css样式模板合集

    8. **伪类和伪元素**:如`:hover`、`:active`、`:focus`等伪类可以改变元素在特定状态下的样式,而`:before`和`:after`伪元素则可以在元素前后插入内容。 9. **浏览器兼容性**:考虑到不同浏览器对CSS的支持程度...

    CSS层叠样式表

    - **注释**:在CSS中,可以使用`/* comment */`插入注释,这对于维护和解释代码至关重要。 - **继承**:某些样式属性可以从父元素传递到子元素,这称为继承。例如,字体颜色和字体大小是常见的继承属性。 ##### 4. ...

Global site tag (gtag.js) - Google Analytics