HTML + CSS basics and htmlcss Basics

HTML + CSS basics and htmlcss Basics
Chapter 1I. Style 1. Line Style, Code cannot be maintained, not recommended 2. inline style, not reusable, not recommended 3. External style, reusable, and maintained, recommended <link rel = "stylesheet" href = "...css"/> 2. border 1. Composition: border: 1px [solid | dashed | double] red; 1.1Width of Dual-solid lineUse border-width: 4px; Set 2. Direction: border-[top | bottom | left | right] 3. Combination usage: border-top-[width | style | color] 4. border shape:Non-rectangle (inverted triangle, inverted trapezoid ......)4.1 Triangle through border

. Angle {width: 0; height: 0; border: 10px solid # fff; border-top-color: # ccc;/* border: 1px solid red; /* It is not feasible to set only one border. * // * border-top: 10px solid black ;*/}

3. Background 1. Differences between the background and content: the background does not occupy the container width or height, and is not selected. The Container width and height are supported and can be selected. 2. Common background styles: 2.1 background-color: red; 2.2 background-image: url (.. /img/1.jpg); 2.3 background-repeat: [repeat | no-repeat | repeat-x | repeat-y] the entire container is tiled by default by 2.4 background-position: x y; 2.4.1 background-position: [left | right | center] [top | bottom | center] 2.4.2 when the second value does not exist, the yY axis is centered by default at 2.5 background-attachment: fixed (the background does not scroll with the scroll bar and is fixed in the visible area of the browser) | scroll (rolling the background with the scroll bar) 2.6 background-size: width height; // Ie8 not supported2.6.1 background-size: 100px 50%; 2.6.2 background-size: [cover (extend 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 to the maximum size so that its width and height fully adapt to the content area .) ] 3. Background composite style: Write order regardless of attributes, Usually according Color, image, and location(Including whether to scroll) backgroun: red url (.. /img/1.jpg) no-repeat center top scroll; 4. Text 1, font-weight: [normal | bold | bolder]; 2. font-style: italic; italic 3, font-size: 16px; 4, font-family: "" | "" | ....... 5. line-height: The line height. When line-height is set to height, the text is vertically centered. If the line is set to 5.1, the text size is determined by 5.1.1, make sure that the size of the two lines is 5.1.2. When the row height is an odd number, the principle of 1 px is as follows: 5.1.3 use guides to measure the Row Height. 6. composite text style: Pay attention to the writing sequence: 6.1 font: bold italic 26px/50px ""; // 26px/50px indicates font-size/line-height 5. text 1. color: red; 2. text-align: [center | left | right]; 3, Text-indent: 2em; (em is usually used as the unit of indent characters)4. text-decoration: [none | underline]; 5. letter-space: 10px; letter spacing (not distinguished between Chinese and English); 6. word-spacing: 10px; word spacing (in the unit of space for parsing) 7. white-space: [normal | nowrap]; force not to wrap nowrap 8. Measure text size, top to bottom mode (text is square, width and height are consistent, but some of the width is a space "in order to make the text and text do not stick together", so the text size is subject to high) 8. Space size: When the font format is, the space size is half the size of the current text; The font format is different. The space size is different!  Vi. Box Model 1. padding: 1.1 after padding is set, the content of the large container will be supported. padding is not included in the width. 1.2 direction: clockwise top right bottom left padding: 10px 20px 30px 40px; 1.3 Invalid padding-bottom problem:Note that the html document stream is from left to right by default, from top to bottom. Currently, your text height is not enough to reach the position of 10px from the bottom, so only the top and bottom margins work, while the bottom margins do not. For example, if float: left is set, margin-left takes effect directly. If the width of the internal element is insufficient, margin-right may not work. If you want margin-right to take effect, float: right is used. In this case, margin-left does not necessarily play a role. Like a person in a room, although the distance between the person and the ceiling must be less than 1 meter, it is likely that this rule does not work. 2. margin: the margin 2.1 adjacent box model. When there is margin in the adjacent gap, although Each has its own marginBut eventually Show YesTake the big principle, select the big margin as the margin of the two boxes of words 2.2 margin problem 2.2.1 margin-top transfer problem: when the parent-child level is included, sub-Level margin-top is passed to the parent level. solution: Add border to parent2.2.2 For details about the margin stacked pressure, see section 2.1 2.2.3. Invalid margin-bottom problemSometimes you need to set a block-level element to be displayed at the bottom of the parent class, but the setting of margin-bottom: 0 is invalid. -- 2.2.3.1 the meaning of this attribute is wrong. It refers to the bottom margin of the element you set, but does not indicate that it is at the bottom of the parent element, it does not mean that its child elements will be displayed at the bottom of it. Margin-bottom indicates Between the Element and Its sibling Node. 2.2.3.2 absolute positioning and then setting bottom: 0 is valid. 2.2.3.3 if no peer element exists below the target element, why does margin-bottom: 0 not indicate that it is at the bottom of the parent element? -- "Does not mean that, for example, you have two boxes to be placed from top to bottom. If you set margin-bottom: 10px for the first box, the second box will be 10 PX away from the first box, if it is set to 0, it will be next to the first one (of course, the second margin-top is also set to 0), and the margin-bottom is used to set the interval between elements of the same level, it is not set its position in the parent element. 3. Box Size: (border + padding) * 2 + width (margin is not counted, the premise is symmetric between the left and right) 4. display the elements at the bottom of the parent level: method 1. use the bottom (and top, left, and right) attributes, but this requires that the position attribute of the node be absolute (absolute positioning), and the position attribute of its parent node is relative (relative positioning ), then the node can be located relative to its parent node. Chapter 2I. Tag a 1. hyperlink 2. Pseudo-class setting sequence: L V HTo prevent conflicts 2.1: the initial color of the link that has not been accessed 2.2: The color of visited after access 2.3: hover move (hover) 2.4: The color of the active mouse when it is pressed

There are two divs: one is # a and the other is # B. Can I use # a: hover to change # B's style? 1. If you # B element is a child element of # a element, you can directly use # a # B {...} 2. # a and # B are sibling and have the same parent node, and # B and # a are near each other. You can use # a + # B {..} to control # element styles in B;

Note: the plus sign (+) is the adjacent compatriot selector. If you want to select Next to another element, And the two have the same parent element., You can use adjacent sibling selector 2. span label: used to distinguish styles in the row. 3. Common tags 1. header: header information. Use appropriate tags when appropriate. Use div -- "instead of semantic tags such as header. 2. nav: navigation 3, footer: Bottom information 4, section: Forum, used to divide different sections on the page, or different sections of the article. 5. article: a set of fully structured and independent content on the page. For example, a post in a forum (including the author and all comments) is rarely used. 6. aside: side information such as sidebar and advertisement. 7. time: used to indicate the time or date 8, h1 ~ H6 title label. The best page has only one h1 label. Note: The H1 tag involves SEOProblem, similar to title

1. The H1 tag is used only once. H1 can be used but not flooded. The rational use of the H1 tag can bring good results to the website. improper use may adversely affect the website, and even lead to K sites. 2. the keywords used in the H1 tag should be the most important keywords or brand words on the page, and should be keywords used in the webpage title. 3. the H1 tag must contain a keyword. However, this keyword must be readable and rational. Do not add this keyword to emphasize it, this keyword needs to be emphasized to add the H1 tag. Is to first have a keyword, and then add the H1 tag to the keyword. 4. if you add the H1 label to the LOGO image, you must add the website name or brand word to the ALT information of the image to highlight the keywords on the homepage. Otherwise, add H1 to an image. What effect do you think? 5. The H1 tag should be as close as possible to the body tag in html. The closer the tag, the better, so that search engines can find the topic as quickly as possible. From the above example, we can see that the H1 tag is at the beginning of the body code. Why? Because the crawling of the search engine is from the top down, so that the key words highlighted by the H1 tag can be found as quickly as possible. 6. the H1 tag on the Content Page is generally used as the title of the content. It is best to use it only once, but many content pages also use it twice, it is used at one time on the LOGO or the main keyword that appears at the beginning of the web page, and at one time on the big title of the content. If there are no major keywords at the beginning, it is recommended that you only use them on the title once. 7. when you do not want to use the H1 tag on the LOGO and the main Keywords of the webpage are behind, if you still want to add the H1 tag and want the key words of the H1 tag to the front, you can use the DIV + CSS layout to adjust the location of the main keyword, which does not affect the page effect. 8. do not always add the H1 tag. Many large websites do not use the H1 tag, such as Baidu, Sina, and isite, therefore, you only need to provide information to users. It is not necessary to use the H1 tag.

 

9. p: paragraph 10, strong: emphasize, bold 11, em: emphasize, italic 12, ul li: List (unordered); ol li: List (ordered ); dl dt dd: custom list (dt-custom list title; dd-custom list items) 13. mark: mark (yellow background mark) 14. img: image Tag 4. CSS Tag style initialization (css reset) 1. Writing principles: 1.1 clear the tag initialization style when using any tag, we recommend that you do not add all the labels to clear the style code 1.2. Do not set all the labels to a unified and consistent reset. 2. All browsers have default styles, but all the default styles of browsers, Do not use them! Because the default style of tags under each browser may be inconsistent!3. style to be reset: 3.1-box model-related styles: border, margin, and padding 3.2 tag-specific styles: ul> li ol> li 5. Common selector 1. ID selector, the current page is unique # id 2. class selector. Multiple classes are set for unified tags and separated by spaces. class 3. Tag selector: select all the tag names on the current page (div {......}) 4. Group selector. Use commas to separate p, h1, div {......} 5. Contains the selector. a space is used to indicate that the div a {......} is included {......} 6. wildcard characters are not recommended for use. The reason is: strong killing capability (wide impact scope), poor performance * 7. selector specific to css3: 7.1> which are unique to CSS3, a> B indicates Selecting All Child B elements of Element. The difference with a B is that a B Selects all descendant elements, while A> B selects only a generation of child elements.6. selector Priority 1. Found in the browser F12: The 1.1 style is underlined, indicating the style Overwritten;1.2 there is an exclamation mark (!) in front of the style (!), Incorrect style description 2. line style (1000)> Id selector (100)> class selector (10)> label selector (1) Chapter 3I. Block elements and In-row elements 1. Block Element features: 1.1 exclusive to a row by default. All CSS commands are supported. 2. inline element features: 2.1 displays the same row, and the content is highly open, width and height are not supported, and upper and lower margin ( Right and right margin can), The code line feed is parsed (the code line feed, the effect is parsed by the browser, and the result is displayed in the form of space) 3. The conversion of block elements and inline elements is 3.1 display: [inline | block | inline-block]; 3.2 display is only a style modification and does not change the label nature.