`
zqc_0101
  • 浏览: 229758 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

CSS笔记

    博客分类:
  • html
 
阅读更多

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 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笔记(1).pdf

    CSS笔记 CSS(Cascading Style Sheets),即层叠样式表,是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML,让HTML专注于结构呈现,而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...

    狂神说视频-CSS笔记.pdf

    CSS 笔记 CSS(Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页,也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...

    HTMLCSS笔记.pdf

    HTML与CSS笔记 HTML(HyperText Markup Language,超文本标记语言)是构成网页内容的骨架,用于创建网页的结构,并通过不同的标签来描述网页的各个部分。CSS(Cascading Style Sheets,层叠样式表)则负责网页的...

    史上最经典的HTML+CSS笔记.rar

    这份"史上最经典的HTML+CSS笔记"无疑是学习这两门技术的重要参考资料。以下将根据标题、描述以及可能包含的子文件内容,对HTML和CSS的基础知识进行详细阐述。 HTML是网页内容的结构语言,用于定义网页的各个元素...

    css笔记整理_1.pdf

    css笔记整理(精简) 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式,集合样式) CSS 框模型概述

    CSS笔记一

    **CSS笔记一** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义HTML或XML(包括SVG、MathML等各种XML方言)文档的呈现方式。本笔记将深入探讨CSS的基础知识,包括选择器、盒模型、...

    黑马前端css笔记.zip

    总结,"黑马前端css笔记.zip"包含了CSS3的重要知识点,如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术(Flexbox和Grid)以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要,能帮助他们...

    html和css笔记

    - **网站**:《Webstandards Solutions》、《网站重构》、《CSS禅意花园》、《点石成金》,都是优秀的在线资源,涵盖了从标准规范到设计美学的广泛内容。 - **名人与网站**:了解万维网的创始人Tim Berners-Lee,...

    html css笔记

    ### HTML CSS 笔记知识点详解 #### 页面自动刷新 页面自动刷新是指网页可以在设定的时间间隔后自动重新加载,实现页面内容的更新。这种技术在早期的网页开发中较为常见,通常用于实现简单的内容轮播或者定时获取...

    韩顺平div+css笔记完整

    在网页设计中,`div+css`是一种常见的布局技术,用于实现网页的结构化和美化。`div`是HTML中的一个通用容器元素,用于组织和包裹其他HTML元素,而`css`则是层叠样式表,用来定义网页的样式、布局和视觉效果。`div+...

    CSS笔记全面手册

    **CSS(层叠样式表)全面手册** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它用于定义HTML或XML(包括SVG、XHTML等)文档的呈现方式。通过使用CSS,我们可以控制网页元素的颜色、字体、...

    韩顺平div css笔记.doc

    - 外部 CSS:通过 `&lt;link&gt;` 标签引用一个外部的 CSS 文件,如 `&lt;link href="my.css" type="text/css" rel="stylesheet"/&gt;`,这种方式有利于样式复用和代码组织。 - 内部 CSS:将 CSS 代码写在 HTML 的 `&lt;style&gt;` ...

    css 笔记 包括 滤镜 阴影 圆角

    ### CSS 笔记:滤镜、阴影与圆角 #### 一、CSS滤镜(Filter) 在Web开发过程中,为了使页面更加美观或者实现特定的视觉效果,开发者常常需要使用到CSS滤镜。CSS滤镜是一种可以对元素进行颜色或图像处理的效果工具。...

    html+css笔记.md

    html和css基础总结,适合入门web和初学者

    naofantian HTML_CSS笔记

    这份"naofantian HTML_CSS笔记"提供了作者naofantian在进行毕业设计时积累的知识点和经验分享。 首先,HTML(HyperText Markup Language)是用于创建网页内容的标记语言。它通过各种标签来定义网页的结构,如`...

    css笔记

    这本“css笔记”是对CSS技术的深入理解和实践的总结,旨在帮助开发者巩固基础知识,提升技能水平。 **基本概念** 1. **选择器**:CSS通过选择器来定位HTML元素,如标签选择器(`p`)、类选择器(`.myClass`)、ID...

    精品专题(2021-2022年收藏)css笔记Css笔记.doc

    CSS笔记主要涵盖了如何定义和应用CSS样式,以及常见的样式属性。 **一、CSS引入方式** 1. 内联样式:在HTML元素的`style`属性中直接写CSS样式,例如`;"&gt;文本&lt;/p&gt;`。 2. 内部样式表:将CSS写在HTML文档的`&lt;head&gt;`...

    CSS_Demo,文章《CSS笔记》配套代码

    这个名为“CSS_Demo”的压缩包文件是与一篇名为《CSS笔记》的文章配套的代码示例,文章作者通过CSDN平台分享了关于CSS的学习心得和实践案例。这篇文章的链接是:...

Global site tag (gtag.js) - Google Analytics