学习css样式

一、引入css样式的几种方式

1、样式写在style标签中，style标签放在head标签中

2、用link标签对引入css文件，href：引入外部文件，rel:表示样式脚本，type:引入的文件类型

3、引入css文件的第二种方式

二、选择器

选择器: 就是选择标签,给标签添加样式

1、标签选择器
通过标签名字来选择标签
语法：
标签名{
属性名1:值1;
属性名2:值2;
属性名3:值3;
}

2、class选择器(类选择器)
在标签上写class属性，给某些使用了class属性的标签设置样式
语法：
.class的名称 {
属性名1:值1;
属性名2:值2;
属性名3:值3;
}

3、id选择器
唯一的给某个标签设置样式(同一页面中)
给标签添加id属性
语法：
#id属性名 {
属性名1:值1;
属性名2:值2;
属性名3:值3;
}

选择器的优先级：id > class > 标签

4、后代选择器
选择的是所选标签所有的后代元素,通过对标签里标签的某个值来设置
例如
#id a{
color: red;
}

5、子元素选择器
选择的是所选标签的下一级元素
例如
#id>a{
color: red;
}

6、并集选择器
多个标签使用同一种样式
例如
a,span{
color: red;
}

7、交集选择器
设置标签和class(id)选择器结合使用，更精确的进行标签选择
例如
a.dy1{
color: green;
}

8、相邻兄弟选择器
选择紧挨着的兄弟的元素
例如
#dv+span{
color: yellow;
}

9、通用选择器
选择所有的兄弟元素
例如
#dv~span{
color: red;
}

三、Div盒子模型

1、div边框
设置边框颜色 border-top-color: red;
设置边框的样式 solid : 实线 dashed:虚线 double:双实线 border-top-style: solid;
设置边框的粗细

1. border-top-width: 3px;
2. 简化:顺序随意 border-top: 3px solid red;
3. 再简化 border: 3px dashed green

2、div外边距与内边距

padding: 1cm 3cm 1cm 3cm; /*上 右 下
padding: 1cm 3cm 1cm; /上 左和右 下/
padding: 1cm 3cm; /上和下 左和右/
padding: 3cm;/距离一样/
magin跟padding设置的规则是一样的