The full name of CSS is Cascading Style Sheet. Cascading style sheets.
1. Four implementation methods of CSS:
1. Embedded type:
2. External link type:
3. Imported type
4. Attribute type:
2. CSS definition:
Select object {attribute 1: value 1; attribute 2: value 2; attribute 3: value 3; attribute n: value n...}
like:
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
Three. Four selection objects
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4. Special objects (a:hover a:link a:visited a:active)
1.HTML selector
HTML selector is the markup character of HTML, such as: DIV, TD, H1. The scope of the HTML selector is all the tags in all pages to which the style is applied.
example:
td
{
color: #FF0000;
}
-->
Note: The function of the code is to automatically turn the text in the table cells red.
2.class selector
To define a class selector, you need to add a dot "." to its name. Such as ".classname". The scope of the class selector is all tags containing "class="classname"".
example:
.fontRed
{
color: #FF0000;
}
-->
Note: There is no "class="fontRed"" in the second one, so the text does not turn red.
3.ID selector
To define an ID selector, you need to add a dot "#" to its name. Such as "#IDname". The scope of the ID selector is all tags containing "ID="classname"".
Example:
#fontRed
{
color: #FF0000;
}
-->
Note: There is no "ID="fontRed"" in the second one, so the text does not turn red.
4. Special objects There are four types of special objects, which are set for linked objects:
a:hover hyperlink when the mouse is moved over
a:link regular, non-accessible hyperlink
a:visited visited hyperlink
The scope of the a:active hyperlink special object when the mouse is clicked is all markers (this sentence is subject to discussion, because there will soon be a method to overturn the word "all").
example:
a:hover
{
color: #0000FF;
text-decoration: underline;
}
-->
Pay attention to the following, it is very useful! ! !
a.classname:hover
a#IDname:hover
These two writing methods are used with .classname and #IDname respectively. Its scope becomes all tags containing "class="classname"" or "ID="IDname"". This writing method can help you achieve multiple a:hover effects on the same page. You can take a look at the difference between the navigation bar text on the homepage of Yiwang and the ordinary article title when you mouse over it.
4. Application:
1. Automatically apply markers
2. Special class class="NAME"
3.ID ID="IDname"
4. Special objects automatically apply 5. CSS properties
There are many CSS properties, such as color, which is the most used above, indicating the color of text. background-color represents the background color. This is the most important, but since it is not difficult, just refer to the relevant manual.
CSS Tag Properties/Property Reference Here is a list of currently supported style sheet (CSS) tag properties.
CSS tag attributes/attributes
behavior attributes behavior
font and text attribute direction
direction [di?rek??n] guide
font
font-family
font size
font-style
font-variant [?v??ri?nt] variant
font-weight [weit] weight
ime-mode [m?ud] mode
layout-grid [?leiaut] layout typesetting [ɡrid] grid
layout-grid-char [t?ɑ:](burn..)
layout-grid-line
layout-grid-mode
layout-grid-type
letter-spacing [?let?] letter [?speisi?] spacing
line-break [breik] break
line-height [hait] height
min-height
ruby-align [?ru:bi] ruby
ruby-overhang [??uv??hæ?] stick out
ruby-position [p??zi??n] positioning
text-align
text-autospace [speis] automatic spacing
text-decoration [?dek??rei??n] decoration
text-indent [in?dent] indent typesetting
text-justify [?d??stifai] alignment
text-kashida-space
text-overflow [??uv??fl?u] overflow
text-transform [træns?f?:m] change
text-underline-position
unicode-bidi [?bi:di]
vertical-align
white-space
word-break
word-wrap
writing-mode
color and background-attachment
background-color
background-image
background-position
background-position-x
background-position-y
background-repeat
color
layout attribute border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse*
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
clear
float
layout-flow
margin
margin-bottom
margin-left
margin-right
margin-top
padding
padding-bottom
padding-left
padding-right
padding-top
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
table-layout
zoom
classification attribute display
list-style
list-style-image
list-style-position
list-style-type
positioning attribute bottom
clip
height
left
overflow
overflow-x
overflow-y
position
right
top
visibility
width
z-index
print attribute page
pageBreakAfter
pageBreakBefore
filter attribute filter
pseudo-class and other attributes: active
@charset
cursor
:first-letter
:first-line
@font-face
:hover
@import
!important
:link
@media
@page
:visited
ways to achieve CSS image border effects
. The simpler method is to directly define the border (border) for img in the CSS file. For example, I defined it in CSS:
img.framed {
padding: 6px;
border: 1px solid #CCCCCC;
background-color: #FFFFFF; }
Then in the HTML file, or when the web page is updated, using class="framed" for the embedded image definition will have the corresponding border effect.
The advantage of the above method is that it is relatively simple, but the effect achieved is relatively monotonous and may not necessarily achieve satisfactory results and some special effects, such as shadows, color changes, etc. This can be done very well by using image substitution and positioning translation. I won’t go into details here. I believe that once you learn basic CSS, it will not be difficult to challenge more advanced CSS effects.
Sorting out the css syntax for table borders.
We know that Dreamweaver does a great job in making tables, but at some point it still has to be combined with css to achieve some specific effects. Let’s sort out the css syntax for table borders first, and then introduce it separately. How to beautify the border of a table using css.
The specificcss syntax for table borders
includes: top border width, right border width, bottom border width, left border width, border width, border color, border style, top border, bottom border, left border, right border, border, width , height, related labels, etc.
1. Top border width
syntax: border-top-width: <value>
Allowed values: thin | medium | thick | <length>
Initial value: medium
Applicable to: All objects
Backward compatibility: No
The top border width attribute is used to specify a The width of the element's upper border. The value can be one of three keywords, none of which are affected by font size or length, and can be used to implement proportional widths. Negative values are not allowed. It can also be used to abbreviate the top border, the width of the border, or the properties of the border.
2. Right border width
syntax: border-right-width: <value>
Allowed values: thin | medium | thick | <length>
Initial value: medium
Applicable to: All objects
Backward compatibility: No
The right border width attribute is used to specify the element The width of the right border. The value can be one of three keywords, none of which are affected by font size or length, and can be used to implement proportional widths. Negative values are not allowed. Can also be used to abbreviate the right border, border width, or border properties.
3. Bottom border width
syntax: border-bottom-width: <value>
Allowed values: thin | medium | thick | <length>
Initial value: medium
Applicable to: All objects
Backward compatibility: No
The bottom border width attribute is used to specify the element The width of the bottom border. The value can be one of three keywords, none of which are affected by font size or length, and can be used to implement proportional widths. Negative values are not allowed. It can also be used to abbreviate the bottom border, the width of the border, or the properties of the border.
4. Left border width
syntax: border-left-width: <value>
Allowed values: thin | medium | thick | <length>
Initial value: medium
Applicable to: All objects
Backward compatibility: No
The left border width attribute is used to specify the element The width of the left border. The value can be one of three keywords, none of which are affected by font size or length, and can be used to implement proportional widths. Negative values are not allowed. It can also be used to abbreviate the left border, the width of the border, or the properties of the border.
5. Border width
syntax: border-width: <value>
Allowed values: [ thin | medium | thick | <length> ]{1,4}
Initial value: Undefined
Applicable to: All objects
Backward compatibility: No
Border width attribute Sets the bounds of the element with one to four values, where the value is a keyword or length. Negative lengths are not allowed. If all four values are given, they apply to the top, right, bottom, and left border styles respectively. If a value is given, it will be applied to each edge. If two or three values are given, the omitted value is equal to the opposite side. This property is shorthand for the top, right, bottom, and left properties. You can also use the abbreviated border attribute.
6. Border color
syntax: border-color: <value>
Allowed values: <color>{1,4}
Initial value: The value of the color attribute
is applicable to: All objects
Backward compatibility: No
The border color attribute sets the border color of an element . You can use one to four keywords. If all four values are given, they apply to the top, right, bottom, and left border styles respectively. If a value is given, it will be applied to each edge. If two or three values are given, the omitted value is equal to the opposite side. You can also use the abbreviated border attribute.
7. Border style syntax
: border-style: <value>
Allowed values: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
Initial value: none
Applicableto
: All objects
Compatible with: No
The border-style property is used to set the style of an element's border. This property must be used to specify a visible border. You can use one to four keywords. If all four values are given, they apply to the top, right, bottom, and left border styles respectively. If a value is given, it will be applied to each edge. If two or three values are given, the omitted value is equal to the opposite side. You can also use the abbreviated border attribute.
none: no style;
dotted: dotted line;
dashed: dashed line;
solid: solid line;
double: double line;
groove: groove line;
ridge: ridge;
inset: concave;
Outset: convex.
8. Top border
syntax: border-top: <value>
Allowed values: <top border width> || <border style> || <color>
Initial value: Undefined
Applicable to: All objects
Backward compatibility: No
Top border attribute Is a shorthand for setting the width, style, and color of an element's border. Note that only one border style can be given. You can also use the abbreviated border attribute.
9. Right border
syntax: border-right: <value>
Allowed values: <right border width> || <border style> || <color>
Initial value: Undefined
Applicable to: All objects
Backward compatibility: No
Right border attribute Is a shorthand for setting the width, style, and color of an element's right border. Note that only one border style can be given. You can also use the abbreviated border attribute.
10. Bottom border
syntax: border-bottom: <value>
Allowed values: <Bottom border width> || <Border style> || <Color>
Initial value: Undefined
Applicable to: All objects
Backward compatibility: No
Bottom border attribute Is a shorthand for setting the width, style, and color of an element's bottom border. Note that only one border style can be given. You can also use the abbreviated border attribute.
11. Left border
syntax: border-left: <value>
Allowed values: <left border width> || <border style> || <color>
Initial value: Undefined
Applicable to: All objects
Backward compatibility: No
Left border property Is a shorthand for setting the width, style, and color of an element's left border. Note that only one border style can be given. You can also use the abbreviated border attribute.
12. Border
syntax: border: <value>
Allowed values: <border width> || <border style> || <color>
Initial value: Undefined
Applicable to: All objects
Backward compatibility: No
The border property is a setting A shorthand for the width, style, and color of an element's border.
Examples of border declarations include:
H2 { border: groove 3em }
A:link { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active { border: thick double red }
The border attribute can only set four kinds of borders; it can only give the width and style of one set of borders. In order to give different values for the four borders of an element, web page creators must use one or more attributes, such as: top border, right border, bottom border, left border, border color, border width, border style, top Border width, right border width, bottom border width, or left border width.
13. Width
syntax: width: <value>
Allowed values: <length> | <percent> | auto
Initial value: auto
Applicable to: Block level and replacement elements
Backward compatibility: No
The initial value of the width attribute is "auto", that is Is the original width of the element (there is the width of the element itself). The percentage refers to the width of the parent element. Negative length values are not allowed.
14. Height
syntax: height: <value>
Allowed values: <length> | auto
Initial value: auto
Applicable to: Block level and replacement elements
Backward compatibility: No
The initial value of the height attribute is "auto", which is the element's The original height (there is the height of the element itself). The percentage refers to the width of the parent element. Negative length values are not allowed.
15. Regarding the label
table label, the definition of the entire table style should be placed in the table;
td cell label, the definition of cell style should be placed in td.
BODY is the main element of the web document. All visible ranges are within the <BODY> element.
BUTTON The button of the form field can be in the form of "submit", "reset", etc.
DIV defines an area on the web page. The height, width or absolute position of this area are known by
IMG image element, specify the source of the image by specifying the "src" attribute
INPUT input form field
MARQUEE moving subtitle effect
SPAN defines an area on the web page. The height, width or absolute position of this area are known by
TEXTAREA text area
TFOOT multi-line input text box
TH table header cell
THEAD table title
TR table row