css-Basic Syntax/reference/Text settings/selectors/

 css-Basic Syntax/reference/Text settings

CSS basic syntax and page reference CSS basic syntax

CSS is defined by:

Selector {property: Value; property: Value; property: Value;}

A selector is a name that associates a style with a page element, and a property is a style property that you want to set with one or more values for each property. code example:

div{width:100px; height:100px; color:red}

CSS Page Introduction method:

1, Outreach: through the link tag, linked to the external style sheet to the page.

<rel= "stylesheet"  type= "text/css"  href= "css/ Main.css ">

2. Embedded: Create an embedded style sheet on a Web page by using the Style tab.

<styletype= "Text/css">Div{width:100px;Height:100px;Color:Red}    ......</style>

3. Inline: Write the style directly on the label by using the Style property of the label.

<style= "width:100px; height:100px; color:red">... </ Div >

4. Import: The introduction of a standalone. css file into an HTML file, imported using CSS rules to introduce external CSS files,<style> tags are also written in the

<type= "Text/css">          @import "mystyle.css"; note the path to the. css file here  </style>　

CSS text settings

CSS styles for commonly used text:

• Color sets the colour of the text, such as: color:red;

• Font-size set the size of the text, such as: font-size:12px;

• font-family Set the text font, such as: font-family: ' Microsoft ya Black ';

• Font-style Set the font tilt, such as: Font-style: ' normal '; Set no tilt, Font-style: ' Italic '; set text skew

• Font-weight set the text whether bold, such as: Font-weight:bold; Set bold Font-weight:normal setting not bold

• Font set several properties of the text at the same time, the order of writing has compatibility problems, it is recommended to write in the following order: font: Whether bold font size/line height, such as: Font:normal 12px/36px ' Microsoft Ya Black ';

• Line-height set the line height of the text, such as: line-height:24px;

• Text-decoration set the underline of the text, such as: Text-decoration:none; Remove the text underline

• Text-indent set the first line of text indentation, such as: text-indent:24px; Set the first line of text indent 24px

• Text-align Set Text horizontal alignment, such as Text-align:center set text to center horizontally

CSS Color notation

There are three main ways to represent CSS color values:

1, color name, such as: Red Red, gold gold

2, RGB means, for example: RGB (255,0,0) Red

3, 16 binary numerical representation, such as: #ff0000 is red, this can be written in simple #f00

CSS Selector

There are several common selectors:

1. Tag Selector

The tag selector, which has a large range of effects, is recommended to be applied to the hierarchy selector as much as possible.
Example:

*{margin:0;padding:0}<!--apply to all labels -div{color:red}<!--apply to div tags -<Div>....</Div>   <!--here is the use, corresponding to the above two styles -<Divclass= "box">....</Div>   <!--corresponds to the above two-bar style -

2. ID Selector

By selecting an element with an ID name, the ID name of the element cannot be duplicated, so a style setting item can only correspond to the previous element of the page, cannot be reused, and the ID name is generally used for the program, so it is not recommended to use the ID as a selector.
Example:

<id= "box">.... </ Div >   <!--   -

3. Class Selector

By selecting elements through the class name, a class can be applied to multiple elements, multiple classes can be used on an element, flexible and reusable, and is the most applied selector in CSS.
Example:

. red{color:red}.big{font-size:20px}.mt10{margin-top:10px}<Divclass= "Red">....</Div><H1class= "Red Big mt10">....</H1><Pclass= "Red mt10">....</P>

4. Level Selector

The main application is to select child elements under the parent element, or sub-elements below the child element, which can be used in conjunction with the LABEL element, reduce the naming, and also prevent naming collisions through hierarchies.
Example:

. Box Span{color:red}.box. red{color:pink}.red{color:red}<Divclass= "box">    <span>....</span>    <ahref="#"class= "Red">....</a></Div><H3class= "Red">....</H3>

5. Group Selector

Multiple selectors, you can use the group selector if you have the same styling settings.
Example:

e,f a multi-element selector that matches all E or F elements, separated by commas between E and F:d iv,p {color: #f00;} E F descendant element selector that matches all f elements that are descendants of the e element, separated by a space between E and F: Li a {font-weight:bold;} e > F child element Selector, matching all elements of e element F:d IV > P  {color: #f00;}  E + F adjoins the element selector, matching all sibling elements immediately following the E element F:d IV + P {color: #f00;} E ~ F Ordinary Sibling selectors (separated by dashes):. DIV1 ~ p{font-size:30px;}. Box1,.box2,.box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box2{background:gold} <Divclass= "Box1">....</Div><Divclass= "Box2">....</Div><Divclass= "Box3">....</Div>

6, Pseudo-class and pseudo-element selector: Designed to control the display effect of the link

Common pseudo-class selectors have hover that represent the state of the mouse hovering over an element, and pseudo-element selectors have before and after, which can be used to insert content into an element by style.

        A:link (links that have not been contacted) are used to define the general state of the link.        A:hover (the state on which the mouse is placed on the link) for creating visual effects.                a:visited (visited links), used to read articles, can clearly judge the links that have been visited.                A:active (the state when the mouse is pressed on the link), which is used to show the link state when the mouse is pressed.                pseudo-Class selectors: pseudo-class refers to the different states of the label:                           a ==> point over state no point over state mouse hover state activation state                A:link {color: #FF0000}/* not visited link */                a:visited { Color: #00FF00}/* Visited link */                a:hover {color: #FF00FF}/* Mouse moved to link *                /a:active {color: #0000FF}/* Selected link */format: Label Sign: Pseudo-class name {CSS code;}

before afterPseudo class

: Before    p:before       insert content before each <p> element      :        after p:after in each  <p> elements Insert following     example: p:before{content: "Hello"; Color:red;display: Block;}

css-Basic Syntax/reference/Text settings/selectors/