CSS stowed position
CSS code can be placed on many of our location, there are three already concerned about the wording: inline CSS, outside the chain CSS, inline CSS.
Inline CSS: refers to the CSS code written in HTML pages.
Outside the chain CSS: refers to the CSS code written in an independent, external CSS file.
Inline CSS: refers to the CSS code written in specific HTML tags body.
Note: According to the principles browser rendering of the page, we will choose the CSS code written in HTML file forward position.
CSS written using the chain when the external independent CSS style code files which need to write the label, but also the need to link the label with a specific CSS file import HTML file attributes among rel [not] be omitted
< Link the rel = "this stylesheet" type = "text / CSS" the href = "CSS file directory path" />
For the above three CSS file location, the inline CSS weight is the highest, but the chain does not exist and who must be greater than the embedded Who phenomena (weights), it depends entirely on the ability to control word is used select weights
If you want to direct the right to revert to a certain style to the highest, we only need to set the final sentence in the CSS code! important
<style type="text/css"> div{ color: red!important; } </style>
1, audio tag
H5 refers to this new language HTML5 standard, which defines the HTML5 audio of a label can be introduced directly into a sound resource page which is used to define a label [audio sound resource module]
1 By default, the introduction of sound resources are not automatically play
2 HTML5 defines an autoplay attribute set to automatically play [now] but browsers do not support IE, Firefox, edage browser can support, Chrome does not support
controls control buttons, loop loop
autoplay, controls, loop is the same as the property value tag attribute names, generally written only label name
3 now, not what kind of audio compatible with all browsers, so we need as many different formats at the time of the introduction of the introduction of sound resources to take care of all browsers to ending this problem, HTML5 which is defined a new label called source
audio inside the text displayed when the browser version does not recognize the tag
< Audio autoplay Loop Controls > Sorry, your browser does not support the tag < Source src = "01.mp3" /> < Source src = "01.ogg" /> </ Audio >
2, video tag
vedio video tag is used to define a resource module
1 By default, the introduction of video resources are not automatically play
2 HTML5 defines an autoplay attribute set to automatically play [now] but browsers do not support IE, Firefox, edage browser can support, Chrome does not support
controls control buttons, loop loop
autoplay, controls, loop is the same as the property value tag attribute names, generally written only label name
Not what kind of video can be compatible with all browsers, so we need as many different formats at the time of the introduction of the introduction of 3 video resources now, in order to take into account all of the browser to the outcome of this issue, HTML5 which is defined a new label called source
<video width="200" height="" autoplay controls loop> <source src="02.mp4" type="video/mp4"></source> <source src="02.ogg" type="video/ogg"></source> <source src="02.webm" type="video/webm"></source> 当前浏览器不支持 video直接播放 </video>
3, the common text styles
1. High line: line-height, will be high when the line size set to the current height of the element, the effect of single line of text is centered vertically in the current element can be achieved.
2. Horizontal Alignment: text-align: left | center | right respectively represent horizontal alignment of the current text box is provided which
3. font size: font-size, the unit is px, the browser will generally have a minimum display font
4. Font thickness: font-weight, keywords or values may be set (100 to 900), keywords are normal, bolder
5. Font Name: font-family, commonly used is the "Microsoft elegant black," "blackbody"
6. Font color: color, you can set the color of the word, it may also be a hexadecimal number
4, text shadow
Text-like abbreviations: font: Text thickness size / line-height font
font : Bold 100 PX / 100 PX "Microsoft elegant black" ;
Text shadow: text-Shadow : . 3 PX . 3 PX 0 PX Aquamarine ;
A first yaw, vertically offset the second, third shadow blur degree, the fourth shadow color, allows to add multiple text shadow, separated by commas between the two groups, separated by spaces in the group
Recess text: text-Shadow : . 1 PX . 1 PX 0 PX White , -1 PX -1 PX 0 PX Black;
Convex text: text-Shadow : . 1 PX . 1 PX 0 PX Black , -1 PX -1 PX 0 PX White;
eg：
<style type="text/css"> body{ background-color: grey; } div{ color: grey; text-align: center; font: bold 100px/100px "微软雅黑"; /*凸文字*/ text-shadow: 1px 1px 0px black,-1px -1px 0px white; /*凹文字*/ text-shadow: 1px 1px 0px white,-1px -1px 0px black; } </style>
5、过渡属性
过渡属性的作用就是在元素的默认样式与最终样式之间产生的一个过程，在C3中新增了一个属性叫transition
transition: all 1.5s linear 0.2s;
第一个参数的表示设置在元素身上的哪些属性产生过渡，一般用all表示所有的属性都过渡。第二个参数表示过渡时间的长短。第三个参数表示匀速过渡。第四个表示过渡延时时间长短。1和3参数的单位s不能省略。
hover选择某个元素倍以上时的状态。
Transition这个属性既可以添加在元素默认状态，也可以添加在鼠标以上状态，区别就是第二种的做法在鼠标离开的时候不会有过渡变化。
6、CSS特性
1.在权重相同的情况下，同一个元素后写的CSS样式会覆盖先写的CSS样式
2.CSS的定义存在继承特点，子元素会继承父元素的一些样式
不是所有的CSS样式都能够被继承
不是所有类型的元素都会去继承祖先元素的样式（继承一般发生在块元素的身上）
继承就是指子元素可以继承祖先元素的一些样式
4. 不同选择器对同一个元素的CSS控制能力存在看强弱【优先级】