An article that takes you through CSS basics in detail

catalogs

I. CSS Style Sheets

Second, CSS style rules

1. Selector

Second, the introduction of CSS style sheets

1. Introduce CSS in-line

2. Inline introduction of CSS styles

3. Chained introduction of CSS

Third, the basic CSS selector

1. Marker selector

2. Class Selector

picker

4. Wildcard selector

Fourth, CSS text appearance properties

(1) Predefined colors:

(2) Use of hexadecimal definitions

(3) RGB code

-spacing

-height

-align

-transform

-decoration

Example:

Realize the effect:

-indent

-space

V. CSS list markup

1. Unordered list

Attention:

Example:

Realization of results:

2. Ordered lists

Example:

Realization of results:

3. Define the list

Example:

Realize the effect:

4. Application of list nesting

Example:

Six, CSS font settings

-size

-famiy

-weight

compiler

-variant

-style

Seven, with CSS control list style

1. Example code

Realize the effect:

VIII. Hyperlinks

1. Grammar

2. Examples

Realization effects

3. Anchor connection

4. Connecting pseudo-classes to control hyperlinks

5. Hyperlink pseudo-classes

Attention:

IX. Tables and forms

1. Creating Forms

（1）

（2）

（3）

Tag Attributes

（1）border

（2）cellspacing

（3）cellpadding

Results.

Tag Attributes

（1）height

（2）align

（3）bgcolor

（4）background

（5）valig

（6）bgcolor

Tag Attributes

tab (of a window) (computing)

X. Forms

1. Role

2. Composition

(1) Reminder

(2) Form fields

(3) Form Controls

3. Creating Forms

（1）action

（2）method

(3) GET request

(4) POST request

（5）name

a control (e.g. button, text box etc) (computing)

(1) Single-line text input boxes, radio buttons, check boxes, buttons, etc.

Single line text input box

password box

(2) Single choice

(3) Multi-select box

(4) Buttons

(5) Picture button

(6) File upload button

（7）value

a control (e.g. button, text box etc) (computing)

Attributes of the select and option tags

7. Grouping

basic grammatical format

XI, CSS control form style

Control background color and image in

(1) Setting the outer margin

(2) Setting the inner margin

(3) Setting the mouse

I. CSS Style Sheets

existhtml pageIt can make the page beautiful, generous, and easy to upgrade, easy to maintain, and also realize the separation of structure and display.

Second, CSS style rules

1. Selector

for specifyingCSS styleThe HTML object that is used, with the display style for that object in parentheses.

Selector {attribute1: attribute value 1; attribute2: attribute value 2; attribute3: attribute value 3 ...... attribute n: attribute value n}

Attribute values and attribute values between the use of "key-value pairs" way to appear, with the English ". ", and ";" is used to distinguish between multiple keys.

Advantages: the use of flexible, you can do the same tag different settings CSS style

Cons: Can't standardize formatting within the same tab.

colorSet the display color

font-size: set the display font size

text-align: set text alignment

intitle: search content, you can precisely match the search content

In CSS, /* */ is used to comment out content

Second, the introduction of CSS style sheets

1. Introduce CSS in-line

Inline style, also commonly referred to as inline style, is the syntactic formatting that sets the style of an element through the style attribute of a tag:





<Tag name style="Attribute 1: attribute 1: attribute value 1; attribute 2: attribute value 2; ...... Attribute n: attribute value n">




 



       element



 




</label name>

Advantages: the use of flexible, you can pass yo a label to do different settings CSS style

Cons: Can't standardize formatting within the same tab

2. Inline introduction of CSS styles

Write the CSS code centrally in the HTML document, this CSS style code is in the <head> head tag and is formatted using the <style> syntax:




<head>



 



     <style type="text/css">




 



     Selector {attribute1: attribute value 1; attribute2: attribute value 2; attribute3: attribute value 3 ...... attribute n: attribute value n}



 



     </style>




 



</head>

