Study notes: Html+css Basics

1.<q> tags, short text references

     <q> reference text </q><q> The real key point of the tag is not its default style double quotation marks (if so we do not have to enter double quotation marks on the keyboard), but its semantics: quote others.

2. Use the <span> tab to set individual styles for text

 The <span> tag is not semantic, and its purpose is to set up a separate style. Grammar:<span> Text </span>  

3.<address> tag to add address information to a webpage

 <address> Contact address information </address> not only italic, but also a  

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

 <code> code Language </code>, <code>{background-image:linear-gradient (left, red 100px, Yellow 200px);} The </code> function is to prevent the browser from mistaking the code for execution without displaying it. Tagged browser will not execute, but as text display  

5.<pre> Tag, add a piece of code ( <code> tag is a line )

 <pre> Language Code Snippets </pre> defining pre-formatted text  

6.<ol> and <ul>

 OL = ordered list has sequence table UL = unordered lists unordered listing <ol>
<li> My first list of information. </li>
<li> My first list of information. </li></ol>  

7. Open the link in the new browser window

 <a href= "Destination url" target= "_blank" >click here!</a> Note: Target must be preceded by a space _blank--opens the link in a new window _parent--Opens the link in the parent form _self--Opens the link in the current form, this is the default value _top--Opens the link in the current form and replaces the current entire form (frames page) The name of a corresponding frame page--opens in the corresponding frames page

8. Use mailto to link the email address in the Web page

 <a> tags also have the role of linking email addresses, using mailto to make it easy for visitors to send e-mails to website managers. We can also use mailto to do many other things. Here's a look at the detailed illustration: note: If you have more than one parameter behind mailto, the first parameter must be "?" At the beginning, each of the following parameters is separated by "&".

The following is a complete example: the results displayed in the browser:SendClicking on the link will open the Email app and automatically fill in the settings such as the recipient's information  

9. Use form labels 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 Mode" action= "Server file" >  All form controls (text boxes, text fields, buttons, radio boxes, checkboxes, and so on) must be placed between the <form></form> tags (otherwise the information entered by the user cannot be submitted to the server!). ）。  

priority of three methods represented by 10.CSS (weights)

 inline > Embedded > External (premise: CSS styles in inline, inline, external style sheets are in the same weight case) nearest principle (the higher the precedence level from the Set element)  

11. The difference between class and ID selectors

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

12.1. Sub-selector

Greater than symbol (>), which selects the first generation of child elements of the specified label element. food>li{border:1px solid red;}  

12.2. Include (descendant) selectors

 Contains a selector, which is a space to select the Descendants element under the specified label element. > acts on the first generation of descendants of an element, and the space acts on all descendants of the element.  

Special particularity of 13.CSS: Weight value

 Sometimes we set a different CSS style code for the same element, so which CSS style does the element enable? The weight of the label is 1, and the weight of the class selector is 10,id the maximum value of the selector is 100. (There is also a special weight-inheritance is also entitled to a value but very low, some documents suggest it is only 0.1, so it can be understood as the lowest weight of inheritance.) ）

14. Importance !important

 P{color:red!important;} Browser Default Style < Page Creator Style < user-set style, but remember that the!important priority style is an exception, with weights higher than the user's own style.  

15. Elements classify block elements, inline elements (also called inline elements), and inline block elements.

 Common block elements are: <div>, <p>,     block-level elements  Setting Display:block is the display of elements as block-level elements. The following code is the conversion of inline element A into a block element, so that the a element has a block element feature. A{display:block;} block-level element features: 1, each block-level element starts from the new line, and the subsequent element also has a row. (Really overbearing, a block-level element exclusive row) 2, the height of the element, width, row height, and the top and bottom margin can be set. 3, the element width is not set, is its own parent container of 100% (and the width of the parent element consistent), unless a width is set.   Inline ElementsIn HTML,,<span>, <a>, <label>, <strong>, and <em> are typical inline elements (inline elements). Of course, block elements can also be set to inline elements through code display:inline. The code below is to convert the block element div into an inline element, so that the DIV element has an inline element feature. div{
Display:inline;} <div> I'm going to be an inline element </div> inline element features: 1, and other elements are on one line, 2, the height of the element, the width and the top and bottom margins are not set, 3, the width of the element is the width of the text or Picture it contains, cannot be changed.   Inline block ElementsInline block elements (Inline-block) are features that have inline elements, block elements, and code display:inline-block that are set to inline block elements. (css2.1 New),, <input> tag is this inline block tag. Inline-block element Features: 1, and other elements are on one line, 2, the height of the element, width, row height, and the top and bottom margin can be set. Tip: The next section is to use video animations to explain the box model in CSS.  

