Head First HTML & CSS, headfirsthtml
- A void element is an element that does not contain any content between the start tag and the end tag on an HTML page.
- The relative link should be used to link pages on the same website, and the URL should be used to link pages on other websites.
- The file protocol is used when the browser reads local files from the computer. There are three diagonal lines behind the File URL.
- Generally, the default transmission port is 80.
- Element a has a title attribute to Provide link information.
- Element a can contain an id attribute to directly access a specific Vertex on the page. Whether it is a relative link or a URL, to link to a specific target on the page, you only need to add a # At the end of the link and the target identifier.
- You can add the title and id attributes to any element.
- Id must start with A letter (~ Z or ~ Z), followed by any letter, number, horizontal line, underline, colon or dot. To open a page in a new window, you need to tell the browser the name of the window you want to open. If the browser does not tell the browser which specific window to use, the browser will open the page in the same window. You can add a target attribute for element a to tell the browser to use a different window. If "_ blank" is used as the target, the browser will always open a new window to display the page. If you specify another name, such as "coffee", all links with the same target name "coffee" will be opened in the same window. (Chrome is normal and IE11 will be opened in different windows .)
- A typical URL consists of a protocol, a website name, and an absolute address of a resource. (For example, the domain name is glorywu.com, and the website name is www.glorywu.com, or code.glorywu.com or wade.glorywu.com .)
- The most common three image formats on the Web are JPEG, PNG, and GIF.
- JPEG is used for photos and complex images. JPEG contains 16 million colors, lossy format, and some information is lost. It does not support transparency and animation, and the file size is small.
- Monochrome images, logos, and geometric images are the same as PNG or GIF images.
- PNG: contains millions of colors and lossless formats, so that information is not lost. You can set "transparent" so that the items under the image can be displayed. The file size is larger than the corresponding JPEG value.
- GIF: Contains 256 colors, lossless. Only one color can be set to "Transparent". The file is larger than the corresponding PNG and supports animation.
- Is an inline element. The element only points to the image, and the image itself is not part of the HTML page. HTML pages are plain text. The alt attribute of an element can be replaced by text when the image cannot be displayed. (Chrome: damaged image, no words. IE: graph or word. Firefox: No graph or word .) You can adjust the image size by using the width and height attributes (preferably less than 800 pixels in width ). The browser starts downloading the image only after the HTML file is downloaded and the page is displayed. At the same time, the browser needs to obtain the complete image before scaling the image to adapt to the page size, so it is best to directly change the size of the source file.
- Anti-aliasing can soften the edges relative to the background color.
- If all element names are omitted, there is only one vertex, and then the class name, this rule will be applied to all members of this class.
- One element can be added to multiple classes, and each class name is placed in the class attribute. Each class name is separated by a space. The sequence of class names is not important.
- When multiple selectors select one element, if a rule is more specific than other rules, it will win. If they are of the same degree, select the last rule listed in the CSS file.
- Use font-family to control the font used, font-size to control the font size, color to control the text color, and font-weight to control the font width; use text-decoration to add more styles (underlined, underlined, and strikethrough) to the text ).
- Each font-family contains a set of fonts with common features. These include sans-serif, serif, monospace (fixed width), cursive (handwriting), and fantasty (certain style ).
- You can use the font-family attribute to specify multiple fonts. The first is the preferred font, and the second is some candidate fonts, that is, the fonts used when the preferred fonts are unavailable. Finally, put a general font family name (usually the default font of the browser ), it should be in the same font family as all other fonts specified in the list. Most PCs have Verdana fonts, most Mac have Geneva fonts, and Arial is common in PCs and Mac. If a font name contains spaces, you must quote the font name with quotation marks.
- Woff: Web open font format. Web Fonts are preferred. TrueType is a candidate. TTF and WOFF fonts are not available in IE8 and earlier versions. Embedded OpenType is only supported by IE.
- @ Font-face: the browser is told to load the font file specified by the src URL. The browser will try to load every src file until it finds a file that it supports. Once loaded, a name specified in the font-family attribute is assigned to this font.
- How to adjust the font size
- Font-size: 14px; Use pixels to specify the font size. Older IE versions do not support text scaling.
- Font-size: 150%; specifies the font size of a percentage, that is, the font size relative to the parent element.
- Font-size: 1.2em; same as above.
- Font-size: small; you can specify a font size as xx-small, x-small, small. medium, large, x-large, or xx-large. The browser converts these keywords to pixel values, and uses the default values defined in the browser to complete the conversion. In these keywords, the size of each keyword is about 20% larger than the previous one, and small is generally defined as 12px.
- Recommended Method for specifying the font size
- Select a keyword (small or medium recommended) and specify it as the font size in the body rule. This is equivalent to the default font size of the page.
* Use em or percent to specify the font size of other elements relative to the body font size.
- In most cases, the browser's default body font size is 16 pixels. H1 is 200% of the body size, h2 is 150%, h3 is 120%, h4 is 100%, h5 is 90%, and h6 is 60%. Generally, the default h4 font size is the same as the body font size.
- Change the font-weight: bold. If an element is set to bold by default or inherits the bold from the parent element, you can use font-weight: normal to remove the bold style.
- Italic and italic text
- Set italic font-style: italic; however, not all fonts support italic style.
- The oblique text is also skewed, but not a set of specially designed skewed fonts, but the normal text is skewed by the browser. Font-style: oblique;
- Use a hexadecimal code to specify the color: Start With #, and specify the red, green, and blue components, which are represented by two digits respectively. If the two digits in each group are the same, you can use the abbreviation. For example, # ccbb00 can be abbreviated as # cb0, # 11eeaa can be abbreviated as # 1ea.
- Add strikethrough text-decoration: line-through; underline; overline;
- If each digit in the hex color code is the same (for example, #111111, #777777), these colors are gray, from dark gray to light gray.
- Set line-height: 16em; that is, the line height is 1.6 times the font size.
- From the CSS perspective, each element is a box. Each box consists of a content area and optional padding, border, and margin. The padding and padding are transparent, with no color or decoration. The border can have different widths, colors, and styles. The padding increases extra space around the content. The padding provides the spacing between elements. The background color of the element is extended to the bottom of the padding, but not to the outer margin.
- With CSS, you can use the background-image attribute to add a background image to any element. Background-image: url (the image path does not need to be enclosed by quotation marks). By default, the background image is repeated (tiled) and can be solved through background-repeat: no-repeat. Repeat-x images are repeated only in the horizontal direction; repeat-y images are repeated only in the vertical direction; inherit is processed according to the settings of the parent element. In addition, the browser places the background image in the upper left corner of the element by default. The background-position attribute sets the position of the image, which can be specified by pixel or a percentage, or by using keywords such as top, left, right, bottom, and center.
- CSS provides an attribute in each direction for the padding, margin, and even border. To increase the padding on the left, you can use the padding-left attribute. First, set the four-week padding (padding) and specify a padding-left attribute on the left. This will overwrite the previously set left padding.
- There are eight available border styles (border-style), including solid, double, groove, outset, and dotted) dashed, inset, and ridge ).
- You can use keywords or pixels to specify the border width (border-width). The keywords include thin, medium, and thick.
- Specify the border-top-color, border-right-style, and border-bottom-width on one side.
- Specify the border rounded corner border-radius: 15px; specify a certain angle border-top-left-radius: 15px; you can also use em to specify the radius.
- When you use a style for multiple elements, you must use class. However, if only one element needs a style, or there is only one element on the page, id should be used. To use id to select an element, you must use a # character before the id.
- The class name must start with a letter, and the id name can start with a number or letter. Both the class name and id name can contain letters, numbers, and _ characters, but cannot contain spaces.
- When multiple style sheets are used, the subsequent style sheets will overwrite the style in the previous style sheet.
- You can add the media attribute to the link element to provide the specified style sheet for different browsing devices. Media = "screen and (max-device-width: 480px)" media = "print" queries can also use min-device-width and orientation [display direction, it can be landscape or portrait].
- You can also use the @ media rule to directly add media queries to CSS. In CSS, rules that are common to all media types should be placed at the end, so that duplicate rules are not required.
- IE8 and earlier versions do not support media queries.
The max-device-width and min-device-width media attributes depend more on the actual screen of the device. If you are more concerned about the browser size, you can use the max-width and min-width attributes.