3. Chained introduction of CSS

Chaining is to put all the styles in one or more external style sheet files with a .css extension, and introduce them into the HTML document through the <link> file, the basic syntax format:




<head>



 



    <link rel="stylesheet" type="text/css" href="css file path">




 



</head>

If the CSS file and the HTML document are not on the same disk, use fil:/// absolute paths.

Third, the basic CSS selector

1. Marker selector

It refers to the use of HTML tags as selectors, categorized by tag name, to specify a uniform CSS style for a certain class of tags on the page.

Tag name {attribute 1: attribute value 1; attribute 2: attribute value 2; .... ; attribute n: attribute value n}

2. Class Selector

Use the English symbol ". ", followed by the class name, the basic syntax format:

. Class name {attribute 1: attribute value 1; attribute 2: attribute value 2; .... ; attribute n: attribute value n}

CSS for adding a range attribute to one of the tags

Tag Name. Class name {attribute 1: attribute value 1; attribute 2: attribute value 2; .... ; attribute n: attribute value n}

CSS for adding a range attribute to a class

. Class name 1. Class name 2 {attribute 1: attribute value 1; attribute 2: attribute value 2; .... ; attribute n: attribute value n}

Valid only if class 2 is introduced to the extent that class 1 was introduced first

picker

The id selector is usually denoted by # followed immediately by the id name in its basic syntax format:

id name {attribute 1: attribute value 1; attribute 2: attribute value 2; .... ; attribute n: attribute value n}

CSS scope control can be achieved in the following ways




#id name #id name 02{attribute 1: attribute value 1; attribute 2: attribute value 2; .... ; attribute n: attribute value n}



 



#id name . Class name {attribute 1: attribute value 1; attribute 2: attribute value 2; .... ; attribute n: attribute value n}

4. Wildcard selector

Usually use * to represent, it is the scope of the entire HTML page in all the elements, the basic syntax format

*{attribute 1: attribute value 1; attribute 2: attribute value 2; .... ; attribute n: attribute value n}

Fourth, CSS text appearance properties

This attribute is used to define the text color, which can be taken in three ways:

(1) Predefined colors:

red, yellow, blue, etc.

(2) Use of hexadecimal definitions

#FFF6600, which is commonly used in practice, is thehexadecimal

(3) RGB code

Red: rgb(255,0,0)

-spacing

Used to define the word spacing, that is, the space between the character and the character, the value of its attributes can be different units of value, allowed to be negative, the default is NORMAL, a positive number is to increase the arduous, negative is to reduce the spacing.

-spacing

Used to define the spacing between English words, not valid for Chinese characters, the value is the same as the letter-spacing above.





.p1{



 



   color:red;



 



   letter-spacing: 70px;



 



   }



 



   .p2{



 



   color: blue;



 



   word-spacing: 70px;



 



   }

-height

Used to set the line spacing, the value of its attribute has three units, respectively, px, em, %

-align

Sets the horizontal alignment of the text content, equivalent to the align attribute in html.

left

right

center

-transform

You can control the case of English characters with the following attribute values:

none: no conversion

capitalize: initial capitalization

uppercase: convert all characters to uppercase

lowercase: all characters converted to lowercase

-decoration

Controls the underlining of text with the following property values:

none: no decoration, default value

underline

overline.

line-through: strikethrough

Example:




<html>



 



.p3{



 



   



 



line-height: 25px;



 



text-align: center;



 



color:blue;



 



font-size: 15px;



 



letter-spacing: 25px;



 



 



}



 



.p4{



 



text-align: center; /* centered */



 



text-transform:capitalize ; /* initial capitalization */



 



text-decoration: underline; /*underline*/



 



}



 



.p5{



 



text-align: right; /* right-aligned */



 



text-transform:uppercase ; /*Letter capitalization**/



 



text-decoration: overline; /*upline*/



 



}



 



