CSS (1): Understanding CSS and css

CSS (1): Understanding CSS and css
1. What is CSS?

CSS Cascading Style Sheets (Cascading Style Sheet) are computer languages used to express file styles such as HTML and XML. CSS3 is an upgraded version of CSS2, and 3 is only a version number. It adds many powerful new functions based on CSS2.1. Currently, mainstream browsers such as chrome, safari, firefox, opera, and even 360 support most of CSS3 functions. IE10 will support CSS3 in the future. Different browsers may require different prefixes. It indicates that the CSS attribute or rule has not yet become part of the W3C standard and is a private attribute of the browser. Although a newer version of the browser does not require a prefix, however, to better forward-compatible prefixes are indispensable.

-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);

Transform is a new property of CSS3, and each Browser needs to add a prefix to support it.

2. What can CSS do?

• A style defines how to display HTML elements.
• CSS can achieve a lot of effects or even animated effects that were previously implemented using images and scripts. It only takes a few lines of code. Such as rounded corners, image borders, text shadows and box shadows, transitions, and animations.
• CSS simplifies the design process of front-end developers, provides more flexible page layout, and speeds up page loading.
• You can use a CSS file to control all the webpage styles on the site. As long as you modify the corresponding code in the CSS file, all the pages of the whole site will change accordingly.
• Objective: To separate presentation from structure.

/* Style.css */body {background-color: # ccc;} h1 {font-size: 16px; font-family: ""; font-weight: normal ;}

<! -- Index.html --> 3. CSS syntax structure
CSS rules are composed of two main parts: the selector and one or more declarations. The selector is usually an HTML element you need to change the style. Each declaration consists of an attribute and a value. Property is the style attribute you want to set ). Each attribute has a value. The attribute and value are separated by colons.
P {/* selector */color: red;/* attribute: value ;*/}
4. How to introduce CSS
There are three ways to introduce a style sheet:

 

 
  
External style sheet
 
  
Internal style sheet
 
  
Inline Style

 
4.1 External Style Sheets
When a style needs to be applied to many pages, the external style sheet is ideal. When using an external style sheet, you can change the appearance of the entire site by changing a file. Use the <link> label to link to the style sheet on each page. <Link> tag in (document) header:
4.2 internal Style Sheets
When a document requires a special style, you should use an internal style sheet. You can use the <style> label to define an internal style sheet in the document header.
4.3 inline Style
Inline style refers to writing CSS styles directly in the style attribute of HTML tags. Note that CSS is introduced in this way, you do not need to write the selector.
<P>/* Public style */body {margin: 0px; padding: 0px;}/* navigation style start */# nav {...... }/* Navigation style ends */
6. CSS Selector
The CSS selector is used to select the pattern of the element you want.
6.1 wildcard Selector
* Select all elements from the selector. * The selector can also select all elements in another element:
* {/* Select all elements */margin: 0; padding: 0;} div * {/* select all elements under the div element */color: blue ;}
6.2 element Selector
The element selection operator uses the existing tag name in the webpage as the name selection operator.
Body {/* select the element whose label is body */font-size: 16px;} a {/* select the element whose label is a */text-decoration: none ;}
6.3 group Selector
In addition to specifying styles for a single tag, you can also define the same style for a group of tags. Use commas to separate the separators. You only need to write the style once for elements that use the same style on the page.
h1,h2,h3,p{             font-size:16px;    color:red;}