前端第二课--基本的css选择器

前端第二课

css注释语法：CTRL+/注释一行 CTRL+shift+/注释多行

内部样式:（只能在当前文档使用 / **标签选择器：**h1-h6,div,p,span,ul,li,ol,dl,a,img等等

**外部样式：**新创一个css文件夹，做大项目时用

在头部通过link标签引入ctrl加回车跳转css文件

rel="stylesheet"声明这是一个样式文件

**类选择器：**可以实现多个相同的标签实现不同的样式更改

head style

.名字{
color=…;
}

类名就是一个标签的名字；

**id选择器：**id名之间不能重复，id名是唯一的

head style {
#id名{
color:…;
}
}

span*n可出现n个span标签

**多类名选择器**：一个标签可以写多个类名，设置不同样式使用不同的类名

名字

尺寸样式：

.名字{

width:…;设置宽

height:…;设置高

}

位置样式：（margin设置的是该盒子与离它最近的一个外面盒子边界的距离）

一、.名字{

margin-left:300px;

margin-right:500px;

margin-top:200px;

margin-bottom:300px;

margin:200px 500px 300px 300px(上 右 下 左）四个值

margin:200px 300px;上下 左右

margin：200px 300px 500px(上 左右 下）三个值

margin:300px;四个方向值一样

margin：100px auto 0px;水平居中

margin: 0；清楚默认margin

}

二、*{ (通配符，不建议使用会增加浏览器的负担）

margin：0；（直接将所有的标签margin值化为零

}

三、建议使用：

div,p,ul,li…

{

margin:0;

}

背景颜色样式：

Ⅰ、background-color:…;

Ⅱ、颜色值的三种写法

​ 1.颜色单词

​ 2.16进制值

​ 3.rgb(0-255,0-255,0-255) rbga(0-255,0-255,0-255,0-1)最后一位数最大为1可调整颜色透明度；

字体样式：

Ⅰ、字体大小：font-size:50px;

Ⅱ、字体类型：font-family:SimSum;

Ⅲ、文字居中：text-align:center;