.p6{



 



text-align: right; /* right-aligned */



 



text-transform:uppercase ; /*Letter capitalization**/



 



text-decoration: line-through; /*strikethrough*/



 



}



 



   }



 



</style>



 



 



</head>



<body>



 



 




<p class="p4">hello world</p>




 




<p class="p5">hello world</p>




 




<p class="p6">hello world</p>




 



 



</body>



</html>

Realize the effect:

-indent

Used to set the first line of text indentation, its value attribute can be em, px, etc..

-space

Used to handle whitespace characters, there are three attributes

normal: default value, invalid for spaces and blank lines in the text, automatic line feed after a full line.

pre: pre-formatting, according to the writing format of the document to retain spaces, blank lines, display as is

nowrap: space, blank line is invalid, forced text can not be line feed, unless encountered label <br>, otherwise the content beyond the boundary does not line feed, if beyond the boundary will automatically increase.

V. CSS list markup

In order to allow users to read easily, so the web page information in the form of a list of displays, HTML provides three commonly used lists, respectively, unordered lists, ordered lists, the definition of lists

1. Unordered list

Unordered lists are commonly used in web pages, the reason why it is called an unordered list, because, in the list of each list item for the relationship between the side-by-side, the basic syntax of the format




<ul>



 



   <li>List item 1</li>  



 



</ul>

Attention:

1. The use of the type attribute of a whiskerless list is frowned upon, and is generally replaced by CSS styling.

2.<li></li> between the equivalent of a container that can hold all the elements, but <ul></ul> can only be nested between <li></li>, directly in the <ul></ul> in the text, is not allowed.

Example:




<body>



 



      <h2>Unordered List Test</h2>




 



      <ul>




 



      <li>List item 1</li>




 



      <li>List item 2</li>




 



      <li>List item 3</li>




 



      </ul>




 



</body>

Realization of results:

2. Ordered lists

An ordered list sorts the list items in a certain order, the basic syntax format is




<ol>



 



   <li>list item</li>




 



</ol>

Example:




<ol>



 



      <li>




 



      List item 1



 



      </li>




 



      <li>




 



      List item 2



 



      </li>




 



      <li>




 



          List item 3



 



      </li>




 



      </ol>

Realization of results:

3. Define the list

Usually use <dl> tags, often used for the even of terms, or the description of the noun, the definition of the list of list items do not have any bulleted, basic syntax format:




<dl>



 



   <dt>Noun 1</dt>




 



   <dd>Noun Explanation 1</dd>




 



    <dd>Noun Explanation 2</dd>




 



    .....



 



     <dt>Noun 2</dt>




 



   <dd>Term 2 Explanation 1</dd>




 



    <dd>Term 2 Explanation 2</dd>




 



</dl>

In web design, definition lists are often used to achieve the effect of mixed text and graphics

Example:

Realize the effect:

4. Application of list nesting

If you want to define sub-list items within a list item, you need to nest the list.

Example:

Realization of results:

Six, CSS font settings

-size

Used to set the font size of the font, this property can be used in relative length units or absolute length units.

-famiy

Used to set fonts, common fonts in the web page, there are Song, bold, Microsoft Yahei and so on.

-weight

Used to set the thickness of the font

-variant

Setting font variants, generally used to define upper and lower case letters

normal: default value

small-caps: converts all lowercase letters to uppercase

-style

Used to set the style of the font, e.g. set italics, etc.

normal: default value

italic:italicized

oblique: agreement

Seven, with CSS control list style

1. Example code




<!DOCTYPE html>



<html>



<head>




<style type="text/css">




   li{



      list-style: none ;                 /* Clear default list style */




      background: url(images/) no-repeat ;     /* Introduce images for list */




      padding-left: 26px;  /* Set left margin */




      line-height: 26px;  /* Setting line spacing */




      color: red;  /* Font color */




      background-color: white;  /* Background color */




   }



</style>



<title>



 



</title>



</head>



