CSS for Cascading Style Sheets a standard maintained by w3.org To format text, images, etc Often...
-
Upload
stella-grant -
Category
Documents
-
view
235 -
download
9
Transcript of 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 选择器、用户自定义的类、虚类等。
tag
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.
id
idBy ID
#id1 {…
}
id选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定
的样式。 id 选择器以“ # ” 开头来定义。#logo {
background-image: url(../images/logo.jpg);height: 50px;width: 120px;
}
class
用户自定义类为某个标记定义类
选择器 . 类名 { 属性 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>
<head><link >
</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