CSS 快速入门培训PPT教程【英】

AirJD

没有录音文件

00:00/00:00

加收藏

CSS 快速入门培训PPT教程【英】

发布者 kernal

发布于 1492610845592 浏览 6753 关键词 CSS, 前端

分享到

第1页

CSS 101: An Impossibly Fast Introduction to the World of Cascading Style Sheets.

Rob Larsen
10.13.2010
htmlcssjavascript.com | drunkenfist.com
@robreact
htmlcssjavascript.com/downloads/css.ppt | dfst.us/styles

第2页

Who is this Guy Anyway?

13+ years HTML/CSS/JavaScript. My day job since 1999.
Interface Architect at Isobar (AKA Molecular)
PAST: Cramer, AdvisorTech, Compete, Demandware, The Weekly Dig, Gillette, Museum of Science, Boston, PC Connection, State Street, Webex

第3页

What Are We Going to Talk About

Introduction to CSS
CSS Fundamentals
Specificity
CSS Versions
CSS in Action
Frameworks, Abstractions, etc.
Testing
Resources

第4页

CSS?

Cascading Style Sheets
CSS is a style sheet language used to determine the formatting of an HTML document.
Before we had CSS (and before it was widely adopted) all of this formatting information was embedded directly in the document- either in the form of attributes like width or bgcolor (background color) or in the form of purely presentational tags like font.
Combined with the abuse of the table tag to create complicated layouts, the landscape for layout and design on the web was an unmanageable mess.
CSS fixed all that (kind of.)
Using separate style sheets for an entire site, leveraging semantic markup and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles across a whole site while updating a single (cacheable) file.

CSS is a language used to determine the formatting of an HTML document.

Before we had CSS all of this information was encoded directly into the document.

This was a mess.

CSS fixed all that.

Using separate style sheets for an entire site, leveraging semantic markup and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles across a whole site while updating a single (cacheable) file.

第5页

What It Looked Life Before

<p align="center">
<font face="Papyrus"><img border="0" src=“fancy-header.png” width="207" height="279"></font>
</p>
<p align="center">
<font face="Papyrus“> Welcome to The Fancy lad Site!</font>
</p>
<p align="center">
<font face="Papyrus">This web-page is the semi-official home of Fancylads on the World Wide Web.</font>
</p>

Best way to show what it means is to show you where we came from. I actually built sites like these. There’s not much here really, but a lot of what is here is related to the way the page looks.

第6页

Not So Bad? Try This.

<table width="158" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr bgcolor="#006699">
    <td valign="top" bgcolor="#000066"><div align="center"> <strong> <font color="#FFFFFF" size="-1" face="Verdana, Arial, Helvetica, sans-serif"> Sponsors: </font> </strong> </div></td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td class="body-small"><div align="center"><font color="#666666" size="-2"><img src="spacer.gif" width="1" height="15" border="0"><a href="http://www.packaginggraphics.net/packaging-design.html" target="_blank">Packaging Graphics Co.</a></font></div></td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td height="22" class="body-small"><div align="center"><img src="images/spacer.gif" width="1" height="15" align="absmiddle"> <font color="#666666" size="-2"><a href="http://www.brochure-design.com" target="_blank">Brochure Design & Printing</a></font></div></td>
  </tr>
  <tr>
    <td height="10" bgcolor="cccccc"></td>
  </tr>
</table>

And it got much worse.

第7页

Enter CSS

第8页

Enter CSS (The timeline)

CSS1
December 1996

CSS 2

Became a W3C Recommendation in May 1998

CSS 3
CSS level 3 has been under development since December 15, 2005

第9页

Enter CSS

It took a while for CSS to catch on with developers and browser vendors.
So… 1996 really turned into 2000 or later for relatively widespread adoption.
Before that it was <font>city all the way.

第10页

CSS Fundamentals

The Separation of Style, Content and Behavior
One BIG Core Concept
Getting the style sheet on the page
The anatomy of a style sheet

第11页

The Separation of Style, Content and Behavior

Core Concept of web development
HTML + CSS + JavaScript
Content + Style + Behavior

This is the core concept of not just CSS, but web development in general. In a lot of ways it’s taken for granted now, but it wasn’t always so.

第12页

Separation of Content and Style?

?
Let’s see that in action

We’ve got that crummy page from before. Let’s fix it.

第13页

Our New HTML

<h1>Fancy Lads</h1>
<p>Welcome to The Fancy lad Site!</p>
<p>This web-page is the semi-official home of Fancy lads on the World Wide Web.</p>

<!--How much simpler is that?