<body>



    <h2> Transnational Teaching Material</h2>




    <u1>




    <li>Photoshop CS6 image design case tutorial</li>




    <li>Web Design and Production (HTML+CSS)</li>




    <li>PHP Web Development Tutorials</li>




    <li>C Development Tutorials for Beginners</li>




    </u1>




</body>



</html>

Realize the effect:

VIII. Hyperlinks

1. Grammar

Can help web sites to realize, from a page to other pages.

To create a hyperlink in HTML, simply <a></a>




<a href="Jump targets" target="Pop-up mode of the target window">



 



Text or Image



 



</a>

The value of target: _self means open in the original window, _blank means open in a new window.

2. Examples




<!DOCTYPE html>



 



<html>



 



<head>



 



<meta charset="utf-8">



 



<meta name="viewport" content="width=device-width, initial-scale=1">



 




<title></title>




 



</head>



 



<body>



 



      <! -- Text hyperlinks -- >!




 



      <a href="" target="_self">Baidu's website</a>




 



      



 



      <! -- image hyperlinks -->




 



      <a href="hyperlink.html" target="_blank">




 



      <img src="C:\Users\DD\Desktop\">




 



      </a>




 



</body>



 



</html>

Realization effects

3. Anchor connection

When browsing the web, to increase the speed of information retrieval, anchor links can be created to allow users to quickly locate the target content




<a href="#id name">



 



link text



 



</a>

In the anchor, use the id name to

Create tag id names, just use the id attribute in the tag

<label name> random access memory (RAM)</label name>

4. Connecting pseudo-classes to control hyperlinks

In CSS, through the connection pseudo-classes, you can realize different connection states, is the hyperlink before clicking, after clicking, and when the mouse is hovering in different styles, hyperlink pseudo-classes have the following four kinds of

5. Hyperlink pseudo-classes

a:link{CSS style rule;} hyperlink status when not visited

a:visited{CSS style rule;} Connection status after visit

a:hover{CSS style rule;} mouse over hover state

Attention:

If you use 4 pseudo-classes at the same time, it will probably not work

Pseudo-classes can not only control the text style, but also set the hyperlink background, border and other styles

IX. Tables and forms

Tables are used in web pages not only for aligning data, but also for web page layout.

1. Creating Forms

Creating a table requires the use of 3 tags:

（1）<table></table>

Define a table

（2）<tr></tr>

Define a row in a table, nested in <table></table>

（3）<td></td>

Define cells in a table, nested in <tr> </tr>

Tag Attributes

（1）border

Set the border of the form (default border="0" no border)

pixel value

（2）cellspacing

Set blank margins between cells and cell borders

Pixel value, default is 2

（3）cellpadding

Setting the space between the cell content and the border




<body>



 



     <table border="1"  cellspacing="8" cellpadding="4">  <! -- Define the table -->.




 



     <tr>  <! --Define the first row in the table -->!




 



           <td>1-1</td>




 



           <td>1-2</td>




 



     </tr>




 



     <tr>   <! --Define the second row in the table -->!




 



     <td>2-1</td>




 



     <td>2-2</td>




 



     </tr>




 



     </table>




 



</body>

Results.

Tag Attributes

（1）height

Setting the row height

pixel value

（2）align

Setting Horizontal Alignment

letf center right

（3）bgcolor

Setting the rowsbackground color

Predefined color values, hexadecimal, rbg

（4）background

Setting the row background image

url address

（5）valig

Set the vertical alignment of this line

top,middle,bottom

（6）bgcolor

Setting the row background color

Predefined color value, hexadecimal, rgb

Tag Attributes

tab (of a window) (computing)

The th tag is usually used to set the header of the table, and its text is bolded and centered by default.

X. Forms

1. Role

It can be used to collect user information, or it can be used as a vehicle to submit information to the server through a form.

2. Composition

Tips, Form Fields, Form Controls

(1) Reminder

Mainly descriptive text that prompts the user on how to fill out and operate the program

