Java EE------CSS Cascading style sheet Knowledge points Summary

Css

1. CSS Overview
* Cascading style Sheets: Cascading style Sheets
* * Cascade: One layer at a level (priority, whichever style is final)
* * Style sheet: Lots of attributes and property values
Enhance the appearance of the page

CSS separates page content from display styles, improving display functionality

* To use CSS, you must use it with HTML

2. How CSS and HTML are combined
(1) Each HTML tag has an attribute style, which sets the style
* <div style= "background-color:red;color:green;" > Days of the road, the loss of surplus and insufficient, is the false victory, not enough. </div>
* Format style= "property name 1: Property value 1; property Name 2: Property value 2"
(2) Use one of the HTML tags <style type= "text/css" > CSS code </style>
* The general style tag is written in the header label
* Div {
Background-color:black;
Color:white;
}
* Application Scenario: Just set this style on one page, other pages set other styles

(3) Use the statement inside the style tag
* First create a CSS file
* <style type= "text/css" > @import url (css file path); </style>
* <style type= "Text/css" >
@import URL (div.css);
</style>
* Note: Not supported under some browsers

(4) Introduction of external CSS files
* Use the head tag link
* <link rel= "stylesheet" type= "Text/css" href= "Css_3.css"/>
* Application Scenario: For example, there are now 10,000 pages, 10,000 pages need the same style

* * CSS Precedence
* HTML code Loading order: loading from top to bottom
* Typically, post-load priority is high

* * Format: Property name: Attribute value; Property Name: property value;

3, CSS basic selector
* on which label to set the style
(1) Tag Selector
* Use tag name as Selector
* p {
Background-color:green;
}
(2) class selector
* Each HTML tag has an attribute class
*. haha {
background-color:red;
Color:green;
}

(3) ID Selector
* Each HTML tag has a property ID
* #hehe {
Background-color: #990099;
Color: #ccff99;
}
* ID recommended not the same, after JS get the value

* * Priority level
Style > ID > class > tag Selector

4. Extension selector for CSS
(1) Association selector (sets the style inside the nested tag)
* <div><p>aaaaa</p></div>
* <p>bbbbb</p>
* * Set the contents of the P tag inside div

* Div P {
Background-color:blue;
}

(2) Combo Selector (set different labels with the same style)
* <div>qqqqqq</div>
* <p>wwwwww</p>
* * Set DIV and p to have the same style

* Div,p {
Background-color:orange;
}

(3) pseudo-class element selector (Learn)
* Achieve some simple dynamic effects
* Not a real selector, there are some selectors available in CSS that can be used directly
* * Status of hyperlinks
* Original state mouse on (hover) Click (Instant) Click After
: link:hover:active:visited
* How to remember:
LV ha

5. CSS Box model
* To make a layout, the data must first be encapsulated in an area (DIV)
* Border Border:border-width | | Border-style | | Border-color
* * up or down border-top border-bottom border-left border-right
* Inner margin: padding:length
* * up and down four internal margins
* Margin: Margin:length
* * There are up and down about four margins

6. CSS layout (floating)
* Float Property: Left Right

7, Case: Achieve the effect of picture and text mixed

8. CSS layout (positioning)
* Position:absolute Relative
* * Absolute: Drag objects out of the document stream and position them using left, right, top, bottom
* * Relative: Do not drag objects from the document stream, use left, right, top, bottom to locate

Java EE------CSS Cascading style sheet Knowledge points Summary