(This article from http://www.frontfree.net/view/article_73_page1.html)
Lecture 1
(I) Why should I use CSS or CSS?
Example 1: Suppose we want to create a page so that the colors of all H3 texts on the page are green, italic, and. What should we do?
<HTML>
<Head>
<Title> CSS demonstration </title>
</Head>
<Body>
<Em> <font face = "" color = "#00ff00">
<H3> This is a green, italic, and H3 Z H3 text. </Font> </em>
<Em> <font face = "" color = "#00ff00">
<H3> This is another section of H3 text in green, italic, and </Font> </em>
</Body>
</Html>
(Click here to see the example)
The above is a relatively "stupid" method, if the current page exists100 Label, you need to define the 100
<HTML>
<Head>
<Title> CSS demonstration </title>
<Style> <! --
H3 {font-family:; font-style: italic; color: #00ff00}
--> </Style>
</Head>
<Body>
<H3> This is a green, italic, and H3 Z H3 text. <H3> This is another section of H3 text in green, italic, and </Body>
</Html>
(Click here to see the example)
Where:
① Font-family:Equivalent<Font face = "">;Font-style: ItalicEquivalent<Em>;
Color: #00ff00EquivalentColor = "#00ff00"
② H3 {...}The defined style is appliedH3On this label; if it is writtenTD {...}It is applied to cells,CSSIt can reduce a lot of repetitive work, especially when updating, as long as you modify the style sheet,
The entire page will look completely different.
(Ii) a little deeper: Class in CSS
The above method can indeedH3All the text contained in the tag is converted into the style you define, but if you needGreen, italic, andH3 text and another sectionRed, bold, and ShuOfH3Text, simple definitionH3A style of the tag will not work.
Therefore, the concept of classes should be introduced here. Please refer to this sentence:H3.other {font-family:; font-weight: bold; color: # ff0000}
It definesOther Class,Font-weight: boldIndicates that the text is in bold,
To call this class, you only need to write as follows:
<H3Class = "other"> This is an H3 text in red, bold, and simplified Chinese. Class = "other"StatementH3The text in the label will still be defined at the beginningGreen, italic, andStyle.
In fact, classes do not have to be attachedHtmlLabel, which can be defined as follows:
. Another {font-family:; font-weight: bold; color: # 0000ff}
This name isAnotherCan be used for anyHtmlLabel. The call method is the same as above. For example:
<P class = "another"> This is a test </P>
A section is markedBlue, bold, and Shu.
(Click here to see the example)
(Iii) Common CSS attributes I
(1) font-family:This attribute is a name of the font listed in priority. Its values are separated by commas.
For example:Body {font-family:,, _ gb2312} It indicates that is used by default;
When the system cannot find, it will use; if the system cannot find, it will use instead,
I'm afraid you can only wait to see the Garbled text if you cannot even find the body. Pai_^
(2) font-style:This attribute determines whether the font is normal or italic. The attribute value is:Normal | italic | oblique
WhereNormalIs a normal body, and the other two indicate italic. The default value isNormal.
It must be in italics.ItalicThat's enough.
(3) font-weight:This attribute determines the width of the text. It has many attribute values:
Normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
NormalIs the default value, equivalent400,BoldEquivalent700,BolderEquivalent900,LighterEquivalent200.
(4) font-size:This attribute has too many attribute values, but it is generally not used so much. The following describes one of the most common features:
{Font-size: 11pt}, This does not need any instances, and now the words on this page are all 11pt size.
If you do not modify the value of this attribute on a general page, all the words you see are default11ptBig.
Export test-Decoration: None | underline | overline | Line-through | blink
NoneIndicates no modifier,UnderlineIs an underline,OverlineIs underlined,Line-throughIs strikethrough,
BlinkIs flashing (Netscape only). UsuallyNoneThe attribute is used to remove the underline Of the super join.
Lecture 2
(I) Definition of pseudo classes
First, let's look at an example.
The specific code-level implementation is as follows:
. Exp01 {font-size: 9pt; color: # 0000cc; text-Decoration: none;
Font-family: "verdana", "Arial", "Helvetica", "Sans-serif "}
. Exp01: hover {font-size: 9pt; color: # ff0000; text-Decoration: underline}
(The above part is addedStyleLabel)
<A href = "javascript: Alert ('this is a simple example ')" class = "exp01">
This is an example </a>
(The above is added to the body)
I believe that it will not be very difficult to understand most of the above Code after reading the first lecture. What is important here is
. Exp01: hoverThis sentence. CSS predefines four pseudo classes:
: Link: hover: visited: ActiveThey represent four states of a hyperlink.
①: LinkIs the normal state of a link, and its function is likeBodyDefinitionLink = "# ff0000"You can
The hyperlink in the whole page is changed to red, but the difference is that the style sheet is defined here,
It can useTest-DecorationRemove the hyperlink underline from the attribute and define it as follows:
. Exp02: link {test-Decoration: None}
②: VisitedAnd: ActiveNature and: LinkSimilar to, which is used to define "the link has been accessed" and
The property of a link in the active state.
③ Now is the key: HoverIt defines the attributes of the link when the mouse pointer stops at the current link,
It is usually used to implement some simple page effects. As shown in the above example,
It makes static pages active.
④ Attributes defined in the pseudo class will only be used for hyperlink. Please refer to my example.
Therefore, some plain texts can also be defined using pseudo-classes.CSSClass to reduce repeated definitions.
(Ii) Common CSS attributes II
(1) color:The property value is the color representation in HTML, suchRed, RGB (255, 0, 0), # ff0000Such statements
This attribute describes the text color in an element, also known as the foreground color.
(2) Background-color:Same Attribute ValueColor, ButColorOne moreTransparentAttribute Value, default value
IsTransparent(Transparent) This attribute sets the background color of the element.
(3) Background-image:The property value is<URL> | noneThis attribute sets the background pattern of an element.
Note that it is best to set the background color together with the background color when setting the background pattern.
When it cannot be displayed for some reason, the background color can mask errors.
(4) Background-repeat:Attribute ValueRepeat | repeat-x | repeat-y | no-repeat
Initial Value:Repeat.
When a background image is set, this attribute determines whether the image is repeatedly displayed or how it is repeated.
If the property value isRepeatThat means the image is arranged horizontally and vertically.Repeat-xIndicates
Only horizontally arranged,Repeat-yIndicates vertical repetition,No-repeatIs not repeated.
⑸ Background-Attachment:Attribute ValueScroll | fixedInitial Value:Scroll
When a background image has been set, there are usually two ways to attach the image. One is that the background pattern is always static, and the text is rolled over the background (that isFixed); The other is that the pattern is rolled along with the text on the page (that isScroll).
⑹ Background-position:Attribute Value[Percentage | distance] [top | center | bottom]
[Left | center | right]Initial Value:0% 0%
The statement is useless. See the following three equivalent statements:
Background-position: 50% 0%
Background-position: center top
Background-position: Top center
The three sentences mean that the point (x = 50%, y = 0) of the image overlaps with the point (x = 50%, y = 0) of the element.
This is an example in this section.
(3) CSS positioning
How to precisely locate the problem on the page? This may beCSSA great role. The following code implements this function:
<Div style = "position: absolute; top: 150px; width: 200px; Height: 200px;
Background-color: Red ">This is a piece of text to be located. </div>
The above code can be interpreted:
Position: absoluteIndicates that the location isAbsolute (absolute), Another property value isRelative (relative)
When usingAbsoluteWhen the element is located, it is formatted as a rectangle covering.
It is independent of parent and child elements. When the latter is used
The initial position is the initial position of the parent element of the relatively located element.
(It sounds obscure. Please refer to this example)
Top: 150pxIndicates that the content is displayed PX away from the top, and yesLeft: 150px
Indicates that the content is displayed in a place 150px away from the left.
Width: 200px; Height: 200px;Indicates the area size that can be displayed.
The aboveTop, widthAttribute values can be set as negative numbers.
Place the value you set.
Lecture 3
Wonderful filter effect (mainly static)
After the first twoChap, The powerful filter finally surfaced ^_^ with the power of filters and scripts, we can easily achieve a lot of dynamic effects. Before you start, first read an image.
This is the source image of the graph I used in all examples.
(1) Alpha
Function: changes the transparency of elements.
Syntax:{Filter: alpha (opacity = *, finishopacity = *, style = *, startx = *,
Starty = *, finishx = *, finishy = *)}
Note: opacityRepresents the level of transparency. The range is0-100,100Is completely opaque (all
All elements are completely opaque ),0Is completely transparent.
FinishopacityIs an optional parameter. If you want to set the transparency of the gradient, you can use it.
To specify the transparency at the end. The range is also0-100.
StyleThe parameter determines the shape of the transparent area.0Represents a unified shape,1Represents linear,2Representative
Radial,3Represents a rectangle.
StartxIs when the transparency effect startsXCoordinates,FinishxAt the endXCoordinates.
StartyAndFinishySimilarly.
Example: Transparency
(2) blur
Function: blur the image.
Syntax:{Filter: blur (add = *, direction = *, strength = *)}
Note:Add = trueOrFalseTo determine whether to use the fuzzy effect of the school.
The Blur effect is clockwise,DirectionThis parameter is used to set the blur Direction and range.
Yes0-360, Where0Is vertical up.
StrengthIs an integer, indicating the width of the Blur. The default value is5, Range is1-255.
Example: Fuzzy (dynamic)
(3) fliph and flipv
Function: filph is a horizontal flip object, and filpv is a vertical flip object.
Syntax: {filter: fliph} or {filter: flipv}
Example: flip
(4) grow
Function: Make the edge of an object shine.
Syntax:{Filter: Grow (color = *, strength = *)}
Description: ColorIs the specified light color,StrengthIndicates the intensity of light. The range is1-255.
Example: edge light
⑸ Shadow
Function: creates an object projection in a specified direction.
Syntax:{Filter: Shadow (color = *, direction = *)}
Description: ColorIs the color of the projection,DirectionIs the direction of the shadow, range is0-360, Where0Representative
Vertical up.
⑹ Dropshadow
Function: similar to shadow
Syntax: {filter: dropshadow (color = *, offx = *, offy = *, positive = *)}
Description: ColorIs the color of the shadow.OffxAndOffyIt is shadow inXDirection andYThe offset of the direction.
PositiveIs a Boolean value, if the value is"True"For any non-transparent Pixel
Create a visible projection."False"To create a visible projection for the transparent pixel part.
Note that althoughDropshadowAndShadowFunctions are similar,ShadowYes
Projection, andDropshadowIt is just to create an offset and add the color.
Example:Comparison of dropshadow and shadow Functions
⑺ Wave
Function: disrupt objects according to the vertical waveform Style
Syntax: {filter: Wave (add = *, freq = *, lightstrength *, phase = *, strength = *)}
Note: addThe default attribute value isTrueTo add the filter. It can also be setFalse, Indicating not to add.
FreqIt is the ripple frequency, that is, the total number of complete ripple on the object.
LightstrengthThe brightness of the ripple. The range is0-100.
PhaseUsed to set the offset when the sine wave starts. The default value is0, Range is0-100, This value generation
The table's start wavelength is taken from the percentage value of the wavelength, for example, if the value is25Then the sine wave starts from90Degrees
.
StrengthThe amplitude of a wave.
Example: Fluctuation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
