HTML5 and CSS3 basic tutorial version 8 study notes 7 ~ Chapter 10, html5css3

HTML5 and CSS3 basic tutorial version 8 study notes 7 ~ Chapter 10, html5css3
Chapter 7: CSS construction block CSS contains attributes (font-size, color) that control the basic format, and attributes (position, float) that control the layout ), it also determines the print control elements of the page feed when the visitor prints. CSS also has many dynamic attributes that control the display or disappearance of projects. They can be used to create lists and other interactive components. Create a style rule. Each rule in the style sheet has two parts: Selector and declaration block. The selector determines which blocks are affected. It declares that a block is composed of one or more Attribute-value pairs and specifies what to do. Add comments/* comments */to the style rule, which can be multi-row comments. Place the comments in any position of the style sheet. They must appear in pairs and cannot be nested. Understanding inheritance is an important concept in CSS. The browser interprets HTML as a document tree. When CSS attributes are applied to an element, not only the element but also its branch element are affected. For most attributes, you can use the inherit value to forcibly inheritInherited CSS attributesText:Color: color, except for element a, direction: direction font: font-family: font family-size: font size font-style: Used to set italic font-variant: used to set the small uppercase letter font-weight: used to set the bold letter-spacing: letter spacing line-height: line height text-align: used to set the mode of text-indent: used to set the first line indent text-transform: used to modify the case sensitivity visibility: visibility white-space: used to specify how to handle spaces word-spacing: word spacingList:List-style: list style list-style-image: used to specify the custom tag list-style-position for the list: used to determine the location of the list tag list-style-type: used to set the tag of the ListTable:Border-collapse: used to control whether the borders of adjacent cells in the table are merged into a single border-spacing: used to specify the gap size between the border of the table caption-side: used to set the table title location empty-cells: Used to set whether to display empty cells in the tablePage settings:Orphans: used to set the minimum number of lines to be retained at the bottom of the page when the element is paginated internally. page-break-inside: used to set the paging mode inside the element. widows: used to set the minimum number of rows to be retained at the top of the page when the element is paged internallyOthers:Cursor: The mouse pointer quotes: used to specify the quotation mark style cascade: when a rule conflict occurs and the rule is not defined as a conflict, multiple rules are combined and applied to the element together. 1. When the written rules conflict with the default browser rules, the written rules shall prevail. 2. The written rules conflict with each other. CSS uses the stacked principle to consider the particularity, order, and importance, to determine which rule should take effect in conflicting rules. (1) the degree to which a selector is specified for a special rule. The more special the selector is, the stronger the rule. In case of conflict, rules with strong particularity are prioritized. The id selector is the most special. Suggestion: Use the class selector in the style sheet to avoid using the ID selector. It will reduce the flexibility (2) the priority of the order that appears later is high. Rules directly applied to HTML elements are considered to appear later than rules with the same characteristics in external style sheets or inserted at the top of HTML documents. (3) importance: a special rule can be declared to cover all the rules in the system. This rule is more important than all other rules. You can also add it at the end of a declaration! Important, for example, p {color: red! Important;} Not recommended attribute value 1. inherit: indicates that the attribute value is the same as the value set by the corresponding parent element for this attribute. P {border: inherit} (most attributes earlier than IE8 do not support inherit values) 2. predefined values. Most CSS attributes have predefined values available for use. For example, float can be set to left, right, or none. 3. Length and percentage. Em, px, pt, percentage. The length of an em is approximately equal to the font size of the corresponding element. (When em is used to set the font-size attribute, its value inherits the font size of the corresponding parent element.) 4. Pure numbers. Only a few CSS attributes receive numbers without unit, the most common options are line-height, z-index, opacity5, URL6, CSS color 7, RGB8, hexadecimal number 9, and more. The specified color method provided by CSS3 is as follows: RGBA, HSLA, and HSLRGBA: A representing alpha transparency is added on the basis of RGB. All modern browsers are supported, not earlier than IE9. Format: color: rgb (127, 127), color: rgba (0.75,) HSL and HSLAHSL: hue, saturation, brightness (lightness ). Color Range: 0-360, saturation and brightness are percentages: 0-100% format: property: hsl (hue, saturation, lightness); HSLA format: property: hsla (hue, saturation, lightness, alpha transparency)chapter, the operating sample table must be kept as a. CSS extension, file external style sheet encoded with UTF-8 can be referenced through links, can also be imported (via import), not recommended import, poor performance linked to external style sheet Syntax:

<link rel="stylesheet" href="url.css">

You can use multiple link elements to load multiple style sheets on the page. If there is a conflict, the rules of the subsequent files will prevail. Create an embedded style sheet <style> style sheet </style> and place it in the head section. If the style element appears only after the link element, the style embedded in the style sheet will overwrite the style in the external style sheet. Apply inline style sheets to define style attributes in HTML elements. Inline styles take precedence over all other styles, unless the conflicting styles are marked elsewhere! The relationship between an important style cascade and an sequentially embedded style sheet and an external style sheet with any link depends on their relative position in HTML. If a conflict occurs, the occurrence order is later. The Inline style has the highest priority. Once applied, all conflicting styles are overwritten. Conflicting style order affects priority. An exception is to mark! The important style always has the highest priority. Try not to use important unless you have to use a media style sheet to specify a style sheet for specific output only. For example, you can create a general style table with Features shared by print and screen versions, and then create a separate attribute for printing only and for display only. Use the media attribute in the link or style element, for example, media = "output". The output can be print, screen, all (these are the most common). We recommend that you define the selector: do not use the id selector to write CSS as easily as possible, only keep necessary particularity select element type selector by name select element by class or ID 1, select the element to be formatted by class use. enter className2, select the element to be formatted by ID, start with # (well number), and enter idName unless it is specific to the target element, it is recommended that you do not add element names in the id or class selector to reduce flexibility. Comparison between class selector and ID SelectorWe recommend that you use the class selector whenever possible. The id selector introduces the following problems: 1. It cannot be reused. 2. It has strong particularity. It is difficult to manage the elements selected by context to cover the requirements for compiling rules with higher particularity. 1. Child selector:>