(2) Form fields

Equivalent to a container for all form controls and prompts

(3) Form Controls

is the core of a form , contains specific form functional items , such as : single-line text input box , password box , check boxes , submit buttons and so on.

3. Creating Forms

To allow the data in the form to be submitted to the back-end server, it is necessary to define the form field, using <form></form> tags in HTML to define the form field, the basic format:




<form action="URL address" method="Mode of data submission" name="Form name">



 



    Various controls



 



</form>

（1）action

Used to specify the URL address of the server that receives and processes the form data.

（2）method

The user sets the submission method of the form data, which takes the value of GET or POST.

(3) GET request

Data is displayed in the browser's URL address, confidentiality is poor, and the amount of data is limited.

(4) POST request

Does not limit the data to the URL address, hides the data, better confidentiality, no limit on the amount of data

（5）name

Used to specify the name of a form to distinguish between multiple forms on the same page.

a control (e.g. button, text box etc) (computing)

(1) Single-line text input boxes, radio buttons, check boxes, buttons, etc.

causality

attribute value

corresponds English -ity, -ism, -ization

type

text

Single line text input box

password

Password input box

radio

radio button

checkbox

button

normal button

submit

Submit button

reset

Reset button

image

Picture Buttons

hidden

hidden field (computing)

name

User-defined

Define the name of the space

value

User-defined

Default text value for the input space

size

positive integer

The width of the input space to display on the page

disabled

Disable the control on first page load

maxlength

positive integer

Controls the maximum number of characters allowed to be entered

checked

Defining controls to be selected by default

Controls can still be inserted in <p></p> labels, or <br> labels can be

Single line text input box

password box

(2) Single choice

First radio-sex, only radio buttons can be selected

The second radio <lable> can expand the selection of controls

Although the effect is the same, clicking on the font still allows you to select the

(3) Multi-select box

(4) Buttons

(5) Picture button

(6) File upload button

（7）value

a control (e.g. button, text box etc) (computing)

Can create multi-line text input boxes, basic syntax formatting, commonly used in message boards




<textarea cols="Number of characters per line" rows="Number of lines displayed">



 



    text box



 



</textarea>

The two properties, rows and cols, may be understood differently and therefore displayed differently, which can be controlled in practice using CSS. The width and height of multi-line text.

a control (e.g. button, text box etc) (computing)

Drop-down menus can be defined. Basic syntax formatting




<select>



 



   <option>Option 1</option>




 



   <option>Option 2</option>




 



   <option>Option 3</option>




 



   。。。。。。。。。



 



</select>

Attributes of the select and option tags

tab (of a window) (computing)

Common Properties

descriptive

select

size

Specifies the number of visible options for the drop-down menu (takes a positive integer)

multiple

Define the multiple="multiple" dropdown menu to realize the multi-option function.

option

selected

Define that when selected="selected", the current option is selected by default.

7. Grouping

basic grammatical format




<select>



 



    <optgroup lable="Group name 1">




 



    <option>(cooked) rice</option>




 



    <option>sammy</option>




 



    <option>steamed stuffed bun</option>




 



    <option selected="selected">steamed bread</option>




 



    </optgroup>




 



    



 



    <optgroup lable="Group name 2">




 



    <option>(cooked) rice</option>




 



    <option>sammy</option>




 



    <option>steamed stuffed bun</option>




 



    <option selected="selected">steamed bread</option>




 



    </optgroup>




 



    ..............



 



    



 



</select>

XI, CSS control form style

Use CSS to control form fonts, borders, backgrounds, inner and outer margins, etc.

Control background color and image in

background: url (path) no-repeat

Special usage: set transparent background color, background:rgb(255,255,0,0,5) white 50% transparency

(1) Setting the outer margin

margin: top, right, bottom, left, in common px units

(2) Setting the inner margin

margin: top, right, bottom, left. Commonly used units are px

(3) Setting the mouse

cursor: pointer; hand mouse