<p align="center">
<font face="Papyrus"><img border="0" src=“fancy-header.png” width="207" height="279"></font>
</p>
<p align="center">
<font face="Papyrus“> Welcome to The Fancy lad Site!</font>
</p>
<p align="center">
<font face="Papyrus">This web-page is the semi-official home of Fancylads on the World Wide Web.</font>
</p>

And this is a simpler example to start with. With the real tag soup pages you could cut out probably 70% of the markup. Don’t worry if none of this makes perfect sense yet. It’s there just to illustrate how much markup CSS can save.

第14页

Let’s See the Associated Style Sheet

h1{
background:url(fancy-header.png) no-repeat;
width:207px;
height:279px;
text-indent:-9999px;
}
p {
text-align:center;
font-family:papyrus;
}

And here’s where all that info goes.

第15页

So, How Does It Work?

You create a style sheet, the browser downloads it, parses it and then the browser:
Matches elements on the page
And then it ->
Styles Them

第16页

Let’s look at some more code

第17页

Getting the Style Sheet on the Page

<!– This is in the HEAD of your document -- >

<!– xHTML -- >
<link rel="stylesheet" type="text/css" href="/_assets/styles/style.css" />
<!– HTML5-- >
<link type="text/css" href="/_assets/styles/style.css" >

Simplicity. Especially the HTML 5 example.

第18页

Basic Anatomy of a Style Sheet

/* A single tag */
/* Many elements will inherit from this tag, since it's high up in the document */
body {
background: #CCC url(/_assets/styles/images/page-bg.png) repeat-x;
font: normal .825em/1.65 Verdana, Arial, Helvetica, sans-serif;
color: #333;
}
/*an ID */
#container {
background:#fff;
height:auto;
margin:auto;
overflow:auto;
position:relative;
width:980px;
}

There are two things to pay attention to, one is the ID/Class/Tag combination. That's called a selector. A selector gives context to the browser and tells it what elements it wants to style. Selectors can be combined in a comma separated list if you want to apply the same styling to several different elements.
Inside the curly braces you'll find the declaration, which are property/value pairs that define the specific rules the browser should apply to matching elements.

第19页

Basic Anatomy of a Style Sheet

/* A single tag */
h1 {
color: #999;
font-size: 200%;
text-transform: uppercase;
font-weight:normal;
}
/* A series of ID/tag combinations, with the same rules applied */
#main h2, #main h3, #main h4, #main h5 {
font-weight:normal;
line-height:1.4;
margin:7px auto;
}

There are two things to pay attention to, one is the ID/Class/Tag combination. That's called a selector. A selector gives context to the browser and tells it what elements it wants to style. Selectors can be combined in a comma separated list if you want to apply the same styling to several different elements.
Inside the curly braces you'll find the declaration, which are property/value pairs that define the specific rules the browser should apply to matching elements.
Take a look and familiarize yourself a little bit with the structure of a style sheet. Next time out we'll go through one of the most important concepts in CSS, the way rules are calculated. After that, we'll get into some of the different properties, what they're for and how they should be used.

第20页

Basic Anatomy of a Style Sheet

/* A class */
.more-link {
font-weight:bold;
text-transform:uppercase;
font-size:110%;
text-decoration:none !important;
}
/* An ID/class combo */
#main .share {
margin-top:7px;
}
/* An ID/class/tag combo */
#main .share strong {
background: url(/_assets/styles/images/share.png) 0px 3px no-repeat;
color:#393;
padding-left: 19px;
text-transform:uppercase;
}

There are two things to pay attention to, one is the ID/Class/Tag combination. That's called a selector. A selector gives context to the browser and tells it what elements it wants to style. Selectors can be combined in a comma separated list if you want to apply the same styling to several different elements.
Inside the curly braces you'll find the declaration, which are property/value pairs that define the specific rules the browser should apply to matching elements.
Take a look and familiarize yourself a little bit with the structure of a style sheet. Next time out we'll go through one of the most important concepts in CSS, the way rules are calculated. After that, we'll get into some of the different properties, what they're for and how they should be used.

第21页

Basic Anatomy of a Style Sheet

There are two things to pay attention to, one is the ID/Class/Tag combination. That's called a selector. A selector gives context to the browser and tells it what elements it wants to style. Selectors can be combined in a comma separated list if you want to apply the same styling to several different elements.
Inside the curly braces you'll find the declaration, which are property/value pairs that define the specific rules the browser should apply to matching elements.
Take a look and familiarize yourself a little bit with the structure of a style sheet. Next time out we'll go through one of the most important concepts in CSS, the way rules are calculated. After that, we'll get into some of the different properties, what they're for and how they should be used.

第22页

Vocabulary

.selector {
/*declaration*/
property:value
}

