1.CSS样式引入
1.行内样式表
直接在元素上进行操作。style="属性1;属性2;"。可以对每个元素进行操作修饰
<div style="font-size: 18px;color: black;">
In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.
</div>
2.页面样式表
在html的头文件当中,用style对需要编写的样式进行包围。
选择器{
属性1;
属性2;
}
选择器包括元素选择器div、p、ul、li等等, div{ 样式1;样式2;}
类选择器 .类名{ 样式1;样式2;}
id选择器 #id{ 样式1;样式2;}
div{
font-size:18px;
}
h1{
margin: 0 0 50px 0;
}
h2{
margin: 20px 0 0 0;
}
3.链接式样式表
在头文件中引入<link rel="stylesheet" href="./demo.css"> 其中rel为关联的意思,关联一个样式表(stylesheet)的文档
<link rel="stylesheet" href="./demo.css">
4.嵌入式样式表
在头文件的style标签中进行文件引入。@import url('./demo.css');
@import url('./demo.css');
其中这三种样式表的优先级是行内样式表>页面样式表>>链接式样式表
同一个元素的样式设计将由优先级来决定。相同设定就行内样式表起作用,不同属性设定可以同时其作用