Css

Posted by HaoChen Blog on January 15, 2017

CSS 概述

不是CS+S,是 Cascading Style Sheets

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

总结:

类选择器有4种

  1. 派生选择器
  2. id选择器
  3. 类选择器
  4. 选择器

选择器的方法有3种

  1. 外联样式表
  2. 内部样式表
  3. 内联样式 优先级3最大

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠的优先级

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

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

**选择器的分组 **

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

继承及其问题

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作.

果你不希望 “Verdana, sans-serif”

字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

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;
     }

# CSS选择器

  • 派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁

  1. CSS 后代选择器

后代选择器（descendant selector）又称为包含选择器。

当然，您也可以在 h1 中找到的每个 em 元素上放一个 class 属性，但是显然，后代选择器的效率更高。

语法解释

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。 因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

  1. CSS 子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

  1. CSS 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 “#” 来定义。

#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

一个选择器，多种用法 即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

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

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

  • CSS 类选择器

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

    .center {text-align: center}

使用

    <h1 class="center">
This heading will be center-aligned
</h1>

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

和 id 一样，class 也可被用作派生选择器：

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

元素也可以基于它们的类而被选择：

td.fancy {
	color: #f60;
	background: #666;
	}
  • CSS 属性选择器

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择

<head>
<style type="text/css">
[title~=hello]
{
color:red;
} 
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />

<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>

CSS 选择器参考手册

选择器 描述

  • [attribute] 用于选取带有指定属性的元素。
  • [attribute=value] 用于选取带有指定属性和值的元素。
  • [attribute~=value] 用于选取属性值中包含指定词汇的元素。
  • [attribute =value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
  • [attribute^=value] 匹配属性值以指定值开头的每个元素。
  • [attribute$=value] 匹配属性值以指定值结尾的每个元素。
  • [attribute*=value] 匹配属性值中包含指定值的每个元素。

如何创建 CSS

外部样式表

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

内部样式表

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

内联样式

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

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 例如，外部样式表拥有针对 h3 选择器的三个属性：

CSS 背景

背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

背景图像

background-image 属性。

背景重复

background-repeat

 body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

背景定位

background-position

单一关键字 等价的关键字

  • center center center
  • top top center 或 center top
  • bottom bottom center 或 center bottom
  • right right center 或 center right
  • left left center 或 center left

百分数值

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。 比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。 您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

CSS 背景属性

属性 描述

  • background 简写属性，作用是将背景属性设置在一个声明中。
  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
  • background-color 设置元素的背景颜色。
  • background-image 把图像设置为背景。
  • background-position 设置背景图像的起始位置。
  • background-repeat 设置背景图像是否及如何重复。

CSS 文本

http://www.imooc.com/video/6162

FEATURED TAGS
2017
FRIENDS