CSS入门笔记

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');

其中这三种样式表的优先级是行内样式表>页面样式表>>链接式样式表

同一个元素的样式设计将由优先级来决定。相同设定就行内样式表起作用，不同属性设定可以同时其作用