css入门

一.css是什么

css（Cascading Style Sheets）层叠样式表，用于布局美化网页

---

二.css引入方式

（1）行内样式

<div style="color:red;">内容</div>

---

（2）内嵌式

<style>
   div{
      color:red;
   }
</style>

---

（3）

外链式

<link rel="stylesheet" href="css文件">

---

（4）

导入式

@import url（“css文件”）；
或
@import "css文件"；

注意：优先级
行内样式最大
最晚引入，优先级高

三.选择器

1.通配选择器

即所有的标签

例：*{

        font-size:"20px";

}

2.标签选择器

即使用标签的名字作为选择符

例：div{

        color:#F00;

}

3.id选择器

例：#box（id值）{

        background-color：red;

}

id值是唯一的

4.类（class）选择器

例：.box {

        background-color:  #FF0000;

}

可以为标签指定多个class值，多个值之间用空格隔开

5.包含选择器

例 选择器E  选择器F{
样式属性名：属性值;
}

权重：标签选择器：1

           类选择器：10

           id选择器：100

           包含选择器 相加

四.区别 *

1.外链式link和导入式@import的区别

（1）link是html标签  而@import完全是css提供的方式,导入式要依赖css样式表文件，所以要写在css文件或者 style标签中

（2）加载顺序不同，link引用的css件是同时加载的，而@Import引入的css文件会等页面全部下载完后再加载

2.url，src，href的区别

url不是属性，src和href都是属性

src和href的区别是

（1）请求资源类型不同 ：src用来替换当前元素，而href用于本地文档和外部资源建立联系

简单来说就是src是引用的路径是img自己的路径，href引用的路径是要跳转到的地方

（2）作用结果不同：src 用于替换当前内容     href 用于在当前文档和引用资源之间确立联系

（3）浏览器解析方式不同：当使用href链接到一个外部的样式表时，页面解析不会暂停

src，在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停

五.字体相关样式

1.font-size 字体大小

注：一般无定义时浏览器默认大小为16px，也可以用em表示，em是相对单位，以目前浏览器的字体大小决定，如果是默认，那么1em=16px

2.font-family 字体系列

多个字体间用逗号隔开   英文字体中间有空格，用引号引起来

3.font-style 字体风格

（1）normal 正常

（2）italic 斜体

（3）oblique 倾斜

4.font-weight 字体粗细

（1）normal 正常

（2）bold 粗体

（3）bolder 加粗

（4）100-900 9个层次 值越大越粗

（5）lighter 细体

5.line-height 行高

单位px 若无单位，表示倍数

缩写：font ：fontstyle值 fontweight值 font-size值 / line-height值 font-family值