当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
记得写引号
提示:如果值为若干单词,则要给值加引号:
p {font-family: "sans serif"
;}
多重声明:
提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:
p {text-align:center;
color:red;
}
你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:
p {
text-align: center;
color: black;
font-family: arial;
}
选择器的分组
你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6
{
color: green;
}
使用外部样式表:
每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:
<head>
<link
rel="stylesheet" type="text/css" href="mystyle.css
" />
</head>
不要在属性值与单位之间留有空格。假如你使用 “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>
分享到:
相关推荐
CSS笔记 CSS(Cascading Style Sheets),即层叠样式表,是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML,让HTML专注于结构呈现,而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
CSS 笔记 CSS(Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页,也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
HTML与CSS笔记 HTML(HyperText Markup Language,超文本标记语言)是构成网页内容的骨架,用于创建网页的结构,并通过不同的标签来描述网页的各个部分。CSS(Cascading Style Sheets,层叠样式表)则负责网页的...
这份"史上最经典的HTML+CSS笔记"无疑是学习这两门技术的重要参考资料。以下将根据标题、描述以及可能包含的子文件内容,对HTML和CSS的基础知识进行详细阐述。 HTML是网页内容的结构语言,用于定义网页的各个元素...
css笔记整理(精简) 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式,集合样式) CSS 框模型概述
**CSS笔记一** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义HTML或XML(包括SVG、MathML等各种XML方言)文档的呈现方式。本笔记将深入探讨CSS的基础知识,包括选择器、盒模型、...
总结,"黑马前端css笔记.zip"包含了CSS3的重要知识点,如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术(Flexbox和Grid)以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要,能帮助他们...
- **网站**:《Webstandards Solutions》、《网站重构》、《CSS禅意花园》、《点石成金》,都是优秀的在线资源,涵盖了从标准规范到设计美学的广泛内容。 - **名人与网站**:了解万维网的创始人Tim Berners-Lee,...
### HTML CSS 笔记知识点详解 #### 页面自动刷新 页面自动刷新是指网页可以在设定的时间间隔后自动重新加载,实现页面内容的更新。这种技术在早期的网页开发中较为常见,通常用于实现简单的内容轮播或者定时获取...
在网页设计中,`div+css`是一种常见的布局技术,用于实现网页的结构化和美化。`div`是HTML中的一个通用容器元素,用于组织和包裹其他HTML元素,而`css`则是层叠样式表,用来定义网页的样式、布局和视觉效果。`div+...
**CSS(层叠样式表)全面手册** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它用于定义HTML或XML(包括SVG、XHTML等)文档的呈现方式。通过使用CSS,我们可以控制网页元素的颜色、字体、...
- 外部 CSS:通过 `<link>` 标签引用一个外部的 CSS 文件,如 `<link href="my.css" type="text/css" rel="stylesheet"/>`,这种方式有利于样式复用和代码组织。 - 内部 CSS:将 CSS 代码写在 HTML 的 `<style>` ...
### CSS 笔记:滤镜、阴影与圆角 #### 一、CSS滤镜(Filter) 在Web开发过程中,为了使页面更加美观或者实现特定的视觉效果,开发者常常需要使用到CSS滤镜。CSS滤镜是一种可以对元素进行颜色或图像处理的效果工具。...
html和css基础总结,适合入门web和初学者
这份"naofantian HTML_CSS笔记"提供了作者naofantian在进行毕业设计时积累的知识点和经验分享。 首先,HTML(HyperText Markup Language)是用于创建网页内容的标记语言。它通过各种标签来定义网页的结构,如`...
这本“css笔记”是对CSS技术的深入理解和实践的总结,旨在帮助开发者巩固基础知识,提升技能水平。 **基本概念** 1. **选择器**:CSS通过选择器来定位HTML元素,如标签选择器(`p`)、类选择器(`.myClass`)、ID...
CSS笔记主要涵盖了如何定义和应用CSS样式,以及常见的样式属性。 **一、CSS引入方式** 1. 内联样式:在HTML元素的`style`属性中直接写CSS样式,例如`;">文本</p>`。 2. 内部样式表:将CSS写在HTML文档的`<head>`...
这个名为“CSS_Demo”的压缩包文件是与一篇名为《CSS笔记》的文章配套的代码示例,文章作者通过CSDN平台分享了关于CSS的学习心得和实践案例。这篇文章的链接是:...