Learning notes: Basic knowledge of HTML + CSS, learning notes css

Learning notes: Basic knowledge of HTML + CSS, learning notes css

1. <q> label, short article reference

<Q> reference text </q> <q> the true key of a tag is not its default double quotation marks (if so, we 'd better enter double quotation marks on the keyboard ), it refers to the meaning of the reference.

2. Use the <span> label to set a separate style for text

 <Span> labels have no semantics. They are used to set individual styles. Syntax: <span> text </span>  

3. <address> label to add address information to the webpage

 <Address> contact address information </address> not only in italic format, but also  

4. <code> label, add a line of code

 <Code> code language </code>, <code> {background-image: linear-gradient (left, red 100px, yellow 200px );} </code> prevents the browser from mistakenly believing that the code is to be executed without displaying the code. The browser with the label will not execute, but will display it like text  

5. <pre> label, add a piece of code (<Code> A tag is a row.)

 <Pre> language code segment </pre> defines pre-formatted text  

6. <ol> and <ul>

 Ol = ordered list ul = unordered list <ol>
<Li> my first list information. </Li>
<Li> my first list information. </Li> </ol>  

7. Open the link in the new browser window

 <A href = "target URL" target = "_ blank"> click here! </A> Note:: Before target, add space _ blank -- open link _ parent in a new window -- open link _ self in the parent form -- open the link in the current form, this is the default value _ top -- open the link in the current form, and replace the name of a corresponding frame page in the current form (frame page) -- open the link on the corresponding frame page

8. Use mailto to link the Email address on the webpage

 <A> a tag can also be linked to an Email address. Using mailto allows visitors to conveniently send emails to website administrators. We can also use mailto to do many other things. For details, see the illustration below: Note: if there are multiple parameters after mailto, the first parameter must be "?" Each of the following parameters is separated.

 

The following is a complete example: The result displayed in the browser: The send click link will open the email application, and automatically fill in the recipient and other set information  

9. Use Form tags to interact with users

 <Form method = "post" action = "save. php">
<Label for = "username"> User name: </label>
<Input type = "text" name = "username"/>
<Label for = "pass"> password: </label>
<Input type = "password" name = "pass"/> </form> <Form method = "Transfer method" action = "Server File">  All Form Controls (text box, text field, button, single button, check box, etc) must be placed between <form> </form> labels (otherwise, the information entered by the user cannot be submitted to the server !).  

10. Priority (weight) of the three methods represented by CSS)

 Inline> embedded> external (premise: css styles in inline, embedded, and external style tables share the same weights) proximity principle (the closer the element to be set, the higher the priority level)  

11. Differences between class and ID Selector

The ID selector can only be used once in the document. You can use the class selector word list method to set multiple styles for one element at the same time.

12. 1. Sub-Selector

Greater than the symbol (>), used to select the first child element of the specified tag element. food> li {border: 1px solid red ;}  

12. 2. Include (descendant) Selector

 Contains the selector, that is, adding spaces to select the generation element under the specified tag element.> It acts on the first generation of the element, and spaces act on all the descendants of the element.  

13. Special Feature of CSS: Weight

 Sometimes we set different CSS style codes for the same element. Which CSS style will the element enable? The label has a weight of 1, the class selector has a weight of 10, and the ID selector has a weight of up to 100.(There is also a special weight value-inheritance also has the right value but it is very low. Some documents suggest that it only has 0.1, so it can be understood that the inherited weight is the lowest .)

14. Importance ! Important

 P {color: red! Important;} default browser style <webpage maker style <style set by the user, but remember! The important priority style is an exception. The weight is higher than the style set by the user.  

15. Element classification block elements, inline elements (also called intra-row elements), and inline block elements.

 Common block elements include <div>, <p>, and     Block-level elements  Set display: block to display the element as a block-level element. The following code converts inline element a into a block element to make element a block element. A {display: block;} block-level element features: 1. Each block-level element starts from a new row, and the subsequent element also starts from another row. (A block-level element occupies only one row) 2. The height, width, row height, and top and bottom margins of the element can be set. 3. If the element width is not set, it is 100% of its parent container (consistent with the width of the parent element) unless a width is set.   Inline ElementIn html, <span>, <a>, <label>, <strong>, and <em> are typical inline elements. Of course, block elements can also be set to inline elements through the Code display: inline. The following code converts a block element div into an inline element, so that the div element has the characteristics of an inline element. Div {
Display: inline;} <div> I want to change to an inline element </div> inline element features: 1. All the other elements are on one line; 2. The height, width, and top and bottom margins of an element cannot be set. 3. The width of an element is the width of the text or image it contains and cannot be changed.   Inline Block ElementInline block elements (inline-block) are both inline elements and block elements. The Code display: inline-block sets the element as an inline block element. (Added in css2.1). The and <input> labels are inline block labels. Features of the inline-block element: 1. the element and other elements are on one line; 2. the height, width, row height, and top and bottom margins of the element can be set. Tip: The next section uses video animation to explain the Box Model in css.  

