Embed Size (px)
Citation preview
Chapter 3 Chapter 3 CSSCSS
VacabularyVacabulary
CSS: CSS: 层叠样式表层叠样式表SyntaxSyntax: : 语法语法Selector: Selector: 选择器选择器filterfilter ：滤镜：滤镜 //过滤器过滤器background: background: 背景背景property:property: 属性属性
OutlineOutline1.1. What is CSS? What is CSS?
2.2. A Brief History of CSSA Brief History of CSS
3.3. Why to use Styles?Why to use Styles?
4.4. Syntax Syntax
5.5. Cascading OrderCascading Order
6.6. ExamplesExamples of of PropertiesProperties
7.7. LLimitationsimitations
8.8. CSS variationsCSS variations
What is CSS? What is CSS? CSSCSS stands for stands for CCascading ascading SStyle tyle SSheetsheets
Styles define Styles define how to displayhow to display (X)(X)HTML elemeHTML elementsnts
Styles are normally stored in Styles are normally stored in Style SheetsStyle Sheets
Multiple style definitions will Multiple style definitions will cascadecascade into one into one
A Brief History of CSSA Brief History of CSSStyle sheets have existed since the beginnings Style sheets have existed since the beginnings of SGML in the 1970sof SGML in the 1970s
As HTML grew, it came to encompass a wider As HTML grew, it came to encompass a wider variety of stylistic capabilitiesvariety of stylistic capabilities
NNine different style sheet languages were propine different style sheet languages were proposed to the W3Cosed to the W3C
TTwo were chosen as the foundation forwo were chosen as the foundation for CSS: CSS: CCHSS and HSS and Stream-based Style Sheet ProposalStream-based Style Sheet Proposal
CSS level 1 – 1996; CSS level 2 – 1997CSS level 1 – 1996; CSS level 2 – 1997
DifficultDifficultiesies with adoption with adoption
Why to use Styles?Why to use Styles?Documents written with CSS are Documents written with CSS are – more flexiblemore flexible– shortshort– clearclear
Basic formating toolBasic formating tool
Easy multiple document Easy multiple document managmentmanagment
Save time by using selector classesSave time by using selector classes
New opportunities in formatingNew opportunities in formating
Basic SyntaxBasic SyntaxMMade up of three parts:ade up of three parts:
selector {property: value}selector {property: value}The selector is normally the HTML element/taThe selector is normally the HTML element/tag you wish to defineg you wish to define
The property is the attribute you wish to chanThe property is the attribute you wish to changege
Every property has the valueEvery property has the value
SyntaxSyntax
If the value is multiple words, put quotes arounIf the value is multiple words, put quotes around the valued the value
p {font-family: "sans serif"}p {font-family: "sans serif"}To make the style definitions more readable, yoTo make the style definitions more readable, you can describe one property on each lineu can describe one property on each line
p p { { text-align: center;text-align: center; color: black;color: black; font-family: arial font-family: arial }}
GroupingGroupingh1,h2,h3,h4,h5,h6 h1,h2,h3,h4,h5,h6 { { color: green color: green }}
All header elements will be displayed in green All header elements will be displayed in green text colortext color
This is header h1This is header h1This is header h2This is header h2This is header h3This is header h3This is header h4This is header h4
The class SelectorThe class SelectorWith the class selector you can define differenWith the class selector you can define different styles for the same type of HTML element.t styles for the same type of HTML element.
p.right {text-align: right} p.right {text-align: right} p.center {text-align: center}p.center {text-align: center}Using the class argument in (X)HTML:Using the class argument in (X)HTML:
<p class="right"> This paragraph will be righ<p class="right"> This paragraph will be right-aligned. </p> t-aligned. </p>
<p class="center"> This paragraph will be cen<p class="center"> This paragraph will be center-aligned. </p>ter-aligned. </p>
Text color Text color <html><head><html><head><style type="text/css"><style type="text/css">h1 {color: green}h1 {color: green}
h2 {color: #dda0dd}h2 {color: #dda0dd} p {color: rgb(0,0,255)}p {color: rgb(0,0,255)}</style></style></head></head><body><body> <h1>This is header 1</h1><h1>This is header 1</h1> <h2>This is header 2</h2><h2>This is header 2</h2> <p>This is a paragraph</p><p>This is a paragraph</p></body></body></html></html>
This is header 1This is header 1This is header 2This is header 2This is a paragraphThis is a paragraph
Inserting Style Inserting Style sheetsheet
Cascading orderCascading order1.1. Browser defaultBrowser default
2.2. External style sheetExternal style sheet inside external *.css fileinside external *.css file
3.3. Internal style sheet Internal style sheet inside the <head> taginside the <head> tag
4.4. Inline style Inline style inside an HTML elementinside an HTML element
External Style SheetExternal Style Sheet
Each webpage musEach webpage must link to the style sht link to the style sheet using the eet using the <link<link> > tagtag
Browser reads styles Browser reads styles definitions from definitions from mystmystyle.cssyle.css file file
<head> <head> <link rel="styleshee<link rel="stylesheet" type="text/css" t" type="text/css" href="mystyle.css" href="mystyle.css" /> />
</head></head>
Internal Style SheetInternal Style Sheet
Should be used Should be used when a single when a single document has a document has a unique styleunique style
Defined in the head Defined in the head section by using the section by using the <style> <style> tagtag
<head> <head> <style type="text/css"> <style type="text/css"> hr {color: sienna} hr {color: sienna} p {margin-left: 20px} p {margin-left: 20px} body {background-image: ubody {background-image: url("images/back40.girl("images/back40.gif")} f")}
</style> </style> </head></head>
Multiple Style SheetsMultiple Style SheetsAn internal style sheet has An internal style sheet has following properties for the following properties for the h3 h3 selector:selector:h3 { text-align: h3 { text-align: right;right;
font-size: 20pt }font-size: 20pt }External style sheet has External style sheet has these:these:h3 { color: red; h3 { color: red; text-align: left; text-align: left; font-size: 8pt }font-size: 8pt }Your Web Browser has Your Web Browser has default formatting:default formatting:h3 { color: black; h3 { color: black; font size: 10pt }font size: 10pt }
What will be the formaWhat will be the format of <h3> tag?t of <h3> tag?
o color: red;color: red;o text-align: right; text-align: right; o font-size: 20ptfont-size: 20pt
ExamplesExamples
Background:Background:Control over the Control over the background color of background color of an elementan element
set an image as the set an image as the background, background,
repeat a background repeat a background imageimage
background-colorbackground-color– color-rgbcolor-rgbcolor-hexcolor-hexcolor-namecolor-name
background-imagebackground-image– url(URL)url(URL)nonenone
background-repeatbackground-repeat– repeatrepeatrepeat-xrepeat-xrepeat-yrepeat-yno-repeatno-repeat
Text:Text:colorcolordirectiondirection– ltrltrrtlrtl
word spacingword spacing– normalnormallengthlength
text-decorationtext-decoration– nonenoneunderlineunderlineoverlineoverlineline-throughline-throughblinkblink
text-aligntext-align– leftleftrightrightcentercenterjustifyjustify
Font:Font:font-familyfont-family• family-namefamily-namegeneric-familygeneric-family
font-sizefont-size– xx-smallxx-smallx-smallx-smallsmallsmall
– /etc.//etc./
font-weighfont-weigh– normalnormalboldboldbolderbolderlighterlighter100100
DimensionDimension
List:List:<head><head><style type="text/css"><style type="text/css">
ul ul {{list-style-image: url('arrow.gif')list-style-image: url('arrow.gif')}}
</style></style></head></head>
<body><body><ul><ul> <li>Coffee</li><li>Coffee</li> <li>Tea</li><li>Tea</li> <li>Coca Cola</li><li>Coca Cola</li></ul></ul>
</body></body>
CSS LimitationsCSS Limitations
Some noted disadvantages of using "pure" CSS includeSome noted disadvantages of using "pure" CSS include– Inconsistent browser support Inconsistent browser support – Absence of expressions Absence of expressions – Lack of Variables Lack of Variables – Lack of multiple backgrounds per element Lack of multiple backgrounds per element – Control of Element Shapes Control of Element Shapes
CSS level 1CSS level 1The first CSS specification to become an official W3C The first CSS specification to become an official W3C Recommendation is Recommendation is CSS level 1CSS level 1, published in December , published in December 1996. Among its capabilities are support for:1996. Among its capabilities are support for:– Font properties such as typeface and emphasisFont properties such as typeface and emphasis– Color of text, backgrounds, and other elementsColor of text, backgrounds, and other elements– Text attributes such as spacing between words, letters, Text attributes such as spacing between words, letters,
and lines of textand lines of text– Alignment of text, images, tables and other elementsAlignment of text, images, tables and other elements– Margin, border, padding, and positioning for most elementsMargin, border, padding, and positioning for most elements– Unique identification and generic classification of groups of Unique identification and generic classification of groups of
attributesattributes
The W3C maintains the CSS1 Recommendation.The W3C maintains the CSS1 Recommendation.
CSS level 2CSS level 2published as a Recommendation in May 1998.published as a Recommendation in May 1998.
includes a number of new capabilitiesincludes a number of new capabilities– absolute, relative, and fixed positioning of elementsabsolute, relative, and fixed positioning of elements– the concept of media typesthe concept of media types– bidirectional textbidirectional text– new font properties such as shadowsnew font properties such as shadows
The W3C maintains the CSS2 Recommendation.The W3C maintains the CSS2 Recommendation.
CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2– returned to Candidate Recommendation status on 19 returned to Candidate Recommendation status on 19
July 2007July 2007
