CSS初步01

12.6——12.10 学习笔记

CSS初步

https://www.bilibili.com/video/av67131564?p=35

主要内容：

1. CSS简介
2. CSS的三种引入方式：
   - 行内引入
   - 内嵌引入
   - 外部引入

3.CSS的基本选择器：

  通用选择器：  *{属性}  	
  标签选择器  ：标签名{属性}  	 
  类选择器：.类名{属性}  	
  id选择器：#id名{ 属性} 
  伪类选择器：

---

CSS：层叠样式表，给页面标签添加样式。

语法规则：

• 一个CSS样式，是由选择器和格式声明语句所构成的。
• 格式声明语句，要用{属性：属性值}括起来，里面放各种各样的格式声明语句。
• 一条格式声明语句，由 属性：属性值 组成。
• 属性，就是对一个东西的描述。属性现在基本都在css中已经定义好了。
• 在属性值的后面用 ; 结束
• css样式必须写单位
• css样式的数值单位用 px 像素（0不写单位）
  - HTML：<标签名 属性名= “属性值”></标签名>
• CSS: 属性名：属性值；

一. css引入：

1.行内引入

用的比较少

2.内嵌引入

1. 标签写在 标签中
2. 内嵌式的引入是在style标签中写css代码，而行内引入是在标签上用style属性写css代码。
3. 给div标签加样式
4. 所谓内嵌引入，就是在.html文件中嵌入了css的代码，在文件中既看得到标签，也看的到css的代码。

3.外部引入

即CSS代码在外部另外一个.css文件中，需要将此文件引入.html文件中。

1. 需要新建一个.css文件，在此文件中写入css代码。本例中是将div标签设置成蓝紫色。
2. 导入.css文件至.html文件中：使用标签，在其href属性中写上.css文件的链接地址即可。注意标签一般写在 标签中。

二. css基本选择器

选择器{属性名：属性值；属性名：属性值；…}
e.g h1{color:red; font-size:14px;}

选择器：

选择页面上标签的工具。要改哪个标签，就在选择器的位置上写哪个标签即可。

分类：

• 基本选择器（简单选择器）
• 复合选择器

1.通用选择器：

格式：*{属性名：属性值;…}
含义：所有的元素都选择。


此标签用的较少，可能每个页面刚一开始调的时候会使用一下。

2.标签选择器：

格式：标签名{属性名：属性值}
含义：选择指定标签名的所有元素

3.类选择器：

格式：.类名{属性} （注意类名前面有个.）
含义：指定的class名的元素

P.S :

• class 属性规定元素的类名（classname）
• 当需要设置相同的样式时（不同标签也可以），给他们设置相同的类名即可。
  
  

4.ID选择器：

ID：表示唯一
name：在标签里用
class：css中用
ID：JS中用（在这里css也能用）

语法：#id名{ 属性}
含义：选择指定ID的元素。注意，ID是具有唯一性的，全页面唯一一个，所以只能选择一个。


（一些思考：其实这里也能用类选择器。一般要选择多个标签时，用类选择器，只选择一个的话，用ID选择器？）

5.伪类选择器：

（锚伪类选择器）

主要是针对 标签用的。（也叫作锚链接）

a:link{属性} ：未访问过的
a:visited{属性} ：访问过的
a:hover{属性} ：鼠标放上
a:active{属性}：鼠标点击

以上顺序不可以被打乱！

未点击前字体为蓝色

---

鼠标划过时是棕色

---

鼠标点击时时绿色

---

鼠标点击后是粉色

---

注意：

1. 当在浏览器中不能按要求显示时，需要清除浏览器中的缓存
2. a:link{} 和 a:visited{}中的属性一般用于设置字体颜色
3. a:hover{} 和 a:active{}中的属性除了设置颜色外，还可以设置字体大小 (font-size)
4. a表示a标签，还可以改成别的标签，例子如下:

生成一个无序列表，通过
li:hover{
font-size: 50px;
}
实现 当鼠标滑过时字体放大。

案例：