.architect > p{     color:red;}

This selector only selects the p element of the child element (not child element or child element) of the effecect class element. 2. CSS adjacent compatriot OPERATOR: +

<body>     
H1 is adjacent to p, h1 is not adjacent to h2, and p is adjacent to h2.
.architect p+p{     color:red;}
3. Common compatriot OPERATOR :~
h1~h2{     color:red;}
Select the first or last child element: first-child, last-child. All are pseudo classes.
<ul>     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li></ul>
li:first-child{     color:red;}
The selected <li> 1 </li> is not a child element of li. last-child is similar to the first letter or line of the selected element: first-letter ,: first-line pseudo element: first-letter,: first-line,: before,: after pseudo class: first-child,: link ,: hover selects the link Element a: link: the appearance of a: visited: the appearance of a link that has been activated by a visitor. a: focus: The premise is that the link is selected through the keyboard and the activated a: hover: the link appearance when the cursor points to the link a: active: the appearance of activated links is selected by attribute

 

 
  
 
   
 
    
Selector
 
    
Attribute Value
 
   
 
   
 
    
[Attribute]
 
    
Matches the specified attribute, no matter what the value is
 
   
 
   
 
    
[Attribute = "value"]
 
    
Exact match of specified attribute value
 
   
 
   
 
    
[Attribute ~ = "Value"]
 
    
The attribute value is multiple words separated by spaces, one of which exactly matches the specified value.
 
   
 
   
 
    
[Attribute | = "value"]
 
    
Value-hitting the attribute value
 
   
 
   
 
    
[Attribute ^ = "value"]
 
    
The attribute value starts with value. value is a complete word or part of a word.
 
   
 
   
 
    
[Attribute $ = "value"]
 
    
The attribute value ends with value. value is a complete word or part of a word.
 
   
 
   
 
    
[Attribute * = "value"]
 
    
The attribute value is a substring of the specified value.
 
   
 
  

 
Element Group
h1,h2{     color:red;}
Combine Selector
Em {color: red;}. project em {color: red;}. effecect. project em {color: red;}/* achieves the same effect, and the particularity is from low to high */
Chapter 10: select the font family: name family for adding a style to the text. The font names containing multiple words should be enclosed by quotation marks (single quotation marks or double quotation marks. Although the font-family attribute is inherited, several elements do not inherit the font settings of the parent element, including select, textarea, and input elements of the form. However, they can be forced to inherit. You can specify a replacement font to list more than one font in the font-family attribute. Font-family: name, name2, name3 .. create italic font-style: italic cancel italic font-style: normal apply bold format font-weight: bold (bold), font-weight: bolder (more rough), font-weight: light (finer), or enter 100 ~ 900 represents the normal width, and 100 represents the normal width. 400 represents two ways to set the font size for the text of a webpage in bold: directly use pixels to specify the specific font size, or use percentages, em, or rem to specify the size of the text relative to the parent element. We recommend that you use em as the unit. 1em is always equal to the default font size, this is the working principle of em. rem always uses the root element as the reference system font-size: xx-small, font-size: x-small, font-size: small, font-size: medium, font-size: large, font-size: x-large, font-size: xx-large, or use numbers to add units, or the height of a row in percent setting indicates the line spacing of a paragraph, that is, the distance between each row in a paragraph is line-height: n -- it is multiplied by the font size of the element, obtain the required line height line-height: a -- here, a is the line-height: p %, which is the unit of em, px, pt. You can use font to set the font style, width, variant, size, line height, and font family at the same time. At least the font size and font family attributes must be included to set the color: red; you can use a style sheet to define any combination of color names, hexadecimal values, RGB, HSL, RGBA, and HSLA values to set the background-color, background-image, and background-repeat. (duplicate background image) background-attachment and background-position. You can also use the background-repeat method to repeat background images, background-repeat: direction, and direction. There are four optional values: repeat, repeat-x, repeat-y, no-repeatbackground-attachment: controls whether the background image is scrolling along with the page, fixed: Back The scene image is attached to the browser window. Even if the visitor scrolls the window, the image will continue to be displayed. scroll: When the visitor scrolls the page, the background image will move. local: only when the visitor scrolls the element of the background image, the background image is moved. Background-position: Specifies the position Control margin of the element background image to increase or decrease the distance between words or between letters. The former is called the gap between words, and the latter is called the gap between words: word-spacing: length: letter-spacing: length: adds the indent text-indent attribute. You can specify that the text-align: left (right, center, justify), align left, align right, align in the middle, align both ends to modify the text's case-sensitive text-transform attribute, you can define the text case for the style. Text-transform: capitalize -- uppercase text-transform: uppercase -- uppercase text-transform: lowercase -- lowercase text-transform: none-keep the text in its original format and use small uppercase letters and small uppercase letters: the letters are in upper case, but are reduced to the lower case letters. Use font-variant control. Use: font-variant: small-caps cancel: font-variant: none decoration text-decoration attribute decoration text, add underline or other types of Line text-decoration: underline -- add underline text-decoration: overline -- add underlined text-decoration: line-through -- add strikethrough cancel: text-decoration: none set the blank property to use white-spacewhite-space: pre -- let the Browser display all spaces in the original text and press ENTER