"Head First Html&css" notes

• Void elements are elements that have no content between the opening and closing tags in an HTML page.
• You should use relative links to link pages in the same site, and URLs to link pages on other sites.
• The file protocol is used when the browser reads local files from the computer. The file URL is followed by a 3 slash.
• The port that is typically transferred by default is 80.
• The A element has a title attribute that is used to provide information about the link.
  • A element can take an id attribute to directly access a specific point in the page. Whether it's a relative link or a URL, to link to a specific target on a page, simply add a # to the link, plus the target identifier.
• You can add the title and ID attributes for any element.
• The ID begins with a letter (a~z or a~z), followed by any letter, number, horizontal line, underscore, 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 you don't tell the browser which particular window to use, the browser opens the page in the same window. You can add a target property to the a element to tell the browser to use a different window. If you use "_blank" 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. (After testing, Chrome is OK, IE11 will open in different windows.) ）
• A typical URL is made up of a protocol, a site name and an absolute address for a resource. (such as the domain name is glorywu.com, and the site name is www.glorywu.com, it can be code.glorywu.com or wade.glorywu.com and so on. ）
• The 3 most commonly used image formats on the Web: JPEG, PNG, and GIF.
  • Use JPEG for photos and complex images. JPEG contains 16 million colors, lossy format, will lose some information, does not support transparency and animation, the file is small.
  • Monochrome images, logos, and geometries with PNG or GIF
  • PNG: Contains millions of colors, lossless format, no loss of information, allowing the setting of "Transparent", so that the image below the object can be displayed, the file is larger than the corresponding JPEG.
  • GIF: Contains 256 colors, lossless, only allowed to set a color of "transparent", the file is larger than the corresponding PNG, support animation.
• is an inline element. The element simply 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 display some text instead of it when the image cannot be displayed. (Chrome: There is a broken picture, no word.) IE: There are pictures with words. Firefox: No picture has words. You can resize the image with the width and height properties (preferably less than 800 pixels wide). The browser downloads the HTML file and starts displaying the page before downloading the image. At the same time, the browser needs to get the full image before scaling the image to fit the page size, so it's best to change the size of the source file directly.
• Anti-aliasing (anti-aliasing) processing can soften edges relative to the background color.
• If you omit all element names, only one point, and then the class name, the rule applies to all members of the class.
• An element can be added to multiple classes, placing each class name in the Class attribute, separated by a space between each class name. The order of class names is not important.
• When multiple selectors select an element, if one rule is more specific than other rules, it wins. And if they are of the same degree, select the last rule in the CSS file that is listed.
• Use font-family to control the font used, control the font size with font-size, control the text color with color, control the font weight with font-weight, and add more styles (underline, underline, strikethrough) to the text with Text-decoration.
• Each font-family contains a set of fonts with common characteristics. Includes Sans-serif, serif, monospace (fixed width), cursive (handwriting), and fantasty (a style).
• You can use the Font-family property to specify multiple fonts. The first is the preferred font, followed by some candidate fonts, the font used when the preferred font is not available, and a generic font family name (typically the browser's default font), which should be in the same font family as all other fonts specified in the list. Most PCs have Verdana fonts, and most Macs have Geneva fonts, and Arial is common on both PCs and Macs. If a font name contains spaces, enclose the font name in quotation marks.
• Woff:web Open Font format. Web fonts prefer Web open font format, TrueType as a candidate. TTF and Woff font formats are not available in IE8 and previous versions. Embedded OpenType only IE support.
• @font-face rule tells the browser: to load the font file specified by the SRC URL. The browser attempts to load each src file until it finds a file that it can support. Once loaded, this font is assigned the name specified in the Font-family property.
• Several ways to adjust font size
  • font-size:14px; Using pixels to specify font size, older versions of IE will not support text scaling.
  • font-size:150%; When you specify a percentage font size, it is relative to the parent element's font size.
  • Font-size:1.2em; Ditto.
  • Font-size:small; A font size can be specified as Xx-small,x-small,small.medium,large,x-large or Xx-large, and the browser converts these keywords to pixel values, which are used to complete the conversion using the default values defined in the browser. In these keywords, each keyword corresponding to the size of about the previous large 20%,small is usually defined as 12px.
• Recommended method for specifying font size
  • Select a keyword (recommended small or medium) and specify it as the font size in the body rule. This corresponds to the default font size for the page.
    * Use EM or percentages 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. And H1 is the body font size 200%,H2 is 150%,h3 is 120%,h4 is 100%,h5 is 90%,h6 is 60%. In general, the default H4 font size is the same as the body font size.
• Change the font weight font-weight:bold; If an element is set to bold by default, or if it inherits from the parent element in bold, it can be passed font-weight:normal; Remove the bold style.
• Italic and italic text
  • Set italic font-style:italic; However, not all fonts support italic style.
  • Italic (oblique) text is also skewed, but instead of using a set of specially designed italic fonts, the browser tilts the normal text. Font-style:oblique;
• Use hexadecimal codes to specify colors: Start with # and specify Red, green, and blue components, respectively, using a two-digit number. If the two-digit number is the same in each set of components, you can use shorthand, such as #ccbb00, which can be abbreviated to #cb0, #11eeaa可以缩写为 #1ea.
• Add Strikethrough Text-decoration:line-through; Underline underline; underlined overline;
• If each digit in the hexadecimal code of the color is the same (for example, #111111, #777777), these colors are gray, from dark gray to light gray.
• Set line height line-height:16em; The height is 1.6 times times the font size.
• From a CSS point of view, each element is a box. Each box consists of a content area and an optional padding (padding), Border (border), and margin (margin). The padding and margins are transparent, have no color, and do not have their own decorations. Borders can have a variety of widths, colors, and styles. The padding adds extra space around the content, and the margin provides the spacing between the elements. The background color of the element extends below the inner margin, but does not extend to the margin.
• With CSS, you can use the Background-image property to add a background image to any element. Background-image:url (the picture path does not need to be quoted); By default, the background image is duplicated (tiled) and can be resolved by background-repeat:no-repeat:. The repeat-x image repeats only horizontally, and the repeat-y image repeats only vertically; inherit is handled by the parent element's settings. In addition, the browser also defaults to placing the background image in the upper-left corner of the element. The Background-position property sets the location of the image, can be specified by pixel, or can be specified as a percentage, or it can be specified with keywords such as top, left, right, bottom, and center.
• For padding, margins, and even borders, CSS provides an attribute in each direction. To increase the padding on the left side, you can use the Padding-left property. Set the padding around the perimeter (padding) First, and then specify a Padding-left property for the left, which overrides the previously set left padding.
• There are 8 available border styles (Border-style), solid (solid), double (two lines), Groove (Groove), outset (convex), dotted (dashed), dashed (broken), inset (concave), Ridge (ridge Line).
• You can specify the border width (border-width) using keywords or as a literal, with keywords including thin,medium, and thick.
• Specifies the border of one side border-top-color,border-right-style,border-bottom-width
• Specifies the border fillet border-radius:15px; Specify a corner border-top-left-radius:15px; You can also use EM to specify the radius size.
• When you use a style for multiple elements, you use class. But if only one element needs to be styled, or if there is only one element on the page, the ID should be used. To select an element with an ID, you need to use a # character in front of the ID.
• The class name begins with a letter, and the ID name can begin with a number or a letter. class names and ID names can contain letters, numbers, and _ characters, but not spaces.
• When using more than one style sheet, the following style sheet overrides the style in the previous style sheet.
• You can add media properties to the link element to provide the specified style sheet for different browsing devices. Media= "screen and (max-device-width:480px)" media= "print" query can also use Min-device-width, orientation[display direction, can be landscape ( Landscape) or Portrait (portrait)].
• You can also use the @media rule to add media queries directly to the CSS. In CSS, to put the rules that are common to all media types in the end, you don't need to repeat the rules.
• IE8 and previous versions do not support media queries.
  Max-device-width and Min-device-width Media properties are more dependent on the device's actual screen, and if you are more concerned about the size of your browser, you can use the Max-width and Min-width properties.

"Head First Html&css" notes