CSS基础

CSS.jpg

CSS让很多HTML标签下岗了，让我们看一下认识这些新的方式和废弃的方式。

No.	作用	CSS	废弃方式
1	字体颜色
2	字体大小
3	字体
4	粗体
5	斜体
6	下划线
7	文本对齐	text-align: center
8	宽	width	img等属性width
9	高	height	img等属性height

display是CSS非常重要的概念，请童鞋们记住他们的区别区别：

display	换行	设置宽高
inline	共享一行	width height不起作用
block	独占一行	width height起作用
inline-block	共享一行	width height起作用

CSS内联样式

CSS在标签里面加上属性style="CSS属性名1:CSS属性值1;CSS属性名2:CSS属性值2;"

CSS内部样式表

两步把内联样式改成内部样式。

1. 在head中加上style标签。
2. 把HTML中style属性值写入style标签中。注意选择使用合适的选择器。

CSS外部样式表

把CSS从style标签移除HTML

1. 创建文件style.css
2. 把style标签CSS代码剪切到style.css
3. 删除HTML的style标签
4. 把style.css链接到HTML
   在head标签中加入link标签。
   

   注意：
   1. rel="stylesheet"不能缺少
   2. href的值是CSS文件路径

---

选择器

什么是选择器？

选择标签/元素的东西。

CSS语法

        选择器{
            CSS属性1:CSS属性值1;
            CSS属性2:CSS属性值2;
        }

选择器

1. 标签/元素选择器

• 写法：直接使用标签名
• 作用：把所有相同标签的元素选择出来

2. class/类选择器

• 写法：.类名
• 作用：把使用类名的元素选择出来
• 注意：类选择器可以在不同标签中使用。

类名命名规则：

1. 必须是字母、数字、下划线、中划线组成。（不能是中文、不能使用* \ # @ /）
2. 不能数字开头

3. ID选择器

• 写法：#ID名
• 作用：把使用ID名的元素选择出来。
• 注意：只对一个标签使用。

ID命名规则：

1. 必须是字母、数字、下划线、中划线组成。（不能是中文、不能使用* \ # @ /）
2. 不能数字开头.

4. 伪类

:hover

• 写法：选择器:hover
• 作用：不做选择的效果，只能在鼠标放在已经选择的元素上显示效果。
  *注意：一般与其他选择器组合使用。