初识前端三剑客二 -＞ css

前言：

大家好我是小帅，今天我们来了解简单的css运用

文章目录

1. css

1. 1什么是css

CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式.
CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.

CSS前 -> CSS修饰后

东⽅四⼤邪术

1.2 语法规范

选择器 + {⼀条/N条声明}

1. 选择器决定针对谁修改 (找谁)
2. 声明决定修改啥. (⼲啥)
3. 声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值. 基本格式：

<style>p{/* 设置字体颜⾊ */color: red;/* 设置字体⼤⼩ */font-size: 30px;}</style><p>hello</p>

注意：
CSS 要写到 style 标签中
style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内

（规范）

.
CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换) .

1.3 引入方式

CSS有3种引⼊⽅式，了解会用即可，语法如下表格所⽰：
引⼊⽅式****语法描述示例⾏内样式在标签内使⽤style属性，属性值是css属性键值对

<div style="color:green">绿⾊</div>

内部样式定义

<style>

标签，在标签内部定义css样式

<style> h1 {...} </style>

外部样式定义标签，通过href属性引⼊外部css⽂件

<link rel="stylesheet" href="[CSS⽂件路径]">

3种引⼊⽅式对⽐:

1. 内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤. (课堂上为了⽅便讲解, 使⽤该⽅式)
2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.
3. 外部样式，html和css实现了完全的分离, 企业开发常⽤⽅式.

1.4 规范

样式⼤⼩写
虽然 CSS 不区分⼤⼩写, 我们开发时统⼀使⽤⼩写字⺟

空格规范88
冒号后⾯带空格
选择器和 { 之间也有⼀个空格.

2. css选择器

CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性.

CSS选择器主要分以下⼏种：

1. 标签选择器
2. class选择器
3. id选择器
4. 复合选择器
5. 通配符选择器

我们通过代码来学习CSS选择器的使⽤.
给一个盒子作为参照物来看代码变化

1. 标签选择器 代码：

效果：

1. class选择器 代码：

效果：

1. id选择器 代码：

效果：

1. 复合选择器 有4种情况

空格表示后代
代码：

解释：

效果：

没空格，表示交集（同时具备所有标签）
代码：

解释:

效果：

逗号隔开表示并集
代码:

解释：

效果：

表示相邻后代
代码：

解释：

效果：

1. 通配符选择器 代码：

* {
 color: red;
}

设置所有的标签的样式，上面演示过了不在赘述。

3. 常用的css

接下来学习⼀些常⻅的css样式

3.1 color

color: 设置字体颜⾊
形如：

.text1{
 color: red;
}

颜⾊有如下⼏种表达⽅式:

1. 英⽂单词,如red,blue
2. rgb代码的颜⾊ 如rgb(255,0,0)
3. ⼗六进制的颜⾊ 如#ff00ff

3. 2 font-size

font-size: 设置字体⼤⼩
形如：

.text1{
 font-size: 32px;
}

3.3 border

border: 边框
边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断。

.text1{
 border: 1px solid purple;
}

以上border属性的对应设置的维度分别为边框粗细, 边框样式, 边框颜⾊.
样式说明取值border-width设置边框粗细数值border-style设置边框样式1. dotted : 点状
2. solid : 实线
3. double : 双线
4. dashed: 虚线border-color设置边框颜⾊同 color

3.4 width/height

width: 设置宽度
height: 设置⾼度

只有块级元素可以设置宽⾼

改变显⽰模式
使⽤ display 属性可以修改元素的显⽰模式

1. display: block 改成块级元素 [常⽤]
2. display: inline 改成⾏内元素 [很少⽤]

3.5 padding

padding: 内边距, 设置内容和边框之间的距离.
内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离

padding也是⼀个复合样式, 可以对四个⽅向分开设置

1. padding-top
2. padding-bottom
3. padding-left
4. padding-right

3. 6 外边距

margin: 外边距, 设置元素和元素之间的距离.
margin也是⼀个复合样式, 可以给四个⽅向都加上外边距

1. margin-top
2. margin-bottom
3. margin-left
4. margin-right

好了，简单的css我们就了解到这里，感谢观看。