4 CSS.CSS, CSS selectorCSS property

22 ...XHTML 1.0 start-page.html , .

3HTML CSSHTML . HTML html . HTML . . , , , .

CSS Cascading Style Sheet .44HTML , HTML . . , , CSS . Web content is the textual, visual or aural content that is encountered as part of the user experience on websites. It may include, among other things: text, images, sounds, videos and animations , , ,, .4CSS CSS- HTML , .

, .

HTML , CSS .

CSS .

5CSSCSS- , . CSS . CSS . CSS .

CSS . .

66CSS

+ CSS

7CSSCSS . /Rule/ /selector/ /declaration/ . selector .Selector- . declaration .Declaration property:value : .

selector {property: value ;}

88CSS CSS declaration/ Declaration- - {} . selector { } selector- declaration . declaration- -( ; ) .selector { property1: value1;property2: value2;propertyN: valueN; }

9 idCSS, JavaScript id .

class CSS- .

style CSS

titletool tip

10CSS ?CSS 3 .HTML style css

11CSS ?1. HTML style .

CSS

12CSS ?2. style head . .style type text/css .

selector{property:value;}

Using Internal CSS

This is a paragraph 1

13CSS ?3. css . css . css .href CSS / + + . + /style.css

selector{ property1: value2; property2: value2;}page1.html

page2.html

14 CSS . ?

14CSS - 15CSS property .

1515CSS selector- 16CSS selector- HTML selector :HTML .p {property: value;}

h1{ property: value;}

body{ property: value;}

1717Color propertycolor - property 16- RGB . paragraph( ) .p{ color: blue; } p{ color:#0000FF; } p{ color: rgb(0,0,255); } 18CSS selectorClass selector . - . lass selector . .className { property: value; }

.

.warning{color:green}1919 p , p , p h1 .19CSS selectorClass selector HTML class . . .

camel case .warningText,.loginInputName

202020CSS selectorClass selector . ..hugeText{font-size:48px;}.warningText{color:green;}

HTML- .21CSS selectorUniversal selector

.

:* {property: value; }

* - .

22CSS selectorID selector . id- . header, footer, id . : # { property: value }

id #- .#header{color:yellow;}HTML- header 2323Id .23CSS selector24Descendant selector selector , . selectorN selectorN selectorN{property: value;} p descendant selector- .p .warningText{}24CSS selector25Group selector selector- declaration group selector . Selector- . selector1, selector2 ... selectorN{property: value;}

p, h1, h2, .hugeText, #header, p h4 {color: blue;}

CSS selector selector- ?HTML selector- .

ID selector- CSS- .

Class selector- ( ) CSS .

Group selector- selector- CSS .

Descendant selector , CSS- .

Universal selector /descendent selector- / CSS .

26CSS 27 CSS- .style CSS

declaration- ? .

declaration- .27 CSS property text-align28text-align: property /value/:left: .center: .right: .justify: , .inherit: text-align property .

text-align: lefttext-align: righttext-align: centertext-align: justifyCSS property background-color29background-color - . , 16- , RGB .body{background-color: #FFFFFF;} .p{background-color: #000000;}p .

CSS HTML CSS .CSS /* */

. /*Style sheet for [web site]Created by [author name]Notes*/30CSS property - border31border: . border-top border-bottom oo border-left border-right property- .border-color: - border-style: - value: solid, dotted, dashed, doubleborder-width: - 4 border property- .

:D

32