Web Chapters 7-9 Summary

Chapter VII

  1. CSS consists of simple statements, called rules, each of which provides styles for some selected HTML. Example: h1,h2{color:gray;}, h1, h2 are called selectors, and styles are applied to h1 and h2 elements.
  2. The easiest way to include a style in HTML is to use the style tag, and for HTML and fairly complex sites, it may be necessary to link to an external style sheet. Remove style from the style sheet. <link type="text/css" rel="stylesheet" href="index.css">Then use the link element in HTML to link.
  3. Inheritance: Many properties can be inherited. If an inheritable property is set for the body element, the child elements of the body will inherit this property.
  4. If you want to create a specific rule for an element, you can override the properties inherited by the element.
  5. Elements can be added to a class using the class attribute. </li> </ol> <pre><code><p class="greentea">

    p.greentea{color:green;}The text in greentea is all green.

    1. Use .classname to select all elements belonging to this class.

    2. <p>Element p belongs to three classes, if one rule is more specific than the others, then this rule wins, if the degree of specificity is the same, then the later rule wins.

    3. CSS validation tool: https://jigsaw.w3.org/css-validator/validator
      html validation tool: https://validator.w3.org/nu/#textarea.

    chapter eight

    1. CSS provides many properties to control the appearance of fonts, including font-family, font-weight, font-size and font-style.
    2. The font-family is called a font family, and the ones used for the web include serif, sans-serif, monospase, cursive and fantasy. The first two are the most commonly used, and each font family includes a large number of fonts.
    3. Specify candidate fonts in the font-family CSS property, in case the user doesn’t have your preferred font installed, and the body{font-family:Verdana,Geneva,Arial,sans-serif;}last font should be specified as a generic font that the browser can substitute if no other font is found.
    4. If you want to use a font that the user may not have installed by default, you can use the @font-face rule in CSS (add web font to the page).
    5. Font sizes are usually specified in pixels (px), em, percentages or keywords. The use of em and % means that the font size is specified relative to the font size of its parent element. Using relative font sizes can make pages more maintainable.
    6. Use the font-size keyword in the body rule to set the base font size so that the user wants the text to be larger or smaller and all browsers scale the font size proportionally.
    7. font-weight: bold, bold text. font-style: italic; (italic style), font-style: oblique; (oblique style).
    8. Web colors are obtained by mixing different amounts of red, green, and blue. body{background-color:rgb(80%,40%,0%);}Orange body{background-color:rgb(204,102,0);(value designation); #cc6600 (hexadecimal code designation), where the first two digits represent the red quantity, the next two digits represent the green quantity, and the last two digits represent the blue quantity.
    9. Color table: http://en.wikipedia.org/wiki/web_color.
    10. Text can be underlined using the text-decoration property. line-through: strikethrough, underline overline underline underline, none remove decoration.

    Chapter nine

    1. CSS uses the box model to control how elements are displayed. A box consists of a content area and optional padding, borders, and margins. Padding and margin sizes can be expressed in pixels or percentages, and borders can be set in pixels or specified with the keywords thin, medium and thick.
    2. For the inner and outer margins and borders, CSS provides corresponding properties so that the upper, lower, left, and right sides can be controlled separately.
    3. The border-radius property can create rounded corners for borders.
    4. The line-height property can add line spacing.
    5. The background-image property places an image on the element’s background.
    6. box-sizing: border-box; the width does not change and will not change with the padding.
    7. The background-position and background-repeat properties can set the background position and tile behavior (the background will be tiled by default), background-attachment: scroll-scroll (fixed-fixed).
    8. Use the class attribute for elements that you want to style in groups, use the id attribute to give the element a unique name, and use the id attribute to give the element a unique style.
    9. An element cannot have multiple ids, and multiple elements on the page are not allowed to have the same id.
    10. Use the id selector to select elements by id, p#someid, blockquote#someid, (id has different specified objects on different pages, and different rules need to be applied according to different types of elements on the page)
    11. An element can only have one id, but it can belong to multiple classes.
    12. Multiple style sheets can be used in html. If two style sheets contain conflicting attribute definitions, the style sheet linked last in the HTML file takes precedence.
    13. Use a media query in the link element: < link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width: 480px)">On devices with screens, the screen width should not exceed 480 pixels. Or use the @media rules in CSS to specify device @media screen and(min-device-width: 481px){#guarantee{margin-right:250px;}}screen widths greater than 480px will use these rules. @media print{body{font-family:Times,serif;}}If you print this page, use these rules.
    14. If the CSS file is quite large, use the link element to specify a different style sheet.

Leave a Comment

Your email address will not be published. Required fields are marked *