第三章 css基本样式和元素选择器

一,css的引用方式 

1.内联

在行内或head标签里面的<style></style>标签里写样式 如下图

内联例图

---

2.外联

首先取一个后缀名为.css的文件夹 然后用<link rel="stylesheet" href="引入之前取名字的地址">放在title前面  (引入的地址给前面的引入图片地址一样 一般我们上传网站用的都是外联) 

---

二,css中的基本选择器

1.id选择器 

#开头 (不能数字开头) 一个名字只能取一个 取多了js获取会出现问题,尽量一个页面不要超过5个 

如图

---

2.类选择器

.开头 (类名) 可以重复使用 (可以用一个类名控制多个属性)如下图

---

3.后代选择器

空格或大于号(>)隔开父级子级 

<div> 

<p></p>

</div>

  上面的<div>>就是<p>标签的父级 如果想选中div中的<p>标签 用下面这样的空格格式

                div p{ 写css样式 }

---

4.相邻选择器 + 

     只能选择到邻居 如下图所示 

代码 样式

---

5.兄弟选择器 ~

在同一层级都可以选中 

代码 样式

---

6.通配符选择器 * 

网页最大的选择器 全部都选中 

代码 例图

---

三,权重问题

 行内>内联>外联 (是因为后面的覆盖前面的 )

---

四,一些简单的属性

          width:200px;  宽度

          height:200px;   高度

          background:red;   背景颜色

           px 像素值 就是屏幕大小 

           em 文字的大小 1em=2px 文字的大小

           rem html的字体大小 移动端的

下面的两个不怎么常用 简单了解一下吧

           vw 浏览器的宽度

           vh 浏览器的高度  1vh=1/100