Javaweb css tutorial, javawebcss

Javaweb css tutorial, javawebcss

 

Css 1. css Introduction * css: stacked style sheet ** stacked: A layer-by-layer ** style sheet: many Attributes and attribute values * Better page display effect * CSS separates the webpage content from the display style, improving the display function. 2. Combination of css and html (four methods) (1) Each html tag has an attribute style, combine css and html-<div> background-color: blue; color: red;} </style> (3) use the statement in the style label (it does not work in Some browsers) @ import url (the path of the css file);-step 1, create a css file <style type = "text/css"> @ import url(div.css); </style> (4) use the header label link to introduce the external css file-step 1, create a css file-<link rel = "stylesheet" type = "text/css" href = "css file path"/> *** the third combination method has the following Disadvantages: it does not work in Some browsers. Generally, the fourth method is ** priority (generally) from top to top.. The priority is from low to high. * ** Higher priority after loading ** format selector name {attribute name: attribute value ;.......} 3. css basic selector (three types) ** operation on the data in the tag (1) Tag selector * use the tag name as the name of the selector div {background-color: gray; color: white;} (2) class selector * Each html tag has an Attribute class-<div class = "haha"> aaaaaaa </div> -. haha {background-color: orange;} (3) id selector * Each html tag has an attribute id-<div id = "hehe"> bbbbb </div>-# hehe {background-color: #333300 ;} * ** priority style> id selector> class selector> tag selector 4. css extension selector (1) association selector * <div> <p> wwwwwwww </p> </div> * sets the style of the p tag in the div tag, style * div p {background-color: green;} (2) in the nested label) combination selector * <div> 1111 </div> <p> 22222 </p> * sets the div and p labels to the same style, set different labels to the same style * div, p {background-color: orange;} (3) pseudo element selector (understand, the browser compatibility is poor) * css provides some defined styles. You can use the original state of the * For example, hyperlink ** to move the cursor up and click the state. After clicking the button, link: hover: active: visited ** memory method lv ha5, css box model ** before layout, You Need To encapsulate data into a single area (div) (1) border: 2px solid blue; border: uniformly set the padding of border-bottom left border-left right border-right (2) on border-top: 20px; you can also use padding to set up the four margin (3) margin: 20px; you can use margin for unified settings or set up four margins on top, bottom, and left. 6. float: ** attribute value left: right of the text to the right of the object: position: ** attribute value-absolute: * ** drag an object out of the Document Stream ** can be a top, bottom, or other attribute to locate-relative: * ** objects are not dragged out of the Document Stream. ** you can use top, bottom, and other attributes to locate objects.