CSS example

CSS Background

Set the background color of the page

Set the background color of different elements

Set an image as the background of the page

Wrong background picture

How to repeat the background image horizontally

How to locate the background image

A fixed background picture ( This image will not scroll with the rest of the page )

Declare background properties

Advanced background examples

Interpretation of background properties

CSS text

Set the text color of different elements

Text alignment

Remove link underline

Decorative text

Controls the letters in the text

Indent text

Specifies the space between characters

Specifies the space between rows

Set the text direction of the element

Add spaces between words

Disable text wrapping within an element

Vertical alignment of internal text image

 

Text Interpretation of attributes

CSS Your font

Set the font of the text

Set font size

use px Set the font size

use em Set the font size

Use percentages and em Set the font size

Set font style

Set the font type

Set the font thickness

All font attributes in a declaration

 

Font Interpretation of attributes

CSS link

To access / Added different colors to links not visited

Use text decoration on links

Specifies the background color of the link

Add other styles to hyperlinks

senior - Create a link box

 

Explanation of link properties

CSS list

All the different list items in the list are marked

Sets the image to mark as a list item

Use a cross browser solution to set the image of a list item tag

All list properties in a declaration

css Remove list item li Default style

 

Explanation of list properties

CSS form

Specify the name of a table Th,TD Element and black border

use border-collapse

Specify the width and height of the table

Set the horizontal alignment of the content ( Text alignment )

Set the vertical alignment of the content ( Align vertically )

appoint TH and TD Element filling

Specifies the color of the table border

Set the position of the table title

Create a strange table

 

Explanation of table attributes

CSS Box model

The total width of the specified element is 250 pixel

Using a cross browser solution, specify that the total width of the element is 250 Pixel

 

Explanation of box model

CSS frame

Set the width of the four borders

Set the width of the top border

Set the width of the bottom border

Set the width of the left border

Set the width of the right border

 

Set the style of the four borders

Set the style of the top border

Set the style of the bottom border

Set the style of the left border

Set the style of the right border

 

Set the color of the four borders

Set the color of the top border

Set the color of the bottom border

Set the color of the left border

Set the color of the right border

 

All border properties in a declaration

 

Set different borders on each side

All top border properties in a declaration

All lower border properties in a declaration

All left border properties in a declaration

All right border properties in a declaration

 

Explanation of border properties

CSS outline

Around an element (outline), Draw a line

Set the style of the profile

Set outline color

Sets the width of the profile

 

Interpretation of contour attributes

CSS Margin

Specify the margin of an element

Margin abbreviation property

The value of the text top margin setting is in centimeters

Use the percentage value to set the bottom edge of the text

Use the centimeter value to set the left margin of the text

 

Margin Interpretation of attributes

CSS fill

Sets the left padding of the element

Sets the right padding of the element

Set the top fill of the element

Set the bottom fill of the element

All populated properties in a declaration

 

padding Interpretation of attributes

CSS Grouping and nesting

Group selector

Nested selectors

 

Grouping and nested interpretation

CSS size

Sets the height of the image using pixel values

Set the height of the image using a percentage

Use pixel values to set the width of the element

Use percentage to set the width of the element

Sets the maximum height of the element

Sets the maximum width of the element using pixel values

Use the percentage to set the maximum width of the element

Set the minimum height of the element

Use pixel values to set the minimum width of the element

Use the percentage to set the minimum width of the element

 

Interpretation of size properties

CSS Show

How to hide an element (visibility:hidden)

How not to display elements (display:none)

How to display inline elements of an element

How to display a block element of an element

How to use the form collapse attribute

 

Display Interpretation of attributes

CSS location

The position of the element relative to the browser window

Relative positioning of elements

Absolute positioning of elements

Overlapping elements

Set the shape of the element

How to use the scroll bar to display the overflow content in the element

How to set up browser automatic overflow processing

Use pixel values to set the top of the image

Sets the bottom of the image using pixel values

Use pixel values to set the left side of the image

Use pixel values to set the right side of the image

Change cursor

 

Interpretation of positioning properties

CSS float

Simple use float attribute

Add borders and margins to the image and float to the left of the paragraph

The title and picture float to the right

Float the first letter of the paragraph to the left

use float Property to create a picture gallery

open float - clear attribute

Create a horizontal menu

Create a web page without a table

 

Float Interpretation of attributes

CSS Align elements

use margin Middle adjustment of

Left / Align right position

Use a cross browser solution , Set left / Align right position

Left / Align right , float

Use a cross browser solution , Set left / Align right position , float

 

Align attribute interpretation

CSS Generated content

Put the bracketed URL use content Property is inserted after each link

The number of chapters and subsections is " The second is 1 section ","1.1","1.2" etc.

quotes Property specifies quotation marks

CSS Pseudo class

Add hyperlinks of different colors

Add other styles to hyperlinks

use : focus

:first-child - Matched the first p element

:first-child - It matches p The first of the elements i element

:first-child - Matched the first p All in the element I element

use :lang

 

Interpretation of pseudo classes

CSS Pseudo elements

Set the first letter of the text as a special letter

Set the first line of text to special

Set the first letter of the first line of text as special

use : Insert something before an element

use : Insert something after an element

 

Interpretation of pseudo elements

CSS navigation bar

Full style of vertical navigation bar

Full style of horizontal navigation bar

 

Explanation of the navigation bar

CSS Picture gallery

Picture gallery

 

The picture gallery explains

CSS The opacity of the image

Create a transparent image - Mouse over effect

Create a transparent box with background image and text

 

Image opacity interpretation

CSS Image mosaic

Image mosaic

Image mosaic - Navigation list

The hover effect is combined with the image

 

Image mosaic interpretation

CSS Property selector

Select with title Attribute element

Select the title = An element with a specific value

Select the title = An element with a specific value ( use (~) Separate attributes and values )

Select the title = An element with a specific value ( use (|) Separate attributes and values )

 

Property selector interpretation


CSS Application examples