CSS learning records (advanced)

CSS size attributes

The CSS size attribute allows you to control the height and width of an element. You can also increase the line spacing.

Attribute	Description
Height	Set the height of the element.
Line-height	Set the Row Height.
Max-height	Set the maximum height of an element.
Max-Width	Set the maximum width of an element.
Min-height	Set the minimum height of an element.
Min-Width	Set the minimum width of an element.
Width	Set the width of the element.

 

 

CSS Classification attributes (classification)

The CSS classification attribute allows you to control how to display elements, set where the image is displayed in another element, locate the element relative to its normal position, and use the absolute value to locate the element and the element visibility.

Attribute	Description
Clear	Sets whether the side of an element allows other floating elements.
Cursor	Specifies the pointer type displayed when it points to an element.
Display	Set whether and how to display elements.
Float	Define the direction in which the element floats.
Position	Place elements in a static, relative, absolute, or fixed position.
Visibility	Set whether the element is visible or invisible.

 

 

Pseudo-anchor

In browsers that support CSS, different links can be displayed in different states, including activity, accessed, inaccessible, and hovering.

a:link {color: #FF0000}     /* unvisited link */a:visited {color: #00FF00}  /* visited link */a:hover {color: #FF00FF}   /* mouse over link */a:active {color: #0000FF}   /* selected link */

Tip: In css definition, A: hover must be placed after a: link and a: visited.

Tip: In css definition, A: active must be placed after a: hover, which is valid.

Tip: the pseudo-class name is case insensitive.

 

Pseudo and CSS classes

Pseudo classes can be used with CSS classes:

a.red:visited {color: #FF0000}<a class="red" href="css_syntax.asp">CSS Syntax</a>

If the link in the above example has been accessed, it will be displayed in red.

 

@ Media rules

@ Media rules enable you to use different style rules for different media in the same style sheet.

The style in the following example tells the browser to display a 14-pixel verdana font on the display. However, if the page needs to be printed, the 10-pixel Times font will be used. Note: font-weight is set to bold, whether display or paper media:

@media screen{p.test {font-family:verdana,sans-serif; font-size:14px}}@media print{p.test {font-family:times,serif; font-size:10px}}@media screen,print{p.test {font-weight:bold}}</style>
 
Different media types
Note: media type names are case-insensitive.
Browser support:IE: Internet Explorer,F: Firefox,N: Netscape.
W3C: The number in the W3C column shows which CSS standard defines the attribute background (css1 or css2 ).


 

 
  
 
   
 
    
Media type
 
    
Description
 
   
 
   
 
    
All
 
    
Used for all media devices.
 
   
 
   
 
    
Aural
 
    
Used for speech and audio synthesizer.
 
   
 
   
 
    
Braille
 
    
It is used for blind people to use the dot-text method for tactile feedback devices.
 
   
 
   
 
    
Embossed
 
    
Blind persons used for paging use the dot-Print printer.
 
   
 
   
 
    
Handheld
 
    
Small handheld devices.
 
   
 
   
 
    
Print
 
    
Used for printers.
 
   
 
   
 
    
Projection
 
    
Used for scheme display, such as slides.
 
   
 
   
 
    
Screen
 
    
Used for computer display.
 
   
 
   
 
    
Tty
 
    
It is used to use fixed-density letter raster media, such as telex typewriters and terminals.
 
   
 
   
 
    
TV
 
    
A device of the TV type.