Let’s review.

第23页

Shorthand properties

.verbose {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-style: italic;
line-height: normal;
font-weight: bold;
color: #003333;
background-color: #FFFFCC;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
background-image: url(images/bg.png);
background-repeat:repeat;
background-position: 10px 5px;
}

Learn this now. It’s the way to go.

第24页

Shorthand properties

.shorthand {
background: #ffffcc url(images/bg.png) 10px 5px repeat;
color: #003333;
font: italic bold 12px/normal "Times New Roman", Times, serif;
padding: 5px 10px 15px 20px;
}

Isn’t that so much nicer? Also, alphabetical order. Just sayn’

第25页

Shorthand properties

Remember:
T(op)R(ight)B(ottom)L(eft)

For things like padding, where there are four values, the order is ROP RIGHT BOTTOM LEFT

第26页

Formatting

#main article strong {
font-weight:bold;
}
#text #main article blockquote {
background:#efefef url(_assets/styles/images/bq-bg.png) no-repeat;
color:#600;
font-style: italic;
margin: 15px auto 30px auto;
padding: 30px 30px 15px 75px;
}
#text #main article blockquote cite {
color:#333;
font-size:90%;
font-style:normal;
}
#text #main article ul {
font-size:14px;
margin: auto auto 30px 15px;
}

During development I format my CSS with selectors on one line and then each property on its own line. The declarations are indented 4 spaces. I like this style because my interest is always in the properties, not the selectors. I can find any selector I need with CTRL+F and then I can easily scan down the list of properties to do my business.
It looks like this:

第27页

Formatting

.post-list li a{
color:#A8A8A8;
}
    .post-list li a:hover{
        color:#000;
        text-decoration:none;
     }
     .post-list li .author a, .post-list li .author a:hover{
         color:#F30;
        text-transform:uppercase;
     }

Some people take that approach and indent related or child styles and additional 2 or 4 spaces. That allows for hierarchical scanning and organization and makes (for some people) an easier-to-read style sheet. That looks like this:

第28页

Formatting

  #wrapper                        {width:800px; margin:0 auto;}
  #header                         {height:100px; position:relative;}
  #feature .post                  {width:490px; float:left;}
  #footer                         {clear:both; font-size:93%; float:none;}
  #footer .wrapper                {float:none;}

Other people like to scan the file for selectors, so they produce CSS with selectors and declarations on one line. I personally have a hard time with this style, but some people I know swear by it, so I present it here:

第29页

Formatting

Whatever style you use, it’s good practice to minify your CSS before pushing to production so that all the extra characters you pump into your sheets for ease-of-use as a developer don’t slow down the experience of your users.
I use:
http://developer.yahoo.com/yui/compressor/

第30页

Specificity/The Cascade

One of the most important things in CSS is understanding the way rules are inherited and applied in the browser. This is one of those things that many developers “get” intuitively but don’t necessarily understand at a granular level.
There’s actually an algorithm, so if you’re stumped, you can actually count it out. It works like this:

I’m just going to read these slides word for word. I almost never do that, but this is important AND confusing.

第31页

Specificity/The Cascade

First, find all rules that apply to the target element/property. This will be some combination of browser default > style sheet default > targeted rules.

第32页

Specificity/The Cascade

Once all the rules are gathered calculations are made to decide which ones are to be followed and which ones are to be discarded. That works like this:
Sort by explicit weight- ‘!important’ rules carry more weight than normal declarations.
Sort by origin: the author’s style sheets trump the browser default values.
Sort by specificity of selector. More specific selectors trump more general ones. The formula is as follows:
factor in any inline styles
count the number of ID attributes in the selector
the number of CLASS attributes in the selector
the number of tag names in the selector

第33页

Specificity/The Cascade

Some Examples

Some examples:

http://jsfiddle.net/GqJ7n/1/

http://jsfiddle.net/GqJ7n/

第34页

Specificity/The Cascade

Sort by order specified: if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.
If two rules only impact one column, the higher number wins. If the selector cuts across more than one column, the biggest numbers in the farthest most left column wins. So, inline styles (which you should avoid) are more specific than an ID, which, in turn is more specific than a class, which itself will trump a tag. If you can wrap your head around these concepts, you’ll go a long way towards making sense of CSS and how the rules are applied.

第35页

CSS Versions

CSS 1
Font properties such as typeface and emphasis
Color of text, backgrounds, and other elements
Text attributes such as spacing between words, letters, and lines of text
Alignment of text, images, tables and other elements
Margin, border, padding, and positioning for most elements
Unique identification and generic classification of groups of attributes
CSS2
includes a number of new capabilities like
absolute, relative, and fixed positioning of elements and z-index,
the concept of media types
support for aural style sheets and bidirectional text
new font properties such as shadows.

