前端三剑客（二）：CSS
目录
1. CSS 基础
1.1 什么是 CSS
CSS(Cascading Style Sheets), 层叠样式表, 是用来表示 HTML 的一种计算机语言.
CSS负责网页的视觉表现，它定义了网页元素的布局、颜色、字体、间距等样式属性。
通俗来说, CSS 就是对页面进行 "化妆".
简而言之，HTML定义了网页的结构，CSS负责网页的外观和布局，而JavaScript则负责让网页"动起来"(能够让网页动态变化)。三者共同工作，创造出功能丰富、用户友好的网页和网络应用。
1.2 语法格式
选择器 + {声明}
- 选择器决定修改谁
- 声明决定要修改的内容
- 声明的属性是键值对.(属性(键): 属性值(值))
- 多个键值对间使用 ; 进行分割
1.3 引入方式
1.3.1 行内样式
直接在标签中使用 style 属性, 引入 CSS 属性的键值对:
这种方式的缺点是代码冗余, 若想全部更改 div 标签中内容的颜色, 则需要一个一个的填写代码:
1.3.2 内部样式
定义 <style> 标签, 在标签中定义 CSS (指定选择器):
- 选择器中所有的内容, 都会被修改为声明中的内容.
- style 标签通常定义在 head 标签中
需要注意的是, 使用内部样式引入 css 的同时, 若存在 div 标签在内部引入 css 的情况下(行内样式), 则采取就近原则的方式进行格式的修改:
1.3.3 外部样式
定义 <link> 标签，通过 href 属性引入外部 css 文件:
这张方式的优点是, 实现了 HTML 代码和 CSS 代码分离, 实现解耦, 代码的可维护性高.
1.4 CSS 编码规范
CSS 不区分大小写, 但统一规范使用小写字母.
空格规范:
- 冒号后面跟一个空格
- 选择器和 { 之间留一个空格
2. 选择器
CSS 中的选择器, 可以指定选中的页面中的元素, 并对这个元素中内容进行统一的修改(颜色, 字体, 边框....).
选择器主要有以下几种:
- 标签选择器
- id 选择器
- class 选择器(类选择器)
- 复合选择器
- 通配符选择器
2.1 标签选择器
所有被标签选择器选中的元素, 标签中内容的属性都会被统一修改为选择器中设置的属性.
但是, 若选择器选中的标签中, 嵌套了一个 a 标签, 那么设置的属性值将不会生效, 因为 a 标签中也对内容进行了默认的属性设置, 标签中的内容将采取就近原则的方式跟随 a 标签默认设置的属性(内容离 a 标签最近).
如果要修改, 需要额外使用选择器选择 a 标签来进行修改:
也就是说, 选择器需要选中离内容最近的标签, 才会对内容的样式修改成功.
/* 标签选择器 */
div {
color: red;
}
span {
color: blue;
}
a {
color: red;
} 2.2 id 选择器
id, 和我们之前所学的数据库中的 id 是相同的概念.
页面中, 每个元素的 id 都是唯一的, 我们可以通过 id 选择器, 选中页面中某一元素的 id , 对该元素的样式进行细致的设置.
在使用 id 选择器时, 使用 # 对 id 进行选择:
/* id 选择器 */
#div1 {
color: red;
} 2.3 class 选择器(类选择器)
每个元素可以设置唯一的 id 外, 还可以设置 class 值, 但是多个元素的 class 值可以是相同的.
具有相同 class 值的元素, 可以认为是同一组的, 使用 class 选择器则可以对这一组中所有的元素进行样式的设置.
使用 class 选择器时, 使用 . 对 class 进行选择:
/* class 选择器 */
.class1 {
color: red;
} 2.4 复合选择器
复合选择器由多个单选择器构成, 单选择器可以是任意选择器, 可以是标签选择器, id 选择器, class 选择器 .... (但是不能是通配符选择器)
- 复合选择器可以由具有嵌套关系的选择器构成(选择器间使用空格分割):
- 复合选择器也可以由不同种类的选择器构成, 但是不同的标签间要使用 , (逗号)分割, 如:
其中,
- ol 标签(order list)为有序的列表标签
- ul 标签(unordered list)为无序的列表标签
- list 为列表标签
/* 复合选择器 */
#div1, #div2 {
color: purple;
}
ol li a{
color: red;
font-size: 20px;
} 2.5 通配符选择器
* 代表通配符, 通配符选择器选中的是页面中所有的元素(所有元素, 包含所有的嵌套标签).
使用通配符选择器可以对页面中所有的元素进行统一的修改.
/* 通配符选择器 */
* {
color: yellow;
}3. 常用 CSS 样式
3.1 color
color, 就是设置字体的颜色. 我们可以在选择器中指定 color 的属性值, 来指定字体的颜色.
color 属性值的设置有以下几种方式:
- 英文单词
- 手动设置三原色(红绿蓝)的比例, 如: rgb(xxx, xxx, xxx) (取值0~255)
- 使用16进制设置三原色的比例:
3.2 font-size
font-size: 设置字体的大小
/* 字体 */
#div1 {
font-size: 20px;
}3.5 height / width
我们知道, 像 div 这样的标签, 其实可以视为一个 "盒子". 而我们就可以对 "盒子" 来设置宽高.
需要注意的是: 只有块级标签才可以设置宽和高
height: 设置高
width: 设置宽
- 常见块级元素/块级标签: div , h1-h6 (带换行的)
- 常见行内元素/行内标签: span, a, img (不带换行的)
若对 span 这样的行内标签设置宽高是不起作用的:
但是, 我们也可以修改 display 的属性值将行内标签设置为块级标签:
- 行内标签 => 块级标签: display: block;
也可以修改 display 将块级标签设置为行内标签:
- 块级标签 => 行内标签: display: inline;
3.4 border
当我们设置好高和宽后, 我们可以对边框(border)进行设置(边框是一个复合属性):
- 设置边框类型(实线, 虚线, ...)
- 设置边框粗细
- 设置边框颜色(默认是透明的)
- 我们可以对边框四个方向上的属性分别进行设置(以颜色为例, 粗细和宽度都是可以的):
对方框四个方向的样式分别进行设置时, 还可以将四个方向上的值一次性写到一个 border 中:
(从 top(上) 开始, 顺时针方向填写属性值)
/* 以下两种写法是相同的 */
#div1 {
height: 50px;
width: 200px;
border: solid;
border-top-color: yellow;
border-right-color: black;
border-bottom-color: red;
border-left-color: blue;
}
#div1 {
height: 50px;
width: 200px;
border: solid;
border-color: yellow black red blue;
}- 也可以对边框四个方向上的颜色, 粗细, 样式统一进行设置(四个方向上的边框都是相同的):
/* 边框的四个方向都设置为: 粗细为: 1px, 颜色为: 红色, 样式为: 实线 */
/* 以下两种写法是相同的 */
#div1 {
height: 50px;
width: 200px;
border-width: 1px;
border-color: red;
border-style: solid;
}
#div1 {
height: 50px;
width: 200px;
border: 1px red solid;
}3.5 边距
边距分为以下两种:
- padding: 内边距
- margin: 外边距
内边距和外边距是两个相对的概念, 需要根据参照物来决定.
我们可以在选择器的声明中, 修改 padding / margin 的值来修改内外边距的距离.
如果以每个 div"盒子" 为参照物:
- 那么每个 div"盒子" 的边框(border)和内容之间的距离就是内边距.(内容和边框之间的距离)
- 每个 div"盒子" 和每个 div"盒子" 之间的距离就是外边距.(页面中, 元素和元素之间的距离)
3.5.1 内边距 - padding
padding: 内边距.
通过修改 padding 的值, 设置内容和边框之间的距离. (内容默认是顶着边框的)
padding 也是一个复合样式, 我们可以分别设置四个方向上的内边距:
- padding-top (上)
- padding-bottom (下)
- padding-left (左)
- padding-right (右)
当把四个方向的值一次性写到一个 padding 上时, 依旧是顺时针方向依次表示: 上 右 下 左.
3.5.2 外边距 - margin
margin: 外边距
通过修改 margin 的值, 设置盒子和盒子(元素和元素)之间的距离. (内容默认是顶着边框的)
#div1 {
padding: 10px;
margin: 30px;
}END
原文地址：https://blog.csdn.net/2401_83595513/article/details/143658291
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！