HTML+CSS Study Notes (Fri)

Learning HTML and CSS is a book called "HTML5 and CSS3 Basic Tutorial", the people's post and telecommunications press, this is the eighth edition. The whole book has been learned, feel the book is clear-minded, code is very informative, the introductory book is selected right, this book has a lot of advanced views, although this undoubtedly adds complexity, but in the long run, it is worth it! Of course, learn the back, many of the concepts and tags encountered in the front, so it is necessary to start from scratch, looking back, sorting ideas, write down is a very good way.

Proceed to the front. From here, gradually touch the charm and power of CSS. This is also the deepening of the concept of "progressive enhancement" .

As already mentioned, HTML is "Hypertext Markup Language", according to semantics, add appropriate tags, and CSS, also known as "cascading style sheet", is used to control the text display effect. In essence, the content of the HTML should be displayed in the same way as the text format, it is because some of the default CSS format, such as <strong>,<em>, of course, we can also modify the CSS, the freedom to control the display of the label.

1. Each rule in the

2. h1 {color:red; background-color:yellow;}

   Note: You can add spaces and tabs to the style sheet to improve readability without affecting the final effect. Don't omit the last semicolon!

4. Add comments, as in C, with/* */package. Annotations are good organization tools that facilitate later maintenance, usually putting related rules together, forming groupings, and placing descriptive comments in front of each group, such as:

   /*global NAVIGATION ----------------------------------------*/ ........... .....

6. Understanding Inheritance: When you add CSS properties to certain tags, not only will the element, including its descendants, be changed, which undoubtedly greatly reduces the difficulty of writing CSS, it is not necessary to add CSS attributes for each element, and the idea of"inheriting" is particularly important. Of course, not all properties will inherit, but they can all be cast by inherit values .

8. particularity, order and importance To determine which rule to apply.

   particularity refers to the specific degree of the specified selector, the application of special strong conflict, the particularity from high to Low: #someID; Someclass.someotherclass>.someclass>p. Recommendation: Use the class selector more, reducing the ID selector because the ID selector is less flexible.

   order: This is relatively simple, the late appearance of the high priority, the previous rules will be overwritten.

   importance: The pinnacle of priority--! Important, it overrides any other rules, such as

p {color:red!important;}

It is not recommended!

1. the value of the property: Each CSS property has different rules for the accepted value.

   Inherit: You can make the value of an attribute of that element the same as the value of that element of the parent element, explicitly .

   Predefined values: Most properties have some predetermined values to use, such as the float property can be left, right, or none, and must not be quoted.

   length and percentage: The length must be a unit (PX or em,1em is equal to the size of the element, the responsive web design is often used, and REM, relative to the HTML element font size. PT This unit is basically only in the style sheet prepared for printing, and percentages (such as 65%) are used much like em, usually relative to the parent element. of These units, the most commonly used is EM, percentages and px,rem are used more and more.

   Pure numbers: rarely used, the most common is line-height,z-index and opacity, must not add units

   URL: Some CSS properties allow you to specify a URL for a file (mostly an image), such as Background-image:url (File.ext), where File.ext is the path and file name of the target resource, note: Equal URLs are relative to the location of the style sheet, not the location of the HTML file, remember! Remember! Filenames can be unquoted, not spaces, especially URLs with front brackets!

   CSS Color: more expressive way, you can use predefined keywords or 16, RGB, HSL, RGBA, HSLA, the last two can be specified alpha, that is, transparency.

   RGB builds its own color by specifying the amount of red, green and blue, and can use a percentage or a value between 0~255. such as: Color:rgb (89, 0, 127);

   hexadecimal number is on the basis of RGB, these numbers into 16, and then add a "#", such as: color: #59007f, respectively, corresponding to red and green blue, if the number is repeated, such as #ff3344 can be abbreviated as #f34

   RGBA Adds an alpha attribute to the RGB to adjust transparency, which is itself a decimal between 0 and 1, and the closer to 0, the more transparent it is.

   HSL is CSS3 introduced, corresponding to the hue, saturation and brightness, the value of hue in 0~360, saturation and brightness of the value are a percentage, in 0%~100%

   Summary: These are just some of the basics of getting started with CSS, and for the time being there is no specific use involved. Only by understanding the rules, can you better use the rules! According to the current learning process, CSS is more difficult to control than HTML, freedom is higher, the effect is better. Of course, these are all based on good semantic html, always in mind: progressive enhancement.

HTML+CSS Study Notes (Fri)