16. Layer Model: Three kinds of positioning

 1, absolute Positioning (position:absolute) 2, relative positioning (position:relative) 3, fixed positioning (position:fixed)   Absolute Positioning  The closest parent containing block with a positional property is absolutely positioned, if there is no such containing block, relative to the BODY element, which is relative 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: Represents a pinned position, similar to the absolute anchor type, but its relative movement coordinates are the view (the page window within the screen) itself.   relative combined with absolute  <div id= "Box1" > <!--Reference positioned elements--
<div id= "Box2" > Relative reference elements for positioning </div> <!--relative positioning elements--></div> #box1 {
width:200px;
height:200px;
position:relative; } #box2 {
Position:absolute;
top:20px;
left:30px; }

16.CSS setting Style tips

    Inline elements:If the element is set as an inline element in text, picture, and so on, horizontal centering is achieved by setting the Text-align:center for the parent element.   fixed-width block elements: When the element is set as a block element, the use of text-align:center will not work, then there are two cases: fixed-width block elements and variable-width block elements. In this section we will first talk about fixed-width block elements. (Fixed-width block element: The width of the block element is a constant value.) The elements that satisfy the fixed width and block two conditions can be centered by setting the left and right margin value to "auto".   Variable width:

In the actual work we will encounter the need to set the "block element of the indefinite width" center, such as page navigation on the pages, because the number of paging is indeterminate, so we can not set the width to limit its elasticity. (Indefinite wide block element: the width of the block element is not fixed.) )

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

