Getting started with CSS

6.1 Getting Started with CSS

6.1.1 What is CSS?

CSS (Cascading Style Sheet) is a standard method for formatting web pages. It extends the HTML function so that web designers can set the webpage format more effectively.

6.1.2 unit of CSS attributes

6.1.2.1 length unit

Units used to describe the length in CSS include:

• Cm
• Mm
• Em the width of m letters in the current font
• Ex the height of the x letter in the current font
• In inch
• Pc 1 pc = 12 o'clock
• Pt point, 1pt = 1/72 inch
• Px pixels

6.1.2.2 percentage unit

In CSS, the absolute logarithm can be used to specify the unit (as described above), and the relative logarithm can also be used to specify the unit. For example:

P {line-height: 150%}

Indicates that the row height is 1.5 times higher than the standard row height.

6.1.2.3 color

The stacked style sheet allows web designers to specify a color in the following ways:

• Use standard color name directly for color name
• # RRGGBB uses a 6-digit hexadecimal number to represent the color
• # RGB uses a three-digit hexadecimal number to represent the color. It is a shortcut of # RRGGBB. For example, # 00FFEE can be expressed as # 0FE.
• Grb (rrr, ggg, bbb) uses a decimal number to represent the color.
• Grb (rrr %, ggg %, bbb %) uses percentages to indicate the color.

6.2 CSS style definition

The style table items are composed of the following:

Selector {property1: value1; property2: value2 ;......}

Selector indicates the content of the style to be applied. property indicates the style attribute defined by CSS standards, and value indicates the value of the style attribute.

Selector type: HTML tag, user-defined class style, custom ID, and virtual class.

6.2.1 HTML tag selector

HTML tags are the most typical selector type. Web designers can apply style definitions to certain HTML elements. For example:

H1 {text-align: center; font-family: _ gb2312}

If you apply the same style to different selector, you can use the grouping method to simplify the style definition. For example:

