css是甚么

2021-01-20 04:55 jianzhan

1 简述

  1.  CSS 指堆叠款式表 (Cascading Style Sheets)
  2. 款式界定怎样显示信息 HTML 元素
  3. 款式一般储存在款式表格中
  4. 把款式加上到 HTML 4.0 中,是以便处理內容与主要表现分离出来的难题
  5. 外界款式表能够巨大提升工作中高效率
  6.  外界款式表一般储存在 CSS 文档中
  7. 好几个款式界定可堆叠为1

2 堆叠顺序

当同1个 HTML 元素被不止1个款式界定时,会应用哪一个款式呢?

1般而言,全部的款式会依据下面的标准堆叠于1个新的虚似款式表格中,在其中数据 4 有着最高的优先选择权。

1.   访问器缺省设定

2.   外界款式表

3.   內部款式表(坐落于 <head> 标识內部)

4.   内联款式(在 HTML 元素內部)

3 CSS 基础英语的语法

CSS英语的语法由3一部分组成:挑选器、特性和值:

selector {property: value}

挑选器 (selector) 一般是你期待界定的 HTML 元素或标识,特性 (property) 是你期待更改的特性,而且每一个特性都有1个值(value)。特性和值被冒号分开,并由花括号包围着,这样就构成了1个详细的款式申明(declaration)。

 提醒:假如值为若干单词,则要给值加引号:

p {font-family: "sans serif";}

提醒:假如要界定不止1个申明,则必须用分号将每一个申明分开。下面的事例展现出怎样界定1个鲜红色文本的垂直居中段落。最终1条标准是不必须加分号的,可是再加分号是优良的习惯性:

p {text-align:center; color:red;}  

提醒:应当在每行只叙述1个特性,这样能够提高款式界定的可读性:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

提醒:是不是包括空格不容易危害 CSS 在访问器的工作中实际效果,可是能够提升可读性;与 XHTML 不一样,CSS 对尺寸写不比较敏感。但是存在1个列外:假如涉及到到与 HTML 文本文档1起工作中的话,class 和 id 名字对尺寸写是比较敏感的。

提醒:不必在特性值与企业之间留有时间格。倘若你应用 “margin-left: 20 px” 而并不是 “margin-left: 20px” ,它仅在 IE 6 中合理,可是在 Mozilla/Firefox 或 Netscape 中却没法一切正常工作中。

4 CSS 高級英语的语法

1. 挑选器排序

能够对挑选器开展排序,这样,被排序的挑选器便可以共享同样的申明。用逗号将必须排序的挑选器分开。在下面的事例中,大家对全部的题目元素开展了排序。全部的题目元素全是翠绿色的。

h1,h2,h2,h3,h5,h6 {
  color: green;
  }

2. 承继及其难题

依据 CSS,子元素从父元素承继特性。可是它其实不一直按此方法工作中。看看下面这条标准:

body {
     font-family: Verdana, sans-serif;
     }

依据上面这条标准,站点的 body 元素将应用 Verdana 字体样式(倘若浏览者的系统软件中存在该字体样式的话)。

根据 CSS 承继,子元素将承继最高级别元素(在本例中是 body)所有着的特性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不必须此外的标准,全部 body 的子元素都应当显示信息 Verdana 字体样式,子元素的子元素也1样。在绝大多数的当代访问器中,的确是这样的。可是在那个访问器对决的血腥时代里,这类状况就不一定会产生。比如说,Netscape 4 就不适用承继,它不但忽视承继,并且也忽视运用于 body 元素的标准。IE/Windows 直至 IE6 还存在有关的难题,在报表内的字体样式款式会被忽视。大家又该怎样是好呢?

 方法:

//:界定1个父元素设计风格,运用于总体
body  { 
     font-family: Verdana, sans-serif;
     }
//:选用组挑选器来防止一些访问器回绝承继
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
//:假如某子元素不肯承继设计风格,能够界定独特标准来解决父元素标准
p  {
     font-family: Times, "Times New Roman", serif;
     }

3. 派生挑选器

派生挑选器容许你依据文本文档的左右文关联来明确某个标识的款式。比如说,你期待目录中的 strong 元素变成斜体字,而并不是一般的粗体字,能够这样界定1个派生挑选器:

//:当<strong>元素坐落于<li>元素內部时,字体样式为italic,不然,字体样式为粗体
li strong {
    font-style: italic;
    font-weight: normal;
  }

事例:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

下面是它施加危害的 HTML:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

4. id挑选器

id 挑选器能够为标有特殊 id 的 HTML 元素特定特殊的款式。id 挑选器以 "#" 来界定。下面的两个 id 挑选器,第1个界定特性id=”red”的元素的色调为鲜红色,第2个界定id=”green”的元素的色调为翠绿色:

#red {color:red;}
#green {color:green;}

下面的 HTML 编码中,id 特性为 red 的 p 元素显示信息为鲜红色,而 id 特性为 green 的 p 元素显示信息为翠绿色。

<p id="red">这个段落是鲜红色。</p>
<p id="green">这个段落是翠绿色。</p>

留意:id 特性只能在每一个 HTML 文本文档中出現1次。

5. id挑选器+派生挑选器

在当代合理布局中,id 挑选器经常用于创建派生挑选器。

#sidebar p {
         font-style: italic;
         text-align: right;
         margin-top: 0.5em;
         }

上面的款式只会运用于出現在 id 是 sidebar 的元素内的段落。这个元素极可能是 div 或是报表模块,虽然它也将会是1个报表或别的块级元素。它乃至能够是1个内联元素,例如 <em></em> 或 <span></span>,但是这样的用法是是非非法的,由于不能以在内联元素 <span> 中嵌入 <p>。

6.类挑选器

类挑选器以1个点号(.)显示信息:

.center {text-align: center}

全部有着 center 类的 HTML 元素均为垂直居中。在下面的 HTML 编码中,h1 和 p 元素都有 center 类。这代表着二者都将遵循".center" 挑选器中的标准。

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

留意:类名的第1个标识符不可以应用数据!它没法在 Mozilla 或 Firefox 中起功效。

 1> 类挑选+派生挑选

.fancy td {
         color: #f60;
         background: #666;
         }

在上面这个事例中,类名为 fancy 的更大的元素內部的报表模块都会以灰色情况显示信息橙色文本。(名为 fancy 的更大的元素将会是1个报表或1个 div)

2>派生挑选+类挑选

td.fancy {
         color: #f60;
         background: #666;
         }

在上面的事例中,类名为 fancy 的报表模块将是带有灰色情况的橙色,而别的的元素不容易遭受危害。

5 CSS 怎样引进?

 插进款式表的方式有3种:

1. 外界款式表 当款式必须运用于许多网页页面时,外界款式表将是理想化的挑选。每一个网页页面应用 <link> 标识连接到款式表。<link> 标识在(文本文档的)头顶部:

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

2. 內部款式表 当单独文本文档必须独特的款式时,就应当应用內部款式表。你可使用 <style> 标识在文本文档头顶部界定內部款式表,就像这样:

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

 3. 内联款式 因为要将主要表现和內容掺杂在1起,内联款式会损害掉款式表的很多优点。请慎用这类方式,比如当款式仅必须在1个元素上运用1次时。

要应用内联款式,你必须在有关的标识内应用款式(style)特性。Style 特性能够包括任何 CSS 特性。本例展现怎样更改段落的色调和左外边距:

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

4. 多种款式 假如一些特性在不一样的款式表格中被一样的挑选器界定,那末特性值将从更实际的款式表格中被承继过来。