Getting the basics css3 series -1.css

How 1.css quote

internal
Outside
Inline

The sample code

Css Internal Code Example ####

<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		h1{
			color: red;
		}
	</style>
</head>

External css Code Example ####

<head>
	<meta charset="UTF-8">
	<title>index</title>
	<link rel="stylesheet" href="test.css">
</head>
<body>
	<h1>微信公众号：全栈学习笔记</h1>	
		
</body>

css document which code (test.css)

h1{
	color: red;
  }

#### css inline code sample

<h1 style="color:red">

It is recommended to use the second way, try not to use the other two methods, the second approach may be html files css files separate code readability and maintainability stronger

2.css priority

Inline style
id selector
class selector
label

The so-called inline style is above a third way, css style levels in this way is the highest. What is the priority? For example, I was in a label inside, style set up a color attribute, then add a label to the class, is a css file on outreach. The css file which is written on this class of css styles, is also a color attribute, then, gave the label added a id, then I'll give the corresponding id in css inside plus a color style, then go for this tag write a color on the property itself, in the end you will find the color last displayed inside a style of color, if you delete a style, then display the corresponding color is the color id, and so on, which is called the css priority.

3.css comments

And many languages, css also commented code in the following format

 /* 注释 */

4.css unit of length

px pixels
em multiples

These are the most commonly used units, some units such as the length of the new css3: vw, vh, vmin, vmax, rem em and

5.css color units

red
#ff0000
#f00
rgb(255,255,255)

Usage such as: color: red

6.css selector

More inside css selectors, here being only the introductory part of the selector, will be out later explain a selector, a point not lost focus Oh, micro-channel public number: full stack study notes, is being perfected. I am looking forward to your attention Oh!
Here Insert Picture Description

Selector rough breakdown

Common selector
The basic selector
Level selector
Pseudo class selector
Attribute selectors

Briefly outline the common selector:

1.html selector

*{
	color:red;/*设置页面全部的字体样式属性*/
 }

2. Class Selector

.className{
	/*设置某个class=className的全部标签的样式属性*/
	color:red;
}

3.id selector

#id{
	/*设置某个id=id的标签的样式属性*/
	color:red;
}

4. associated selector
associated selectors what is it? Definition: selector selector

<div class="div">
		<h1>这是全栈学习笔记的关联选择器</h1>	
	</div>

css code

.div h1{
			color: red;
		}

The effect achieved is this: In the class for the div below the color attribute h1 tag is red

5. Combination Selector

div,h1{
			color: red;
		}

Note distinguished from the above code, the code's function is to implement all of the class for the div tag and h1 tags, their color property set: red. In general, color is a color of the text attribute settings. Caishuxueqian!

css tutorial on this issue here, as well as a variety of common attribute value of the property next css will be explained! Followers want to point oh! Micro-channel public number: full stack study notes

div tags and h1 tags, their color property set: red. In general, color is a color of the text attribute settings. Caishuxueqian!