css

Know and learn CSS

1-1 Add style inside HTML

Add statement

<input type='text' placeholder='Mobile phone number' style=' '>

1-2 font size /font weight

In CSS, the style is determined byProperty and Value< /span> composition

The format is attribute:value;

font size

Format font-size:36px;

Bold font

Format font-weight:100;

400-->normal(normal thickness) 200-->lighter(thin) 700-->bold

1-3 font color/text alignment

Color

1, English letters

such as color: black; color: blue; color: red;

2, hexadecimal color

By# The range of each number at the beginning is 00-FF

such as color: #DAE8FC; color: #D5E8D4;

3, reb form

is determined by red, green and blue, and the range of each color is 0~255

such as color: rgb(253,217,106);

4, rgba format

There is one more a than rgbd, a is transparency Alpha, a is between 0-1, 0.4 can be written as .4

such as

color: rgba(253,217,106,1.0)

color: rgba(253,217,106,0.3);

Note

1. It is recommended to use hexadecimal expression

2. You can use English letters when debugging. The initial debugging is to set a color randomly and check the block Whether it exists, etc., we will encounter in the joint model

3. Set text transparency or background transparency, use rgba format

Text Center/Left/Right

Set text alignment format

• text-align: center; Text is centered

• text-align: left;text left alignment

• text-align: right;text right alignment

1-4 text line height/word spacing/font

line height

Setting format of line height: line-height: 30px;

Function: 1. Change the distance between lines in a paragraph

2.Center the text up and down , first write text-align: center; then set the line-height to be consistent with the height setting

Word spacing

refers to the format of setting the word spacing between letters and letters: letter-spacing: 30px;< /span>

Font

Such as Song style, official script, etc.

Set font method keyword+value

'Goudy Bookletter 1911', sans-serif, 'Gill Sans Extrabold';

When the computer loads, it will start looking for the first font, and the first one will not be searched in turn

Notes on font writing:

• Separate multiple fonts with commas

• When there is a space in the font name, quotes are required, both single and double quotes

• Chinese font names should use spaces: '宋体'

2-1 Three ways to introduce CSS

Inline style

In order to reduce the number of labels and achieve simplicity, introduceInternal styles

Internal style

1. Extract the CSS style

2. Declare a < style>< /style> tag in the head tag

3. Put the style inside the style tag

4. The same tag, written in the same curly braces {}, add a tag before the curly braces name

<style>
 p{
 font-size: 16px;
 color: #FFFFFF;
}
</style>

External style

When adding more style tags, it will appear top-heavy

Introduce css to store style code

1. Create an index.css file

2. Write < style>

3. Establish the link between HTML and CSS files, that is, link tags to introduce CSS files

<link rel='stylesheet' type='text/css' href ='index.css' />

Supplementary knowledge

CSSInternal commentsis

/* */

External comments Comment directly in the .css file

link

1. relattribute< code >relThe attribute specifies the relationship between the current document and the linked document, butrelstylesheetThe value is supported by all browsers, which means you only need to remember one value.

stylesheet means the external style sheet of the document.

2.typeattributetype attribute specifies the MIME (Multipurpose Internet Mail Extensions) type of the linked document,type< /code>The most common value corresponding to the attribute istext/css , this type describes the style sheet.

3.hrefAttribute< /code>href attribute followed by the link address to be imported

2-2 relative path/absolute path

Absolute path

Such as a picture position (clear position)

<img src='E: ook page layout g.jpg' />

relative path

Definition: The so-called relative path is relative to the location of the file itself, to find the resource file to be imported

There are index.html and index.css under the text file

Currently import index.css in index.html to use ./current folder directory

../: Return to the previous folder directory

../Return to the previous layer, if there are multiple layers, use multiple../< /span>

css/ means to enter the css file

2-3 common selectors

Label selector

 That is, define once, use multiple times
divided into original style internal style external style
< /pre>

Selector cascading
 After a tag, continuing to add tags will overwrite the previous tag
< span md-inline='strong' >Class selector
Give specific attributes to a piece of text
Define
<p class='article'>
 class is the keyword to define the class, article It is a class name, the class name can be arbitrary, but it must conform to the specification
</p> ;
use
.article {
color : red;
font-size: 14px;
}
The internal style should be written between < style> < /style>
External styles are written directly in the .css file

A label can add multiple class names, with spaces between class names
<p class='common color font-size'>
 common sets the general style, color sets a special color, font-size sets a special font size
</p> 
id selector
Define
<p id='p-item'>This is a piece of text</p >

Usage
#p-item {
 font-size: 24px;
 font-weight: 400;
}
Note
1. The id selector can only appear once
2, id can only have one label

2-4 Advanced Selector
 1.Descendant selector
p a ---- select all a tags within all p tags
Writing rules: separated by spaces
/* Select all elements with the class name box inside the tag with the id named password All p tags*/
#password .box p{}
/* Select all p tags inside All span tags*/
p span{}
/* Select all class names inside all p tags Label for spanItem*/
p .spanItem{}
2.Intersection selector
writing rules
a.special{}
<a href ='#' class='special'>hyperlink</a>
<a href='#'>Hyperlink</a>
<a href='#'>Hyperlink</a> 
<a href='#' >Hyperlink</a>
Select all labels with the class name special in a

3.Child selector< /span>
Descendant selector highlights descendants
The child selector highlight is 'child'
Code comparison
span {
 color: black;
}

p span {
 color: orangered;
}

span {
 color: black;
}

p> span {
 color: orangered;
}

4,Union selector 
Add the same style to different tags, or tags with different class names
rules after the label name or Class names are separated by commas
.box,p,h3,.phone{}
< p cid='n174' mdtype='paragraph' >Add the same attribute to the box and phone tags named p and h3
2-5 selector priority
Priority of individual selectors 
 id selector> class selector> Label Selector
p {
 color: blue;
}

.poem {
 color: red;
}

#ch-poem {
 color: purple;
}
The final color is purple Because the id selector has a higher priority
Inheritance of text attributes
<ul class='ul-item'>
 Jianjia
 <li>The reeds are pale, and the white dew is frost. The so-called Iraqis are on the water side. </li>
 <li> Follow it back, the road is long and obstructive. Backtracking from it, Wan is in the middle of the water. </li>
 <li>The reeds are luxuriant, and the white dew is not yet shining. The so-called Yi people are in the Mee of the water. </li>
</ul>
 .ul-item {
 color: #ff6973;
}< /span>
All turn red, reflecting the inheritance of text attributes< /span>

Priority of advanced selector
 Weight method
Available via id selector> class selector > Tab Selector
It can also be assumed that the id selector is 100, the class selector is 10, and the label selector is 1; compare and calculate
The role of weight
<ul class='ul-item'>
 < span>li>
 <p>What is the color of the text? </p>
 </li>
</ulul span>>
 ul li p {
 color: blue;
}
p {
 color: red;
}
< p cid='n192' mdtype='paragraph' >The first is 3 and the second is 1
Sometimes the weight does not work
.ul-item li {
 color: blue;
}
p {
 color: red;
}
Because the first one is not selected P