Detailed description of CSS in Javaweb

Introduction to CSS

1, CSS Overview and role

Css:cascading style Sheets) is a cascading style sheet used to define the display of a Web page. It can solve the duplication of style definition in HTML code, improve the maintainability of later style code, and enhance the function of the Web page display effect.
Function: CSS separates the content of the Web page from the display style, which improves the display function.

2. Combination of CSS and HTML (* * * * *) (four types)

How CSS and HTML are combined

1.style attribute mode:

Use the Style property in the label to change the display style for each label.

Cases:

<p style= "Background-color: #FF0000; Color: #FFFFFF ">        P label paragraph content. </p>

This method is flexible, but it is cumbersome for the same style definition for multiple identical labels, which is suitable for partial modification.

2.style label mode: (inline mode)

Add a style tag to the head tag to make a uniform change to multiple labels.

This way you can set the style of a single page uniformly, but not for the local flexibility.

3. How to import: (Common way)

The premise is that a well-defined CSS file already exists. A part of the page style needs to be used, then this way.

Cases:

<style type= "Text/css" >    @import url (css_3.css);    p {color: #FF0000;} </style>
Defines an external CSS file (. css) at the end of the.
@import URL ("Address of the CSS file"), which needs to be written inside the <style> tag

Note: The URL brackets must be followed by a semicolon to end. If the imported style duplicates the style defined on this page, the style defined on this tab will prevail.

4. How to Link: (Common way)

This is done through the link tag in the head tag, provided that you have a fixed CSS file first.

Cases:

<link rel= "stylesheet" type= "Text/css" href= "Css_3.css"/>
<link rel= "stylesheet" type= "Text/css" href= "the address of the CSS file" >, cannot be written in <style> inside, written inside the Rel: Represents the relationship between the current file and the introduction file.
Type: Types
HREF:CSS's address

Note: Multiple CSS files can be linked through multiple link tags. The repeating style is subject to the CSS style that the last link comes in.

3. CSS style precedence and code specification

Priority of 1.CSS

(in general) from top to bottom, from outside to inside, priority from low to high.
Special case: Tag name selector < class selector < ID selector < Style property

2. Code specification for CSS

(1) Selector name {attribute Name: property value; Property Name: Property value; ...}

(2) Separating attributes from attributes by semicolons
(3) attribute and attribute value are concatenated directly by colon

(3) If a property has more than one value, the value and value are separated directly by a space
Example

P{border: Value 1 Value 2 value 3}
4. CSS Selector (* * * * *)

1. Selector:

Which tag the CSS code is written on.

2. Basic selector:

(1) Tag name Selector

Each label defines the class attribute and the id attribute. It is used to identify labels and to facilitate the operation of labels.
In the definition, the class attribute values for multiple labels can be the same, and the ID values are unique because JavaScript is used frequently.

(2) Class selector: (Common)
Define the class attribute in the label and assign a value. The label is styled with the label name. Class value.
Cases:
When setting different styles for the same tag, use class to differentiate.

p.pclass_1 {color: #FF0000;} p.pclass_2 {color: #0000FF;}
<p class= "pclass_1" >p label style </p><p class= "pclass_2" >p label style </p>

When different tags are set in the same way, they are uniformly defined with class.

. classname {color: #00FF00;} <p class= "classname" >p label style </p><p class= "classname" >p label style </p>
(3) ID selector:
Similar to the class selector, but with different formats, the name of the selector is: #id值.
Cases:

#pid {color: #0000FF;} <p id= "pid" >p label style </p>
Note: Multiple tags can also define the same ID value, but there is an error with JavaScript's acquisition of the tag element. So the habit of making sure that the uniqueness of the ID value is good for future database design.

Priority (Special):
Tag name Selector < class selector < ID selector < Style property

3. Extended selector:

(1) Association selector: A relationship is created between multiple labels.

tags can be nested, so you can use this selector to show different styles for different labels in the same tag.

Cases:

p {color: #00FF00;} P B {color: #FF000;} <p>p tags <b> andy Lau </b> paragraph style </p><p>p tag paragraph </p>
Note: The middle is separated by a space

(2) Combo selector: Set the same style for several different selectors

p,p {color: #FF0000;} The <p>p tab displays the paragraph. </p><p>p Label Display paragraph </p>
Note: The middle is separated by commas
(3) Pseudo-element selector: CSS-defined Selector
If you use the 4 states of a hyperlink, the order in which it is used: L V H A

In fact, some selectors are predefined in HTML. is called a pseudo-element. is because of the CSS terminology.

Format: Tag name: pseudo element. Class name tag name. Class name: pseudo-element. All can.

A:link hyperlink is not clicked. Text-decoration:none;

The state after the a:visited is visited.

A:hover the cursor to the status on the hyperlink (not clicked).

A:active the status when the hyperlink is clicked.

Use Order L–v–h-a

P:first-line the first line of text in a paragraph.

P:first-letter the first letter in a paragraph.

P:focus the element that has focus. IE6 Browser is not supported, you can see the effect in Firefox.

Simple Exercises for CSS (review documents)

Table {font-family: official script; font-size:14px;color:black;border-width:1px;border-color:gray;border-collapse:collapse; width:200px;} Table th {border-width:1px;padding:8px;border-style:solid;border-color:gray;background-color: #dedede;} Table td {Border-width:1px;padding:8px;border-style:solid;border-color:gray;background-color: #ffffff;}
5. CSS Layout (learn)

1. Box model

You need to encapsulate the data in a piece of the area before you make the layout, and the jargon for this area is called a box.

The border (border) is divided up and down

The inner margin (padding) is divided into up and down

Margin (margin) is divided into the upper or lower

2.CSS Layout Floating Properties

Float (float)

None: Default value. object does not float
Left: Text flows to the right of the object
Right: Text flows to the left of the object

Clear (Clear)

None: Default value. Allowed to have floating objects on both sides
Left: does not allow floating objects
Right: Do not allow floating objects
Both: Floating objects are not allowed

3.CSS Layout Positioning Properties

 position 
 Static: default value. No special positioning, objects follow HTML positioning rules 
 Absolute: Drag objects out of the document stream, using left, right, top, bottom, and other properties to absolutely position them relative to the closest one of their closest-positioned parent objects. If no such parent object exists, then the body object is based. And its cascading through the Z-index property 
 Relative: Objects are not stackable, but will be offset in normal document flow based on properties such as left, right, top, bottom