Getting started with css

1. Concept: Cascading Style Sheet (Cascading Style Sheet) is referred to as "CSS", usually also known as "Style Sheet (Style Sheet)". It is used for web page style design 2. Common usages 1 . You can add styles to all the same tag elements in the page, such as: div area 1 div area 1 Name: Results: You can add tags div{ border:#F90 dashed 2px in the head tag of this page ; height:200px; width:400px; } input { border:none; border-bottom:#000 1px solid; } .haha{ Styles are given to specific elements in the web page. Elements are defined with class attributes, class="haha" */ border:none; } #userBirth{ /* A hash # sign is added before the style name, which means that this style is for the page. The specific element in the element has an id attribute defined, and id="userBirth" is also rarely used, because id is mostly used in js. There is no need for one ID to be the same style. In many cases, class is used. Multiple tags use one style, which has high scalability. Easy to modify. */ border:none; border-bottom:#000 1px solid; } Second, the css file can be written to an ordinary text file separately to ensure that it is used. ;The tag is loaded like: @import Import URL (2.css);/ *Import the outside 2.CSS text into */ & lt;/style & gt; & lt;/head & gt; 3, overlinks There are four types of overlinks. The status can be specified, which are a:link (before visiting), a:hover (before the mouse is placed but not clicked), a:active (the mouse is put into the click but the mouse is not released), and a:visited (after visited). kind. It is generally recommended that a:link and a:active be a group and use one style. a:hover, a:active is a group using another style. For example: a:link{ background-color:#06F; color:#FFF; text-decoration:none; a:hover{ background-color:#FFF; color:#F00; font-size:24px; } ...and so on. 4. The priority in label css You can specify an ID and Class for the label div, or use style directly, as shown below: This is a div area 2 So what is the priority:: tag selector 5. Introduction to simple div style #div_1{ /*border-bottom ; background-color:#F90; /*padding:20px 100px 200px 300px;top right, bottom left margin:0px;*/ float:left; /* float is floating. After the original position is moved, the label below will push over. For example, this float:left will float the inside of the label to the left. Then the original text below can flow directly to the right, and the div below will squeeze in. Position is positioning, and it can be positioned absolutely. After positioning, the original position will be It is occupied by other tags, because once it is positioned, it is pulled out of the text flow. It does not belong to the ordinary text flow and does not occupy the position of the ordinary document flow. */ } To mix images and text, use float:left in the CSS style, so that the text under the original image will automatically flow to the right side of the image.