css for cascading style sheets a standard maintained by w3.org to format text, images, etc often...

CSSfor Cascading Style Sheetsa standard maintained by w3.orgTo format text, images, etcOften used with html, and, sometimes xml

CSS level 1The first CSS specification to become an official

W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for:Font properties such as typeface and emphasisColor of text, backgrounds, and other elementsText attributes such as spacing between words,

letters, and lines of textAlignment of text, images, tables and other elementsMargin, border, padding, and positioning for most

elementsUnique identification and generic classification of

groups of attributesThe W3C maintains the CSS1

Recommendation.

CSS level 2published as a Recommendation in May 1998. includes a number of new capabilities

absolute, relative, and fixed positioning of elementsthe concept of media typesbidirectional textnew font properties such as shadows

The W3C maintains the CSS2 Recommendation.

CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2returned to Candidate Recommendation status on

19 July 2007

Example

{Why to use Styles?Documents written with CSS are

more flexibleshortclear

Basic formating toolEasy multiple document managmentSave time by using selector classesNew opportunities in formating

ContentsProperty/Value inline

SyntaxProperties

Values Color Length

Box Model width

Selector in <style>Link @import

example

inline

used the style attribute of a tag

<p style=“ ”></p>

内联样式当样式仅需要在一个元素上应用一次时，可以使用内

联样式。由于内联样式要将表现和内容混杂在一起，会损失掉样式表的许多优势，所有不建议大量使用内联样式。

要使用内联样式，你需要在相关的标签内使用样式（ style ）属性。 style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：<p style="color: sienna; margin-left: 20px">

This is a paragraph</p>

To Format

属性字体类

字体类型（ font-family ）、字体大小（ font-size ）、字体粗细（ font-weight ）。

文本类文本对齐方式（ text-align ）、行高（ line-height ）、文

本装饰（ text-decoration ）等。边框类

内边距（ padding ）、边框（ border ）、外边距（ margin ）。

背景类包括背景颜色 (background-color) 和背景图片

(background-image) 。

Fonts

body { font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; font-size: x-large;}

Most Favourite Least Favourite

Fallback fonts: serif, sans-serif, monospace, cursive and fantasy.

Font Factors

font-size: xx-small x-small small medium large x-large xx-large

font-weight: bold or normal

font-style: normal or italic text-decoration: none, underline, overline, or line-through

边框属性举例#box { width: 70px; margin: 10px; padding: 5px;}

margin:10px

Padding:5px

width:70px

10px 5px 70px 5px 10px

100px

Box ModelEvery element on a page is a rectangular box

The sizing, positioning, and behavior of these boxes is controlled by CSS

.box {margin: 0 0 0 0;padding: 0 0 0 0;border: 1px solid black;height: 100%;width: 100%;

}

“width” and Block ElementsCan have different values

auto: means "expand to the inner width of my parent”

100%: means "expand to the same width as the first ancestor with position: relative”

Length (px, em, etc.): set a fixed width %: set a width relative to width of parent box

http://www.johnryding.com/pres/width.html

“display” RuleDetermines how a page element is renderedHas three properties

block: takes up the full available width and forces a new line before and after itself

inline: the width of its content, and does not insert new lines

None: hides the element completely<div>and <p> are block elements by

default“width: auto;” by default

<a> and <span> are inline elements by default

background-imagebackground-image: url('Images/back.jpg‘)

BackgroundsCSS allows more control over background than

HTML attributes <STYLE TYPE = "text/css">

BODY { background-image: url(watermark.gif); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed } P { font-size: 2em; color: #AA5588; text-indent: 1em; font-family: Arial, sans-serif } .dark { font-weight: bold }</STYLE>

Backgroundsbackground-image property specifies the URL

of the image to usecan also specify background-color in case the

image is not foundbackground-position property positions image

on pagebackground repeat property controls tiling no

repeat, repeat, x-repeat or y-repeat

BackgroundsBackground-attachment: fixed fixes the

image in the position specified by background-positionscrolling the browser window will not move

the image - default scroll moves the imagetext-indent: 1em indents the first line of

text.dark {font-weight: bold}

font weight specifies the boldness - bold, normal, bolder, lighter

<HEAD><TITLE>Box Dimensions</TITLE><STYLE TYPE = "text/css"> DIV { background-color: #FFCCFF; margin-bottom: .5em }</STYLE></HEAD><BODY><DIV STYLE = "width: 20%">Here is sometext that goes in a box which isset to stretch across twenty precent of the width of the screen.</DIV>

<DIV STYLE = "width: 80%; text-align: center">Here is some CENTERED text that goes in a box which is set to stretch across eighty precent of the width of the screen.</DIV>

<DIV STYLE = "width: 20%; height: 30%; overflow: scroll">This box is only twenty percent ofthe width and thirty percent of the height.What do we do if it overflows? Set theoverflow property to scroll!</DIV></BODY>

Notes

<DIV STYLE = "width: 20%; height: 30%; overflow: scroll">width is 20% and height 30% the overflow may

exceed the boundaries so the overflow property is set to scroll

PositioningSpecifying an element’s position removes it

from the normal flow of elements on the page

Positions the element according to distance from top, left, right or bottom margins of its parent element

I.gif is 0 pixels from top and left margins of the BODY element

z-index attribute allows layering of overlapping elements (1 back - 2 front)

Absolute positioningWhere does the H1 element go.Layer 3 in front of both

<BODY>

<IMG SRC = "i.gif" STYLE = "position: absolute; top: 0px; left: 0px; z-index: 1"><H1 STYLE = "position: absolute; top: 50px; left: 50px; z-index: 3">Positioned Text</H1><IMG SRC = "circle.gif" STYLE = "position: absolute; top: 25px; left: 100px; z-index: 2">

</BODY>

Relative positioningSetting the position property to relative will

first lay out the element on the page, then offset the element by the specified top, bottom, left or right values

Relative positioning keeps elements in the general flow of elements on the page

<HEAD><STYLE TYPE = "text/css"> P { font-size: 2em; font-family: Verdana, Arial, sans-serif} SPAN { color: red; font-size: .6em; height: 1em } .super { position: relative; top: -1ex } .sub { position: relative; bottom: -1ex } .shiftl { position: relative; left: -1ex } .shiftr { position: relative; right: -1ex }</STYLE></HEAD>

<BODY>

<P> Text text text text <SPAN CLASS = "super">superscript</SPAN>text text text text <SPAN CLASS = "sub">subscript</SPAN>text Text text <SPAN CLASS = "shiftl">left-shifted</SPAN> text text text <SPAN CLASS = "shiftr">right-shifted</SPAN>Text text text text text </P>

</BODY></HTML>

Text FlowElements normally appear in the order that

they do in HTML sourceFloating allows movement of an element to

one side of the screenOther content will flow around the floated

elementAlso each block-level element has a box

drawn around it - box model - adjustable properties

<HEAD><TITLE>Flowing Text Around Floating Elements</TITLE><STYLE TYPE = "text/css"> DIV { background-color: #FFCCFF; margin-bottom: .5em; font-size: 1.5em; width: 50% }</STYLE></HEAD><BODY><DIV STYLE = "text-align: center">Centered text</DIV><DIV STYLE = "text-align: right">Right-aligned text</DIV><DIV STYLE = "float: right; margin: .5em">This is some floatedtext, floated text, floated text, floated text.</DIV>

<P>Here is some flowing text, flowing text, flowing text.Here is some flowing text, flowing text, flowing text.Here is some flowing text, flowing text, flowing text.Here is some flowing text, flowing text, flowing text.Here is some flowing text, flowing text, flowing text.Here is some flowing text, flowing text, flowing text.Here is some flowing text, flowing text, flowing text.Here is some flowing text, flowing text, flowing text.</P><P><DIV STYLE ="float: right; padding: .5em">This is some floatedtext, floated text, floated text, floated text.</DIV>Here is some flowing text, flowing text, flowing text.Here is some flowing text, flowing text, flowing text.Here is some flowing text, flowing text, flowing text.<SPAN STYLE = "clear: right">Here is some unflowing text.Here is some unflowing text.</SPAN></P></BODY></HTML>

.5em margin

.5em padding

<HEAD><STYLE TYPE = "text/css"> BODY { background-color: #CCFFCC } DIV { text-align: center; margin-bottom: 1em; padding: .5em } .thick { border-width: thick } .medium { border-width: medium } .thin { border-width: thin } .groove { border-style: groove } .inset { border-style: inset } .outset { border-style: outset } .red { border-color: red } .blue { border-color: blue }</STYLE></HEAD>

<BODY>

<DIV CLASS = "thick groove">This text has a border</DIV><DIV CLASS = "medium groove">This text has a border</DIV><DIV CLASS = "thin groove">This text has a border</DIV>

<P CLASS = "thin red inset">A thin red line...</P><P CLASS = "medium blue outset">And a thicker blue line</P>

</BODY></HTML>

filter

View Sortilege.html? Hot to get the effect of transparent?

filter:alpha(opacity=70);

Length measurementsPx - pixel - relative - screen resolutionem - the size of the font - relativeex - x height of the fontin - inches - absolutept - 1 pt = 1/72 inpc - 1 pc = 12pt

Colors by the number...

#e2edffThree Numbers, Red, Green , and Blue - each from 00 - FF (Hexidecimal)

#ffffff = white#000000 = black#ff0000 = red#00ff00 = green#0000ff = blue

Source: http://www.w3schools.com/css/css_colornames.asp

Web-safecolors

#edf= #eeddff

CSS ValidationYou can validate your CSS to make sure it

has no syntax errorsBrowsers will generally quietly ignore bad

CSS syntaxhttp://jigsaw.w3.org/css-validatorThe validator can save you time

and sanity

Source: W3C http://validator.w3.org/check

Exampleselector

Property/value

CSS formatCSS does formatting by

setting values to properties, e.g.

Color : red;Text-indent:2em;

Note the : between property and valueand the ; between pairs of property/value

内部样式表当单个文档需要特殊的样式时，就应该使用内部样式

表。你可以使用 <style> 标签在文档头部定义内部样式表，格式如下 :<head><style type="text/css"> background-image:

url(../image1/back.jpg);</style></head>

How to combine css and html<head>

<style></style>

</head>

Where to apply to the target

选择器可以使用基本的 HTML 标记，派生选择器、id 选择器、用户自定义的类、虚类等。

tagBy Tag

p{

}

一个简单的例子body {

color: red; background-image: url(../images/back.jpg);

}上面这行代码的作用是将 body 元素内的文字颜色定

义为红色，并且指定上级 images 目录下的back.jpg 为 body 的背景图片。在上述例子中， body 是选择器，而包括在花括号内的部分是声明。 color 和 background-image 为属性， red 和url(../images/back.jpg) 为值。

HTML标记选择器HTML 标记是最典型的选择器类型，可以为某个或某

些 HTML 标记应用样式，如网页中超级链接标记<a> 的样式定义。a {font-size: 12px;text-decoration: none;}

网页中只要出现 <a> 标记的内容字体大小都是12px ，并且没有下划线修饰。

Multi tags H1,H2,H3{ text-

align:center }h1,h2,p

{color:green;}

一个例子li strong { font-style: italic; font-weight: normal; }

应用举例：<p><strong> 粗体字，不是斜体字，因为不在列表当中，所

以这个规则不起作用</strong></p><ol><li><strong> 斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

<li> 正常的字体。 </li></ol>

#header li a.selected { color: black; text-decoration: none;}

<div id="header"> <h1><a href="index.htm">AppEngineLearn</a></h1> <ul> <li><a href="sites.htm" class="selected">Sites</a></li> <li><a href="topics.htm" >Topics</a></li> </ul> </div>

<div id="header"> <h1><a href="index.htm">AppEngineLearn</a></h1> <ul> <li><a href="sites.htm">Sites</a></li> <li><a href="topics.htm" class="selected">Topics</a></li> </ul> </div>

Selectors CSS: ul > li {}

HTML: <ul><li></li><li>

<ol> <li> </li> <ol> <!– Won’t affect these tags --></li>

</ul>

CSS: ul li *{}HTML: <ul>

<li></li><li>

<ul> <li> </li> <ul> <!– Will affect these tags --></li>

</ul> “ul > li” is faster to render than “ul li”

* {}*

All elements

div * pThis selector uses the universal selector (*) to

match all paragraphs that are grandchildren or greater of div elements.

idBy ID

#id1 {…

}

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

的样式。 id 选择器以“ # ” 开头来定义。#logo {

background-image: url(../images/logo.jpg);height: 50px;width: 120px;

}

用户自定义类为某个标记定义类

选择器 . 类名 { 属性 1: 属性值 1; 属性 2: 属性值 2;……}使用标记类的方法是在相应的标记中，通过增加 class属性引用所定义的类，语法格式如下：< 标记名称 class= " 类名 "></ 标记名称 >

为所有的标记定义通用类定义通用类的语法格式如下：

. 类名 { 属性 1: 属性值 1; 属性 2: 属性值 2;……}使用通用类的方法是，在所有的标记中，都可以通过添加

class 属性引用所定义的类，语法格式如下：< 标记名称 class = " 类名 "></ 标记名称 >

By class.class1{}

.marked p{color:white;}

一个例子

.labelDateTime {font-size: 12px;line-height: 150%;color: #448B49;text-decoration: none;}input.large {

width: 200px;}input.small {

width: 50px;}

<td width="144" class="labelDateTime"> 今天是 2009 年 12月 10 日 </td><input type="text" id="txtUserName" name="txtUserName" class=" small " /><input type="text" id="txtPwd" name=" txtPwd " class=" small " />

Id and class

p.class1{}

Virtual Class

虚类对于 <a> 标记，可以使用虚类的方式设置不同类型的链接的显示方式。

共有 3 种不同类型的链接，分别是未访问过的、已访问过的和当前选中的这 3 种类型。

未访问过的使用 a:link 或 :link已访问过的使用 a:visited 或 :visited当前选中的使用 a:active 或 :active

a:link{font-size:12px;line-height:180%;color:#666;text-decoration:

underline;}a:hover {font-size:12px;line-height:180%;color:#4E8D22;text-decoration:

none;}a:hover {font-size: 14px;color: #fff;font-weight: bold;text-decoration:

underline;}

Pseudo classa:visited {color:#00FF00;} /* visited link */

a:link {color:#FF0000;} /* unvisited link */ a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Pseudo classa.red:visited {color:#FF0000;}

p:first-child{color:blue;}

p > i:first-child{font-weight:bold;}

p:first-child i{color:blue;}

The :lang pseudo-class allows you to define special rules for different languages.

Note: IE8 supports the :lang pseudo-class only if a <!DOCTYPE> is specified.

In the example , the :lang class defines the quotation marks for q elements with lang="no":

q:lang(no) {quotes: "~" "~";}

property

如果不希望给元素指定 class 和 id 的话可以考虑用元素 + 相应的属性进行选择如：a[href="http://www.newsmth.net"] {}表示所有有 href="http://www.newsmth.net" 属性

的 a 元素这里属性与属性的值要严格对应属性与属性值的关系还有

attr^="value" 表示以 value 开头attr$="value" 表示以 value 结尾attr*="value" 表示属性中包含 value

Comment

Comment/**/

Among selectorsAmong property/value pairs

+(HTML,CSS)

外部样式表当样式需要应用于很多页面时，外部样式表将是理想

的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link> 标签链接到样式表。 <link> 标签在（文档的）头部：<head>

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

</head>

In css or in <style/>@import url(“*.css”);

引用 CSS级联样式表中，“级联”的意义是全局样式规则一直

应用于 HTML 元素，直到由局部样式规则取代为止。在局部样式应用之后，全局样式规则与局部样式规则不冲突的部分将继续发挥作用。

在 HTML 页面中使用样式表的方法有外部样式表、内部样式表和内嵌样式三种方式，三种方式的优先级依次由低到高。

Container

<div> <p>This is a paragraph inside a div.</p> <p>So is this.</p></div>

<div id="header"> <ul> <li><a href="sites.htm">Sites</a></li> <li><a href="topics.htm" >Topics</a></li> </ul></div>

“div” stands for “division” as it allows us to divide our page into parts or sections and then do something different with each “section”.

The id attribute on the tag allows us to uniquely mark a div in a document. The id tag is also useful for screen readers.

!important Declaring a shorthand property (e.g., 'background') to be "!important" is

equivalent to declaring all of its sub-properties to be "!important". The first rule in the user‘s style sheet in the following example contains an “!

important” declaration, which overrides the corresponding declaration in the author’s style sheet. The second declaration will also win due to being marked “!important”. However, the third rule in the user‘s style sheet is not “!important” and will therefore lose to the second rule in the author’s style sheet (which happens to set style on a shorthand property). Also, the third author rule will lose to the second author rule since the second rule is “!important”. This shows that “!important” declarations have a function also within author style sheets.

/* From the user's style sheet */ p { text-indent: 1em ! important } p { font-style: italic ! important } p { font-size: 18pt } /* From the author's style sheet */ p { text-indent: 1.5em !important } p { font: normal 12pt sans-serif !important } p { font-size: 24pt }

Specificity<H1>All Web pages should use <EM>CSS</EM></H1>

In this case the child element has a rule of its own and this rule is in conflict with the rule of the parent

The rule of the child is more specific and overrides the style set for <H1>

Summary CSS Layout is its own art and science CSS Basics are well established and well supported in

all modern browsers The box model is pretty straightforward - and allows

nice design within the standards with reasonable effort levels.

Site layout and markup is further evolving - mostly to make it increasingly possible to support desktop like experiences on the web.

These innovations will naturally cause incompatibilities - which make things interesting and frustrating at times.

{CSS LimitationsSome noted disadvantages of using "pure"

CSS includeInconsistent browser support Absence of expressions Lack of Variables Lack of multiple backgrounds per element Control of Element Shapes

CSS语法CSS 语法由三部分构成：选择器、属性和值，语法

格式如下：selector {property: value; property: value }

选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值 (value) 。

属性和值被冒号分开，这样就组成了一个完整的样式声明（ declaration ）。多个声明之间用分号隔开，最后一个声明后不需要添加分号。

CSS outside HTMLXMLword

Thanks!

For further reading and learningW3schools.comW3school.com.cnW3.org

Css standardWikipedia.orgNilnul.com

javaScript+CSS<input type="button“ value="ChangeColor"

onclick="javaScript:changeColor()" /><script type="text/javascript"> function changeColor() { document.body.style.backgroundColor =

"red";//note the difference from background-color in css

}</script>

Useful linkshttp://www.w3schools.com/css/

Learn CSShttp://validator.w3.org/

Check Your CSS syntaxhttp://www.csszengarden.com/

The beauty of CSS DesignOne HTML file210 CSS