Text section:
Expression web video tutorial section 9 Format menu [3] Style
Cascade styles are described in the cssdemo of the demo file.
CSS teaching "selector application 』 |
|
In the basics, we have mentioned what a selector is. For example, the table in table {font-size: 9pt} is called a selector, and the style is defined in {} by using table (table, of course, you can set this selector to another name for the webpage to use, or you want to use different text colors or different table colors for each line, using a custom selector makes it easier for you to master. |
|
Category 1: class = "name" |
■ Selector Text Example 1: view the example Effect <Style type = text/CSS> <! -- . 123 { Color: # cc6699;/* text color */ Font-size: 9pt/* text size */ } . 456 { Color: #336699;/* text color */ Letter-Spacing: 3pt;/* padding */ Font-size: 9pt/* text size */ } --> </Style> </Head> <body> □< P class = "123"> the text here is pink and 9pt </P> □< P class = "456"> the text here is blue, with a size of 4 PT from 9pt </P> |
■ Selector form and table use Example 2: view the example Effect <Style type = text/CSS> <! -- . 789 { Background-color: # edcbdc;/* Background Color */ Color: # ffffff;/* text color */ Font-size: 9pt;/* text size */ Border: 1px solid # cc6699;/* box size and color */ } . ABC { Background-color: #336699;/* Background Color */ Color: # ffffff;/* text color */ Font-size: 9pt;/* text size */ Border: 1px solid #000000;/* box size and color */ } --> </Style> <Input class = "789" type = "text" name = "T1" size = "20" value = "here is the form"> <Table class = "ABC" width = "182"> <TD> here is the table </TD> </Table> |
|
Type 2: Id = "name" |
Another way is to use ID, which means the same as above. The class selector adds a decimal point in front. The difference is that ID is added in front #, let's take a look at the following example: (you can try to see if it is the same as the selector Text Example 1) <Style type = text/CSS> <! -- #123 { Color: # cc6699;/* text color */ Font-size: 9pt/* text size */ } #456 { Color: #336699;/* text color */ Letter-Spacing: 3pt;/* padding */ Font-size: 9pt/* text size */ } --> </Style> </Head> <body> □< P id = "123"> the text here is the size of a pink 9pt </P> □< P id = "456"> the text here is the size of 4 PT from 9pt in blue. </P> |
|
Font Effect
Items in the font style: Introduction
Syntax:
Font-variant:Normal |
Small-caps Valid value:
Normal |
: |
Default Value. Normal font |
Small-caps |
: |
Small uppercase letter font |
Note: Specifies whether or not the text in the object is a small uppercase letter.
Ie4.0
Small-caps Small Size of uppercase letters.
This property
Currentstyle The object is read-only. Other objects can be read and written.
Corresponding script features:
Fontvariant .
Syntax:
Font-weight:Normal |
Bold |
Bolder |
Lighter |
100 |
200 |
300 |
400 |
500 |
600 |
700 |
800 |
900 Valid value:
Normal |
: |
Default Value. Normal font. Equivalent400. Declaring this value will cancel any previous settings |
Bold |
: |
Bold. Equivalent700. It is also equivalentBObject Function |
Bolder |
: |
RatioNormal> Rough |
Lighter |
: |
RatioNormal> Details |
100 |
: |
Font at least200So fine |
200 |
: |
Font at least100As rough300So fine |
300 |
: |
Font at least200As rough400So fine |
400 |
: |
EquivalentNormal |
500 |
: |
Font at least400As rough600So fine |
600 |
: |
Font at least500As rough700So fine |
700 |
: |
EquivalentBold |
800 |
: |
Font at least700As rough900So fine |
900 |
: |
Font at least800That rough |
Note: Set or retrieve the text font width of an object.
The function is determined by the specific font variable ing of the fonts installed on the client system. The system selects the latest match. That is to say, the user may
You cannot see the differences between different values.
Ie4.0 only supports
Normal And
Bold Value.
This property
Currentstyle The object is read-only. Other objects can be read and written.
Corresponding script features:
Fontweight .
============================
Text-Decoration:
None |
Underline |
Blink |
Overline |
Line-through Valid value:
None |
: |
Default Value. No Decoration |
Blink |
: |
Flashing |
Underline |
: |
Underline |
Line-through |
: |
Penetration |
Overline |
: |
Dashes |
Text-transform:
None |
Capitalize |
Uppercase |
Lowercase Valid value:
None |
: |
Default Value. No conversion occurred |
Capitalize |
: |
Converts the first letter of each word into uppercase letters, and the rest are not converted. |
Uppercase |
: |
Convert to uppercase |
Lowercase |
: |
Convert to lowercase |
● |
The red dot is displayed next to the ID-based style.Demo |
● |
Green points are displayed next to a class-based style. |
● |
Blue Points are displayed next to element-based styles. Demo DSfsdfsdfsdfsdsfdsdsdfdsdf all P labels are underlined |
|
A yellow dot is displayed next to a cascading style. ViewCodeEffect |
|
A circle is displayed around the dots of various colors to mark the style used in the current webpage. |
|
The @ symbol is displayed next to the imported external cascading style table. |
Publish website http://www.sr521.com http://hi.baidu.com/sr521
TD {
border: thick ridge #00ff00;
}< br> Expression web video tutorial section 9 Format menu [3] style
hello, everyone, as there are a lot of style content, I try to explain it to you as much as possible
Level 1 cascading style has specific instructions in the demonstration file cssdemo to see the operation
In order to save time, I will let you directly let's look at the example.
This style uses all the font parameters
I will explain to you one by one
1. font type, such as
2. font size
3. See results bar font scales
4 font styles
I won't type the demo.
I will explain some other parameters to you.
these are basically fonts. all attributes
next time I will introduce other attributes
thank you for your support.