div+css基础1

层叠样式表 Cascading Style Sheets 简称 css

1、外部样式表（把demo写在css文件中，在index中用link引用）

<link rel="stylesheet" type="text/css" href="mystyle.css">

2、样式表的基础语法

h1{color:red;font-size:14px;}

h1是选择器 color是属性 red是值

用花括号包围声明

3、内部样式表

.div1{                      //注意div前面一定要加.
background: red;    //背景颜色
width: 100px;　　  //宽
height: 100px;　　//高
color: blue;　　　　
}

每行结束都使用分号

内联样式（在<p>内加style,后面为“属性：值”的格式，以分号结束）

<p style="color: red; margin-left: 20px">
这是一个段落
</p>

 

import 引用样式（在css中另写一个XXX.css，在style中用import导入）

<style type="text/css">
@import url(XXX.css);
</style>

 

 

常用的选择器（控制对应标签属性）

类选择器（class）

.demo1
<div class="demo1">
demo1
</div>

 

元素选择器

p{
color: red;
}

 

ID选择器

名字唯一,不可重复

#demo2{
color:grey;
}

 

<div id ="demo2">

　　demo2

</div>

 

* 通配符选择器：更改的是所有属性

群组选择器

.div1,.div2{  
width: 400px;
height: 400px;
}　　　　　　　 //用于两者或多者相同属性的规定

.div1{
background: red;
}
.div2{
background: blue;
}

后代选择器

.ul1 li{
color: red;
}

<ul class="ul1">

　　<li>。。。</li>

　　<li>......</li>

　　<li>XXX</li>