基础CSS语法

目录

简述：

css的三种书写位置

方式一：内联样式/行内样式

方式二：内部样式表

第三种方式：外部样式表

面试题：link标签、@import引入css文件，有什么区别

css常见选择器（40个左右）

1、标签选择器

2、id选择器

3、class选择器

4、通配选择器

图片相关常识

---

简述：

css又称层叠样式表，可以给结构的每一层设置样式，最终呈现出完整的效果

三大特性：层叠性、继承性、优先级

css的语法：首先写一个style标签，在这个标签里面就是css的书写环境

选择器{

样式名：样式值;

样式名：样式值;

样式名：样式值;-- 最后一个样式的这个;可加可不加

}

ctrl+/生成css注释 /* */

---

css的三种书写位置

方式一：内联样式/行内样式

书写位置：在开始标签添加style属性，在style属性值的位置写css样式，可以写多组样式，样式与样式之间要用;隔开

优点： 不用额外选中标签，哪里需要，就直接在哪里添加style属性

缺点：

1、结构和样式耦合了，导致标签冗余，不清晰，不优雅

2、不方便复用(复制并不是复用),不方便修改

3、样式的优先级太高，后期结合js或者其他框架去修改，不好修改

总结：不推荐使用，只有少部分不常修改的，很简单的样式，可以使用

---

方式二：内部样式表

书写位置：在head标签内，添加style子标签，在style标签内，通过选择器，选中你要设置样式的结构,在{书写css样式}，可以书写多组样式，样式与样式之间用;隔开

优点：

1、结构样式分开了，代码清晰了

2、方便修改了

缺点：

1、html结构和css样式写在同一个文件内，会导致这个文件后期不好维护

2、复用率不高，只有当前文件内样式可以复用，如果其他文件要用，只能复制，不能复用

总结：

如果当前样式，不存在别的文件复用，可以使用

如果当前样式较少，也可以使用

---

第三种方式：外部样式表

书写位置：

在html文件外，新建.css文件，在css文件内，书写样式

通过link标签引入css文件

优点 ：方便复用（推荐使用）

调用css样式使用link

<link rel="stylesheet" href="./03.css" />
 

假设现在有这么一个情况，我们有三个页面，分别为logo页，index页和class页，这三个页面的头部，尾部样式都相同，于是我们在每个页面的head标签里都添加这两个link。

<link rel="stylesheet" href="../css/header.css">
<link rel="stylesheet" href="../css/footer.css">
 

很明显这里是可以实现我们想要的效果的，但是如果重复的部分越多，难道我们就要加更多的link吗？所以一般我们会在css里面导入其他css,

写法一

@import url(./header.css);
 

写法二

@import './footer.css';
 

我们把相同部分的css导入到一个新的css,然后后面再写每个页面不同的样式

---

面试题：link标签、@import引入css文件，有什么区别

两种方式都可以引入css文件，都能生效

link标签是html标签，书写在html语言环境下的 ，@import是css的语法

link标签引入css文件，是将html文件与css文件关联起来

@import引入css，是将css导入到新的css文件中

从编码编译效率来看，link标签效率更高

---

css常见选择器（40个左右）

1、标签选择器

语法：标签名{}

作用：选中页面中所有该标签名的结构

注意：由于常用的标签就那么多，使用标签选择器需要慎重，防止影响其他同类标签

h1 {
  color: red;
}
 

---

2、id选择器

语法：#id属性值{}

作用：选中对应id属性值的结构

注意：1、id属性值，不能以数字开头，不能重复，不为汉字

2、建议给外层不重复的框架，使用打id

#p1 {
  color: green;
}
 

3、class选择器

语法： .class属性值{}

作用：选中对应class属性值的结构

注意：1、跟id选择器很像，但class属性值可以被复用

2、前后使用class属性值时，最好配合关系选择器，减少冲突

.p2 {
  color: orange;
}
 

如下：id不可重复，class可以

<p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
<p class="p2">无边落木萧萧下，不尽长江滚滚来。</p>
<p class="p2">万里悲秋常作客，百年多病独登台。</p>
 

---

4、通配选择器

语法：*{}

作用：选中所有的标签，包括html，head，body·····

注意：用来设置公共的样式，也可以用来去除默认样式的

* {
  /*将外边距设置为0 */
  margin: 0;
  /*将内边距设置为0 */
  padding: 0;
  /* 去除列表的项目符号 */
  list-style: none;
  /* 去除标签的修饰线 */
  text-decoration: none;
}
 

---

图片相关常识

图片的格式

JPEG(JPG采用压缩算法)

JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

一般用来保存照片等颜色丰富的图片，体积比png小适合中大图片

GIF

GIF支持的颜色少，只支持简单的透明，支持动态图

图片颜色单一或者是动态图时可以使用gif

PNG（无损压缩）

PNG支持的颜色多，并且支持复杂的透明，不支持动图

可以用来显示颜色复杂的透明的图片，体积比jpg大适合做小图标

专为网页而生的

webp

谷歌新推出的专门用来表示网页的一种格式

它同时支持有损压缩和无损压缩，相同质量的图片webp有更小的体积

缺点：兼容性不好

base64

讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

一般都是需要和网页一起加载的图片才会使用base64（现在用的少，因为网络好，配置也高了）

svg

矢量图，放大不会变形

图片的使用原则：

效果不一致，使用效果好的

效果一致，使用小的