16. Layer Model: three types of positioning

 1. absolute position: absolute 2. relative position: relative 3. fixed position: fixed)   Absolute Positioning  The parent block with the closest positioning attribute is absolutely located. If such a block does not exist, it is relative to the body element, that is, to the browser window. Div {
Width: 200px;
Height: 200px;
Border: 2px red solid;
Position: absolute;
Left: 100px;
Top: 50px;
}
<Div id = "div1"> </div>   Fixed Positioning  Fixed: fixed positioning, similar to the absolute positioning type, but its relative moving coordinate is the view (the webpage window in the screen) itself.   Use Relative and Absolute in combination  <Div id = "box1"> <! -- Reference positioning element -->
<Div id = "box2"> locate relative reference elements </div> <! -- Relative positioning element --> </div> # box1 {
Width: 200px;
Height: 200px;
Position: relative ;}# box2 {
Position: absolute;
Top: 20px;
Left: 30px ;}

16. Tips for setting styles in CSS

    Line element:If the set element is text, image, and other in-row elements, horizontal center is implemented by setting text-align: center for the parent element.   Fixed-width block elements: Text-align: center does not work when the element is set as a block element. In this case, there are two types of elements: Fixed-width block elements and undefined-width block elements. In this section, we will first talk about fixed-width block elements. (Fixed width block element: the width and width of the block element are fixed values .) The elements that meet the fixed width and block conditions can be centered by setting the "Left and right margin" value to "auto.   Width:

In actual work, we will encounter the need to set the center for "block elements with an indefinite width", for example, paging navigation on the webpage, because the number of pages is uncertain, therefore, we cannot limit its elasticity by setting the width. (Undefined width block element: the width and width of the block element are not fixed .)

There are three ways to center block elements with an indefinite width (these three methods are currently used in many ):

  Vertical center:

There are two methods for vertical center of multi-line text and images with the parent element height:

Method 1: Use the INSERT table (including tbody, tr, and td) label and set vertical-align: middle.

In css, there is a vertical-align attribute used for vertical center. It is useful to subelements of the inline-block type when the parent element sets this style.  

17. implicitly changing the display type

One interesting phenomenon is that when one of the following two sentences is set for an element (no matter what type element is earlier, except display: none): 1. position: absolute 2. float: left or float: right in simple terms, as long as one of the above two sentences appears in the html code, the display type of the element will automatically change to display: inline-block (block element) of course, you can set the width and height of the element, and the default width is not full of the parent element. As you can see in the following code, label a is a row element, so setting its width is ineffective, but after setting it to position: absolute, you can. <Div class = "container"> <a href = "#" title = ""> click here to enter the course </a> </div> css Code <style>. container a {position: absolute; width: 200px; background: # ccc ;}</style>

18. iFrame floating Frame

 <Iframe src = "http://www.baidu.com" width = "100%"> </iframe>  

19.<Input> new tag attributes

 <Input> the tag specifies the input fields for data input. New attribute: required indicates that the value of the input field is required.  Type-button-checkbox-date-datetime-local-email-file-hidden-image-month-number-password-radio-range scroll control-reset-submit-text- time-url-week  

20. Attribute Selector

 

 

21. Structure pseudo-class selector

   

 

 

23. font-variant: Set the font display of small uppercase letters

The attribute sets the font of small uppercase letters to display text, which means all lowercase letters are converted to uppercase letters, but all letters using small uppercase fonts are smaller in size than other texts.  Normal default value. The browser displays a standard font. The small-caps browser displays the font of small uppercase letters. Inherit specifies that the value of the font-variant attribute should be inherited from the parent element.  

24. Set the property to the text shadow.

 Text-shadow: 5px 5px 5px # FF0000; h-shadow is required. The position of the horizontal shadow. Negative values are allowed. V-shadow is required. The position of the vertical shadow. Negative values are allowed. Blur is optional. Fuzzy distance. Optional. The color of the shadow. See CSS color values.  

25. The text-overflow attribute specifies what happens when a text overflow contains elements.

 Forcibly hide overflow: Den den on one row, white-space: nowrap, and overflow  Clip trim text. Ellipsis displays the omitted characters to represent the trimmed text. String uses the given string to represent the trimmed text.  

26. The word-spacing attribute adds or removes spaces (that is, word intervals) between words)

 Normal default. Defines the standard space between words. Length defines the fixed space between words. Inherit specifies that the value of the word-spacing attribute should be inherited from the parent element.  

