CSS学习总结1

一.CSS 概述

 

把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

 

 

所有的主流浏览器均支持层叠样式表。

 

样式表极大地提高了工作效率。允许同时控制多重页面的样式和布局。

 

多重样式将层叠为一个。 即可同名的样式表,最后会按照优先顺序,只有最优先的起作用。

     样式的优先规则从大到小排列按下面进行排列,数字越大,优先度越高。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

css对大小写不敏感。

 

二.CSS 语法

selector {declaration1; declaration2; ... declarationN }

 

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

 

declaration1:  property: value

 

 

 

 

颜色属性值的3种写法:

1. 除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:

p { color: #ff0000; }

2. 为了节约字节,我们可以使用 CSS 的缩写形式:

p { color: #f00; }

3. 我们还可以通过两种方法使用 RGB 值:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
选择器的分组

被分组的选择器就可以分享相同的声明

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

 

通常来说,CSS是支持继承的,即子元素会直接继承父元素的属性。

例如:

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

body所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。

但Netscape 4 和IE6都对继承属性支持的不好。

 

当不想子元素继承父元素时,只需为子元素声明一个式样即可。

 

派生选择器(上下文选择器,后代选择器)

li strong {
    font-style: italic;
    font-weight: normal;
  }

请注意标记为 <strong> 的蓝色代码的上下文关系:

<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

在上面的例子中,只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或 id,代码更加简洁。同时,两个元素之间的层次间隔可以是无限的。

ul em {color:red;}

 

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

子元素选择器

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的 strong 元素变为红色,但是第二个 strong 不受影响:

<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

 

相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器

 

id 选择器

id 选择器以 "#" 来定义

 

 

在现代布局中,id 选择器常常用于建立派生选择器。 
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

id选择器经常与派生选择器一块使用

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

 

 

类选择器

在 CSS 中,类选择器以一个点号显示:

 

.center {text-align: center}

 

 

我们假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作:

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

 

 

 

通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。

 

属性选择器

[title]
{
color:red;
}

IE6还不支持属性选择器

 

如何插入样式表

 

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

 

<head>
<link rel="stylesheet" type="text/css" href="mystyle.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>

 

 

 

 

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

下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
3.内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章