http://en.wikipedia.org/wiki/Cascading_Style_Sheets, once again

第36页

CSS Versions

CSS3
Modules include:
Borders (border-radius, box-shadow)
Backgrounds (multiple backgrounds)
Color (HSL colors, HSLA colors, opacity, RGBA colors)
Also:
media queries
multi-column layout
Web fonts

第37页

Let’s See it in Action

第38页

Fonts/Backgrounds/Borders

http://jsfiddle.net/JwsBn/

第39页

Layout

http://jsfiddle.net/np43E/2/

第40页

A Quick Aside on Floats

“A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the 'float' property. “

w3c::http://www.w3.org/TR/CSS2/visuren.html

第41页

It looks like this:

http://jsfiddle.net/sMjJq/

第42页

Floated Content, Keeps on Floating

Sometimes, you have to “clear” it.

第43页

This is what that looks like.

http://jsfiddle.net/KfjAL/

第44页

Do this enough, you need a system.

We messed around with this for a while. Eventually we found:

“Simple Clearing of Floats” (overflow:auto on the containing element. Learn it, love it, live it)
http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/

Also see:
.clearfix
http://www.positioniseverything.net/easyclearing.html
:after
http://lists.w3.org/Archives/Public/www-style/2002Aug/0134.html

Thank Adam for the right links: http://www.amodernfable.com/

第45页

Positioning

http://jsfiddle.net/3uNsN/

第46页

CSS3

http://jsfiddle.net/eSNqx/
Also
http://CSS3Please.com/

第47页

Frameworks/Abstractions

Frameworks
Pre-built layout systems which allow for much easier layout construction. All of the hard stuff is figured out for you, you just need to learn/love the system.
See: http://sethetter.com/web-design/css-framework-comparison/
Abstractions
Sits at a higher level than CSS. Allows for variables, functions and alternative syntax. See: SASS/COMPASS (http://sass-lang.com/ and http://compass-style.org/ )

第48页

Reset Style Sheets

Level the playing field across browsers.
Up until now, there were never rules for how browsers should set defaults on how elements were styled. Resets allow us to level the playing field.

第49页

Reset Options:

http://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/

Also:

http://html5boilerplate.com/

第50页

Meyer Reset

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

第51页

Meyer Reset

body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

第52页

Meyer Reset

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

第53页

Testing

http://browsercam.com/
http://browsershots.org/
http://browserlab.adobe.com/
http://litmus.com/

第54页

FireBug

http://getfirebug.com/

第55页

Safari (ctrl +alt + i)

第56页

Internet Explorer 8 (f12)

第57页

Chrome (ctrl + shft + j)

第58页

Targeting Browsers (*cough* Internet Explorer)

Hacks?
Body/HTML class
HasLayout

第59页

Targeting Internet Explorer- HACKS

Just say no.
But… if you must:
http://paulirish.com/2009/browser-specific-css-hacks/

第60页

Targeting Internet Explorer-Use This

<body> 





 <html lang="en">

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

第61页

Targeting Internet Explorer-Use This

#wplinks #searchsubmit {
margin-bottom:7px;
}
.ie7 #wplinks #searchsubmit {
margin-bottom:0px;
}

第62页

Internet Explorer- HasLayout

“Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.
This quality can be irreversibly triggered by some CSS properties. Some HTML elements have “layout” by default.
Microsoft developers decided that elements should be able to acquire a “property” (in an object-oriented programming sense) they referred to as hasLayout, which is set to true when this rendering concept takes effect.
- http://www.satzansatz.de/cssd/onhavinglayout.html

第63页

Internet Explorer- Triggering HasLayout

position: absolute
float: left|right
display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal'
As of IE7, overflow became a layout-trigger.
overflow: hidden|scroll|auto
position: fixed
min-width: any value
max-width: any value other than 'none'
min-height: any value
max-height: any value other than 'none'

第64页

Any Questions?

第65页

Resources

http://www.w3.org/Style/CSS/
http://www.csszengarden.com/
http://meyerweb.com/eric/css/
http://www.alistapart.com/topics/code/css/
http://www.quirksmode.org/css/contents.html
http://www.w3.org/Style/Examples/011/firstcss
http://www.w3schools.com/css/default.asp
http://www.westciv.com/style_master/academy/css_tutorial/
http://molecularvoices.molecular.com/standards/
http://handcraftedcss.com/ (book)
http://www.zeldman.com/dwws/ (book)

第66页

Thanks

@deathbearbrown
@jayroh
@unruthless
@ryanobrooks
@adamjmcintyre