27. The text-transform attribute controls the case sensitivity of text.

 None is the default value. Defines standard text with lower-case letters and upper-case letters. Each word in capitalize text starts with an uppercase letter. Uppercase only has uppercase letters. Lowercase defines no upper-case letters and only lower-case letters. Inherit specifies that the value of the text-transform attribute should be inherited from the parent element.  

28. how to process the white-space attribute settings

 Normal default. The blank space is ignored by the browser. Pre blank is retained by the browser. The behavior is similar to the <pre> label in HTML. The nowrap text will not wrap, and the text will continue on the same line until the <br> label is encountered. Pre-wrap retains the blank character sequence, but line breaks are normally carried out. Pre-line merges the blank character sequence, but retains the line break. Inherit specifies that the value of the white-space attribute should be inherited from the parent element.  

29. Text reversed unicode-bidi and direction

 The direction property has three values-inherit uses the settings of the parent element-default ltr value, left to right-rtl right to left  Unicode-bidi has three widely supported values: "normal" indicates the sequence in which the original sequence is used. "embed" indicates the inline element, and the value of the "direction" attribute specifies the embedding layer, perform implicit re-sorting in the object-bidi-override strictly follows the value of the direction attribute. Ignore implicit bidirectional operation rules  

30. Image Alignment

 Horizontal Alignment uses inheritance parent level <p text-align: left> </p>  Vertical Alignment: the vertical-align attribute sets the vertical alignment baseline of an element. The element is placed on the base line of the parent element. Sub vertical alignment text subscript. Super vertical alignment top of text align the top of the element with the top of the highest element in the row text-top align the top of the element with the top of the parent element font middle place this element in the parent Element the middle of the element. Bottom aligned the top of the element with the top of the lowest element in the row. Text-bottom align the bottom of the element with the bottom of the parent element font. Length % uses the percentage value of the "line-height" attribute to sort this element. Negative values are allowed. Inherit specifies that the vertical-align attribute value should be inherited from the parent element.  

30. Background Image Size

 Length specifies the height and width of the background image. Set the width of the first value and the height of the second value. If only one value is set, the second value is set to "auto ". Percentage sets the width and height of the background image as the percentage of the parent element. The first value sets the width, and the second value sets the height. If only one value is set, the second value is set to "auto ". Cover extends the background image to a large enough size to completely overwrite the background image. Some parts of the background image may not be displayed in the background positioning area. Contain expands the image size to the maximum size so that its width and height fully adapt to the content area.  

31. border style border-style

 

None	Defines borderless borders.
Hidden	Same as "none. Except for tables, hidden is used to resolve border conflicts.
Dotted	Defines a dotted border. It is displayed as a solid line in most browsers.
Dashed	Define the dotted line. It is displayed as a solid line in most browsers.
Solid	Define a solid line.
Double	Defines a double line. The width of the double line is equal to the value of border-width.
Groove	Defines the 3D groove border. The effect depends on the value of border-color.
Ridge	Defines a 3D ridge border. The effect depends on the value of border-color.
Inset	Defines the 3D inset border. The effect depends on the value of border-color.
Outset	Defines the 3D outset border. The effect depends on the value of border-color.
Inherit	It is required that the border style should be inherited from the parent element.

 

32. image border-image

 

Value	Description	Test
Border-image-source	The path of the image used in the border.
Border-image-slice	The image border is offset inward.
Border-image-width	The width of the border.
Border-image-outset	The number of border image areas that exceed the border.
Border-image-repeat	Whether the image border should be repeated, rounded, or stretched ).	Test