Prerequisite for Software Testing-CSS basics of front-end knowledge points and usage of PS

CSS

One CSS definitions

CSS style sheets, cascading style sheets, cascading style sheets

Two CSS basic Syntax

1, write style tag, put in the head tag inside the last position

2, the CSS code you write , put in the style tag inside

Three CSS Common Properties

1,color: red; Set Text color

2,font-size:50px; Set Text Size

3,font-family: "Blackbody"; Set the font (if you set the Chinese font, double quotation marks are added!) ）

4,width:100px; Set width

5,height:100px; Set height

6,background:red; Set Background color

Four Tag Selector

The syntax of using tag names to select elements in CSS syntax is called tag selectors;

div tags represent large boxes, containers, and content (exclusive line)

span tags represent small boxes, containers, and content (multiple small boxes that can be displayed on the same line if the browser is wide enough)

Five ID Selector

sets the ID attribute for the HTML specified tag , and then uses the # designation from the CSS syntax ID of the name, the implementation of the ID selector;

Cases:

#div01 {}

<div id= "DIV01" ></div>

Naming details:

1. You cannot start with a number

2. Cannot use Chinese

3. You cannot use special characters (except underline _ and underline -)

4, you can use the Camel name method: The first word lowercase, the following words are capitalized in the first letter

Example: mydivred

Note : This naming method is a convention between programmers, the first word capitalization is not an error!

Note : The ID selector must be unique! You cannot set multiple ID namesfor a label; the name of the ID cannot be duplicated.

Six class Selector

Set the class property in HTML and use the name of the . Class in the CSS .

Example:

. div01{XXX}

<div class= "DIV01" >xx</div>

Note: The class name can be reused, the same label can be set multiple class name properties, in the middle using a space separating

Seven PS suction color

1, Simulation has a design draft (press the keyboard print screen or PRTSC) can achieve the screenshot effect

2. Open PS, click "File - new" in the menu bar

3, Pop-up window directly click OK,Ctrl + V can put the previous screenshot of the picture into PS

4, ALT + mouse wheel can zoom in and zoom out

5, Click on the bottom left corner of the icon , the mouse will become a straw, click the left mouse button to absorb color;

6, copy the value, put in the code, do not forget to add their own well number!

Eight, picture format

1. PNG can have a transparent effect of the diagram

2. jpg normal picture

3. gif motion diagram

4,. PSD PS software generated diagram (UI designer made)

Nine,PS common Operation

1, the English state press the keyboard T, you can let the PS pointer into a type tool, at this time we click the text you want to see the ps menu bar to see all the style properties.

2, measuring tools (first to change The default display units of PS);

This tool is used to measure the spacing, click, hold down the left mouse button to drag, you can see the width, high properties

10, The writing position of CSS

1,the style tag is written in the HTML file, called inline css; (the homepage of the e-commerce website must be used in this way, because the loading speed is the fastest)

2, link tags into the external CSS file to the HTML file, called outside the chain (in addition to the e-commerce page outside the pages, should use this form, because the implementation of the separation of code, easy to modify)

3, written in the tag CSS style, called inline css( do not use, it is very difficult to modify)

Prerequisite for Software Testing-CSS basics of front-end knowledge points and usage of PS