4.4 css 样式表运用
DESCRIPTION
4.4 CSS 样式表运用. 学习目标. 理解 CSS 样式表对网页布局的作用 掌握 CSS 样式表的运用方法. 样式表设计. 样式表定义及引用 相关的标记和属性 样式的继承和作用顺序 CSS 属性 CSS 滤镜. 一、样式表定义及引用. CSS , Cascading Style Sheets ,层叠样式表,是 W3C 协会为弥补 HTML 在显示属性设定上的不足而制定的一套扩展样式标准。 CSS 标准中重新定义了 HTML 中原来的文字显示样式,并增加了类、层等新概念,可以对文字重叠、定位等,提供了更为丰富多彩的样式;同时 CSS 可进行集中样式管理。. - PowerPoint PPT PresentationTRANSCRIPT
-
4.4 CSS
-
CSSCSS
-
CSSCSS
-
CSSCascading Style SheetsW3CHTML CSSHTMLCSS
-
CSSHTMLHTMLCSS ""HTML
-
1. CSS Selector{ Rule}HTMLh1.textID /**/ CSS
-
2. 1 CSS HTMLCSS HTML CSS
-
2 HTMLCSS@import @import URL(""); ......
-
HTML@import HTMLHTMLCSS
-
3 HTML HTML
-
4 : : style CSS......
-
HTML
-
CSSHTML class idid span div
-
1. Class Selectorclass class classClass Selector.
-
1. {1; 2; ......} p.back { background-color:#666666;} ... ..... ... #666666 ......
-
2. {1; 2; ......} .text {font-family: ""; font-size: 14pt; color: red} 1
-
2. idID Selectorid ididHTML id #id { 1; 2; ...}idididid
-
... ... #colorid1 { color:green;} ... ... IDID ......
-
3. Contextual Selector td p { color:darkred}HTML.........
-
4. : { : }HTMLCLASS
-
: (links)(visited links)(active links)
a:visited { color: #0000FF; text-decoration: none}a:link { font-family: ""; font-size: 9pt; color: #FF00FF; text-decoration: none}a:hover { font-family: ""; font-size: 12pt; color: #003333; background-color: #FFCC99; text-decoration: none}
-
5. span spanclassidstyleCSSspanHTMLspan spanCSSHTML
-
6. div alignclassidstyle HTML
-
1. h2 { color:red;} DIV
-
p.class1 {font-size:12pt;} p.class2 {font-size:200%} p.class3 {font-size:100%}
-
2. HTML id
-
CSS
-
1. font-familyfont-sizefont-stylefont-weightfont-variantfont
-
2. : color: , #RRGGBB, #RGB: : h1{color:red}h2{color:#008800}h3{color:#080}
-
: background-color:, #RRGGBB, #RGB, transparent:: body {background-color:white} h1{background-color:#0000F0}p{background-color:transparent}
-
: background-image:URLs, none:: body{background-image:url(bg.gif)}p{ background-image:url(http://www.htmlhelp.com/bg.jpg)}
-
:background-repeat: repeat, repeat-x, repeat-y, no-repeat:repeat: body {background-repeat:no-repeat}p {background-repeat:repeat-x}
-
:background-attachment: scroll, fixed:sroll: body {background-attachment:fixed}
-
: background-position:,:: body{background-position:30% 70%}p{background-position:bottom left}
-
: background::: body {background:url(bg1.gif)green repeat-y fixed left 20pt}
-
3. : letter-spacing:|normal:: h1 {letter-spacing:8px}p {letter-spacing:14pt}
-
: text-decoration: none|underline|overline|line-through|blink:line-throughblinknone: a:link,a:visited,a:active { text- decoration: none}
-
: text-align: left|right|center|justify():: p {text-align:center}h1 {text-align:right}
-
: vertical-align: baseline|super|sub|tomiddle|bottom|text-top|text-bottom|:: img.mid { vertical-align:50%}span.sup { vertical-align:super}span.sub { vertical-align:sub}
-
: text-indent:|:: p { text-indent:30pt}h1 { text-indent:10%}
-
: line-height: normal|||:: p { line-height:200%}p { line-height:30pt}
-
4. bodypdivtdtablehxx=1,2,...,7 marginpaddingborder
-
5. : list-style-type
-
6. 1topleftposition ()top left position topleftpositionposition absolute relativeHTML staticHTMLstatic
-
2 CSSz-indexz-indextopleft z-index"""" z-index0z-index=0
-
CSS1filterfiltername(parameters)
-
CSS
-
2alpha filteralpha(opacity=opcity finishopacity=finishopacitystyle=style startX=startX startY=startY finishX=finishX finishY=finishY)
-
Opacity: 01000-100- Style: 0-1-2-3-Finishopacity()0100 StartXStartYfinishXfinishY
alpha
-
3blur()filterbluradd=adddirectionstrength=strength AddtruefalseStrength: 5
-
Direction045270
-
4Chroma FilterChromacolor=colorColorchroma
-
5DropShadowDropShadowFilter:DropShadow (Color=color, Offx=Offx, Offy=offy, Positive=positive)
-
Color: Offxoffy: XY,XYPositiveTrueFalse01
-
6FlipHFlipVFlipHFlipVFilterFlipHFilterFlipV
-
7GlowFilter:Glow(Color=colorStrength=strength)ColorStrength1-255 Glow
-
8Gray FilterGray 9InvertFilterInvert
-
10MaskFilterMaskColor=Colormask Mask
-
11Shadow Filter:Shadow(Color=color,Direction=directionColorDirection045
-
ShadowDropshadowShadowDropshadowShadow Dropshadow ShadowDropshadow
-
12Wave Filter:Wave(Add=0/1,Freq=,LightStrength=Phase=Strength=AddTrueFalseFreqLightStrength0-100Phase0-1002590360*25%
Wave
-
13XrayXXFilterXray
Xray