H1 {color: # ff0000}

H2 {color: # ff0000}

H3 {color: # ff0000}

It can be simplified:

H1, H2, H3 {color: # ff0000}

6.2.2 contextual HTML tag selector

If you need to set a specific style rule for a tag located within a tag, you should specify selector as an HTML tag with a contextual relationship. For example, to make element B in the CODE tag within the P tag have a red attribute, the following format should be used:

P code B {color: red}

6.2.3 User-defined class selector

You can use classes to create multiple styles for a single HTML tag. The syntax format is as follows:

Selector. classname {property: value ;...}

Example: H1.rr {color: red}

And then reference it in the webpage, as shown below:

<H1 class = "rr"> This title is Red </H1>

If you want to define a class that is applied to all the tokens, you can simply use a period followed by the class name. The syntax format is as follows:

. Classname {property: value ;...}

For example:. rr {color: red}, which must be referenced in the webpage, as shown below:

<P class = "rr"> the text in this section is Red </P> <H1 class = "rr"> This title is Red </H1>

6.2.4 user-defined ID selector

To include an ID style in the style definition, use a "#" as the prefix of the ID name. The syntax format is as follows:

# IDname {property: value ;...}

After the ID style is defined, use the id attribute within the tag that references the style. For example:

# Rr {color: red} <P id = "rr"> the text in this section is Red </P> <H1 id = "rr"> This title is Red </H1>

Note: There is no difference in the effect between using. classname and using # IDname, but it is best to use only one of them to avoid confusion.

6.2.5 virtual class selector

For the tag, you can use the virtual class to set the display mode of different types of hyperlinks. Different types of hyperlinks refer to the Accessed, unaccessed, activated, and four statuses with the mouse pointer hovering over them. The selector of its virtual class is as follows:

• A: link or: link unaccessed hyperlink
• A: visited or: visited hyperlink that has been accessed
• A: active or: active when the hyperlink is selected
• A: hover or: hover move the cursor over the hyperlink

6.3 Use CSS in webpages

6.3.1 directly nest style information in the tag

Style attributes can be used to embed style definitions directly in HTML tags.

<Tag style = "property1: value1;...">

For example:

<P style = "font-size: 14pt; color: red"> The text that is located only within the tag is affected by the style </P>

6.3.2 define STYLE information in the STYLE tag

The most common method for applying CSS to a webpage is to use the STYLE tag in the HEAD tag and then define the STYLE in the STYLE tag. The syntax format is usually as follows:

<Head> ...... <Style> [<! --] Selector1 {property1: value1 ;...} Selector2 {property1: value1 ;...} ...... SelectorN {property1: value1 ;...} [-->] </Style> </Head>

6.3.3 link the style information in the external style sheet

If you want to use the same style in multiple webpages, the best way is to put the style to be used in the webpage separately in a file for definition, then, reference the style in the link.

To reference an external style sheet, use the LINK identifier in the HEAD identifier to LINK to the external style sheet by specifying the corresponding attribute. The LINK token is used as follows:

<LINK rel = "stylesheet" type = "text/css" href = URL of the style sheet File>

Rel specifies the relationship between linked files. When the chain sample table file (.css file) is used, the value is always "stylesheet". The type attribute specifies the MIME type of the linked file, and its value is always "text/css "; the href attribute specifies the URL of the style sheet file to be linked.

6.3.4 style priority

If multiple styles are modified at the same time, if the styles conflict, the high-priority style is used. If there is no conflict, the overlapping style effect is used.

The style priority follows the "nearest priority" principle, that is, the closer the style to the modified object, the higher the priority.

6.4 CSS attributes

6.4.1 font and text attributes

6.4.1.1 font attributes

The font attributes in CSS include:

• The font-family attribute is used to determine the font list to be used. The value can be a font name or a font family name, separated by commas.
• Font-size is used to control the font size. It has four types of values:
  • Absolute size. Possible values include:
    • Xx-small
    • X-small
    • Small
    • Medium
    • Large
    • X-large
    • Xx-large
  • Relative size. Possible values:
    • Smaller is No 1 smaller than the upper-level font
    • Larger is No. larger than the upper-level font
  • Specify the length directly. For example: P {font-size: 12px}
  • Percentage, for example, H1 {font-size: 70%} indicates 70% of the H1 standard font.
• Font-style is used to specify the font of an element. Value:
  • Normal font (default)
  • Italic indicates italic
  • Oblique indicates italics
• Font-variant specifies that the browser displays the font variations of the specified element. This property has two values:
  • Normal default value
  • Small-caps indicates that the lowercase letters in the text are displayed in uppercase, but the size is smaller than the standard uppercase letters.
• Font-weight defines the font width.
• Font allows you to set all the font attributes described above at one time. The attributes are separated by spaces.

6.4.1.2 text attributes

The text attribute is used to control the text paragraph format.

• Letter-spacing is used to set the character spacing.
• Line-height is used to set the line spacing.
• Text-align
• Text-decoration modifies the text of a specific option. The value can be:
  • None indicates no modification (default)
  • Underline
  • Overline
  • Line-through and strikethrough
  • Blink indicates adding a flickering effect
• Text-indent
• Text-transform is used to convert text. The value can be:
  • Default value of none
  • The first letter of each word in capitaliae selected text is displayed in uppercase;
  • All letters in uppercase are displayed in uppercase.
  • All lowercase letters are displayed in small

6.4.2 color and background attributes

• Color controls the color of text.
• Background-color is used to set the background color of an HTML element.
• Background-image is used to set the background pattern of HTML elements.
• Background-attachment controls whether the background pattern is scrolled along with the content. The value can be:
  • Scroll indicates that the background is rolled along with the content (default)
  • Fixed indicates that the background is static.
• Bachground-position is used to specify the position in the upper left corner of the correlation between the background pattern and the relative area.
• Background-repeat specifies whether the background pattern is repeatedly displayed and how to repeat the background pattern. Optional values:
  • Repeat
  • Repeat-x
  • Repeat-y
  • No-repeat
• The background is similar to font. You can set the above attributes at the same time.

6.4.3 layout attributes

6.4.3.1 blank surrounding page elements

The border, border, and fill spaces are included around any HTML element. Fill is the content closest to the element, followed by the border, the most peripheral is the border. The margin, border, and background attributes of CSS are used to set the preceding three areas.

6.4.3.2 border attributes

CSS border attributes include:

• Border
• Border-bottom
• Border-bottom-color
• Border-bottom-style
• Border-botton-width
• Border-color
• Border-left
• Border-left-color
• Border-lefy-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

6.4.3.3 border attributes

CSS boundary attributes include margin, margin-bottom, margin-left, margin-right, and margin-top.

6.4.3.4 fill attributes

The CSS filling attributes include padding, padding-left, padding-right, padding-top, and padding-bottom.

6.4.3.5 floating attributes

CSS floating attributes include:

• Float can float the content of an element to the edge of the page. The value can be:
  • None
  • Left
  • Right
• Clear sets whether the floating element is allowed next to the element. The value can be:
  • None
  • Left
  • Right
  • Both

6.4.4 positioning and display attributes

6.4.4.1 positioning and width/height attributes

Positioning attributes include:

• Position is used to specify the position of an element on the page. Its value can be:
  • Static default value
  • Relative
  • Absolute
• Top
• Bottom
• Left
• Right
• Z-index

The width and height attributes can control the width and height of an element. In this case, the position attribute must be specified as absolute. They can be length or percentage.

6.4.4.2 display attributes

In CSS, two attributes can be used to control the display and hiding of elements.

• Display is used to determine whether an element should be drawn on a page. It has multiple values, but in a general browser, only one none can be used. When an element is hidden using an attribute, not only the element is invisible, but the element does not occupy any space.
• Visibility is used to control the visibility of elements. Values include:
  • Visible
  • Hidden hide
  • Inherit inheritance (default)

Unlike display, when an element is hidden, the original display space is still reserved for the element.

6.4.5 list attributes

The list attribute is used to set the list format on a webpage. The list attributes in CSS include:

• List-style-image: specifies the image as the list project symbol. The value can be:
  • Default value of none
  • Url (imageURL)
• List-style-position: sets the position of the list element tag. The value can be:
  • Inside
  • Outside
• List-style-type is used to set the style of the project symbol and number. The values are as follows:
  • Disc solid black Garden Point
  • Circle hollow circle
  • Square black block
  • Decimal
  • Lower-roman lowercase roman numerals
  • Upper-roman upper-case roman numerals
  • Lower-alpha lowercase letters
  • Upper-alpha uppercase letters
  • None
• List-style is used to set the preceding attributes at a time.

6.4.6 mouse attributes

The mouse property uses the cursor property to set the shape of the mouse pointer moving on the object. The values are as follows:

• Auto browser determines which pointer to display based on the current text
• Crosshair simple cross
• Default pointer with platform (usually arrow)
• Hand shape
• Move indicates the cross arrow that an object is moved.
• *-Resize indicates the front of the edge to be moved (* n, ne, nw, s, se, sw, e, and w, represent north, northeast, northwest, South, Southeast, Southwest, East, and West respectively)
• Text editing text pointer (usually I-shaped)
• Wait indicates that the program is busy. You need to wait for the hourglass icon
• Help indicates the question mark icon that the user can get help.

6.5 CSS filter effect

Filter is an extension of CSS. It can apply specific effects to text containers, images, or other objects.

6.5.1 filter attribute list

The filter effect is defined by the filter style table attribute. Its format is as follows:

Filter: filter name (parameter)

The parameters are used to control the specific filtering effect.