1. Add a table label (using the length of the table label Adaptive---that does not define its length nor the length of the default parent element body (table whose length depends on the length of its text), so it can be considered as a fixed-width block element, then using a fixed-width lump-centered margin method, To align it horizontally. ）
2. Set the Display:inline method: Similar to the first, the display type is set to the inline element, and the property setting of the variable width element
3. Set position:relative and left:50%: Use relative positioning to offset the element to the left by 50%, which is the goal of centering

  Center vertically:

There are two ways to vertically center a parent element's height-determined multiline text, picture, and so on:

Method One: Use the Insert Table (including tbody,TR,TD) Labels and set vertical-align:middle.

CSS has a property vertical-align for vertical centering, which is useful for child elements of the Inline-block type when the parent element sets this style.  

17. Implicit change of display type

One interesting phenomenon is that when you set one of the following 2 sentences for an element (no matter what type of element, except Display:none): 1. Position:absolute 2. Float:left or float:right simply, as long as the HTML code appears in one of the above two sentences, the display type of the element will automatically be displayed as a display:inline-block (block Element), of course, you can set the element's Width and height, and default widths do not fill the parent element. As the following code, the small partners know that a tag is an inline element, so setting its width is not effective, but set to Position:absolute later, it is OK. <div class= "Container" > <a href= "#" title= "" > Enter course click here </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>  

new <input> label Properties

 The <input> tag specifies the input fields that the user can enter data into. New property: Required indicates that the value of the input field is required.  Type-button-checkbox-date-datetime-datetime-local-email-file-hidden-image-month-number-password-radio-range Scrolling Controls-Reset-submit-text-time-url-week  

Property selector

21. Structure pseudo-class selector

 

 

23.font-variant Setting font display text for small caps

property to set the font display text for small caps, which means that all lowercase letters are converted to uppercase, but all letters that use small uppercase fonts have smaller font sizes than the rest of the text  Normal default value. The browser will display a standard font. The Small-caps browser displays the font for small caps. Inherit specifies that the value of the Font-variant property should be inherited from the parent element.  

24. Properties set a shadow on the text

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

The 25.text-overflow property specifies what happens when the text overflows the containing element

 Force on one line, white-space:nowrap and overflow hidden Overflow:hidden  Clip trim text. Ellipsis displays the ellipsis to represent the trimmed text. String uses the given string to represent the trimmed text.  

26.word-spacing property increases or decreases the space between words (that is, word spacing)

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

27.text-transform Property controls the case of text

 None defaults. Defines the standard text with lowercase letters and uppercase letters. Each word in the capitalize text begins with an uppercase letter. The uppercase definition has only uppercase letters. lowercase defines no capital letters, only lowercase letters. Inherit specifies that the value of the Text-transform property should be inherited from the parent element.  

28.white-space property setting how to handle whitespace inside an element

 Normal default. The blank will be ignored by the browser. The pre blank is reserved by the browser. It behaves like a <pre> tag in HTML. The nowrap text does not wrap, and the text continues on the same line until the <br> tag is encountered. Pre-wrap preserves a sequence of whitespace characters, but wraps normally. Pre-line merges a sequence of whitespace characters, but preserves newline characters. Inherit specifies that the value of the White-space property should be inherited from the parent element.  

29. Text Anti-Unicode-bidi and direction

 The Direction property has three values-inherit uses the parent element's setting-ltr default, left to right, from right-RTL.  Unicode-bidi has three widely supported values-what order is the normal in what order-embed acts on the inline element, the value of the direction property specifies the embedding layer, and the implicit reordering within the object-bidi-override The values are strictly reordered according to the value of the direction property. Ignore implicit bidirectional arithmetic rules  

30. Picture Alignment

 Horizontal alignment using inherited parent <p text-align:left > </p>  Vertical alignment: The Vertical-align property sets the vertical alignment of the element baseline default. element is placed on the baseline of the parent element. Sub-subscript for vertical alignment of the align. Super Vertical alignment Top aligns the top of the element to the top of the highest element in the row Text-top aligns the top of the element with the top of the parent element's font middle place this element in the middle of the parent element. Bottom aligns the top of the element to the top of the lowest element in the row. Text-bottom aligns the bottom of the element with the bottom of the parent element's font. Length% use the percent value of the "Line-height" property to arrange this element. Negative values are allowed. Inherit specifies that the value of the Vertical-align property should be inherited from the parent element.  

30. Background image size

 Length sets the height and width of the background image.  The first value sets the width, and the second value sets the height. If you set only one value, the second value is set to "Auto".  Percentage sets the width and height of the background image as a percentage of the parent element the first value sets the width, and the second value sets the height. If you set only one value, the second value is set to "Auto".  Cover the background image to be large enough to allow the background image to completely cover the background area. Some parts of the background image may not appear in the background positioning area. The contain expands the image image to its maximum size so that its width and height are fully adapted to the content area.  

31. Border Style Border-style

 

None	Defines no border.
Hidden	Same as "none". Except when applied to tables, hidden is used to resolve border conflicts for tables.
Dotted	Defines a point border. Renders as solid lines in most browsers.
Dashed	Defines a dashed line. Renders as solid lines in most browsers.
Solid	Defines a solid line.
Double	Define two lines. The width of the double line equals the value of border-width.
Groove	Defines a 3D groove border. The effect depends on the value of the Border-color.
Ridge	Defines a 3D ridge-shaped border. The effect depends on the value of the Border-color.
Inset	Defines a 3D inset border. The effect depends on the value of the Border-color.
Outset	Defines a 3D outset border. The effect depends on the value of the Border-color.
Inherit	Specifies that the border style should be inherited from the parent element.

 

32. Picture Border Border-image

 

value	Description	Test
Border-image-source	The path to the picture that is used in the border.
Border-image-slice	The picture border is offset inward.
Border-image-width	The width of the picture border.
Border-image-outset	The border image area exceeds the amount of the border.
Border-image-repeat	Whether the image border should be tiled (repeated), covered (rounded), or stretched (stretched).	Test

   

Study notes: Html+css Basics