【css】基本知识

博主：本当迷
发布时间：2022 年 03 月 23 日
947 次浏览
暂无评论
5662字数
分类： css

## css引用方式：

想在一个页面引入css，一共有3种方法

1.外部样式表

2.内部样式表

3.行内样式表

### 外部样式表：

外部样式表是最理想的css引入方式，css文件与html文件分离开来。在实际开发中，为了提高网站的性能和速度可可维护性，一般都会使用外部样式表。在head标签中使用link标签来引用。

#### 语法：

```css
<link rel="stylesheet" type="text/css" href="文件路径" />
```

### 内部样式表：

内部样式表指的是，把html文件和css文件放在同一个html文件中。其中，css代码放在style标签内，style标签是放在head标签内部

#### 语法：

```css
<style type="text/css">
....
....
</style>
```

说明：type="text/css"是必须添加的，表示标准的css

### 行内样式表

行内样式表的css是在“标签的style属性”中定义的。

#### 语法：

```css
<div style="color:red;"></div>
```

一般不推荐使用行内样式表进行开发，使用外部样式表开发较容易维护！

## css选择器：

### id和class

id具有唯一性，一个页面的id只能出现一次。

class，可以在页面出现多次

我么可以这样理解：id就相当于我么的身份证，clsss相当于我们的名字。身份证是唯一的，但是两个人的名字却可以相同！

### 选择器的理解：

只有我们选中了某个元素，我们才能对它进行操作，才可以给这个元素添加css样式。

## 实用的5种css选择器：

1.元素选择器

2.id选择器

3.class选择器

4.后代选择器

5.群组选择器

### 元素选择器：

#### 语法：

```css
div{color:red;}
```

表示把页面的所有div元素选中，然后给他们的文本定义成红色

### id选择器：

#### 语法

```css
#box{width:100dx; height:100px}
```

找到id为box的元素，给它添加宽高样式

#### 注意：

对于id选择器，id名字前面必须添加“#”，表示这是一个id选择器，否则该选择器无法生效。

### class选择器：

#### 语法：

```css
.box{color:red;}
```

找到类名为box的所有元素，给它们的文本添加颜色。

#### 注意：

对于class选择器，class名字前面必须添加英文句号“.”，表示这是一个class选择器，否则该选择器无法生效。

### 后代选择器：

后代选择器，就是选择元素内部中的某一种元素的所有元素：包括子元素和其他后代元素（如：孙元素）

#### 语法：

```css
#father div{width:100px; height:100px;}
```

#### 说明：

父元素和后代元素必须要用空格隔开，表示选中某个元素内部的后代元素

### 群组选择器：

群组选择器，指同时对几个选择器进行相同操作

#### 语法：

```css
h1, h2, h3, p{color:red;}
```

#### 说明：

对于群组选择器来说，两个选择器必须使用英文逗号“，”隔开，不然群组选择器无法生效

## 字体样式：

### 属性：

字体类型：font-family

字体大小：font-size

字体粗细：font-weight

字体风格：font-style

字体颜色：color

### 字体类型font-family：

#### 语法：

```css
font-family:字体1，字体2，字体3，...，字体N;
```

#### 说明：

font-family可以指定多种字体。使用多个字体时，将按从左到右的顺序排列，并且用英文逗号“，”隔开。如果我们不定义font-family，浏览器将默认“宋体”为字体类型

### 字体大小font-size：

#### 语法：

```css
font-size:像素值;
```

### 字体粗细font-weight：

#### 语法：

```css
font-weight:取值;
```

### 字体风格font-style：

#### 语法：

```css
font-style:属性;
```

#### 属性：

默认：normal

斜体：italic

斜体：oblique

## css注释：

### 语法：

```css
/*注释的内容*/
```

### 说明：

/*表示注释的开始，

*/表示注释的结束

## 文本样式：

### 首行缩进：text-indent

#### 语法：

```css
p{font-size:14px; text-indent:28px;}
```

#### 分析：

如果我们想在段落缩进两个字空间，那么把text-index值放大为font-size的两倍即可！

### 水平对齐：text-align

我们使用text-align属性来控制文本在水平方向的对齐方式

#### 语法：

```css
p{text-align:center;}
```

#### 属性：

左对齐：left

居中对齐：center

右对齐：right

### 文本修饰：text-decoration

在css中，我们可以使用text-decoration来定义文本的修饰效果（下划线，中划线，顶划线）

#### 语法：

```css
p{text-decoratioon:取值;}
```

#### 属性：

去除所有划线效果：none

下划线：underline

中划线：line-through

顶划线：overline

### 大小写：text-transform

在css中，我们可以使用text-transform对英文文本进行大小写转换

#### 语法：

```css
p{text-transform:none;}
```

#### 属性：

无转换：none

转换为大写：uppercase

转换为小写：lowercase

将每个英文字母的首字母大写：capitalize

### 行高：line-height

#### 语法：

```css
p{line-height:15px;}
```

## 边框样式：

### 语法：

```css
div{border:1px solid red;}
```

### border第一个参数为border-width

用于定义边框的宽度，取值为像素值

### border第二个参数为border-style

用于定义边框的外观

#### 属性：

无样式：none

虚线：dashed

实线：solid

### border第二个参数为border-color

用于定义边框的颜色

## 列表样式list-style-type：

我们在开发中常用下面那个属性去掉列表的符号，其他的几乎用不到

### 语法：

```css
ol, ul{list-style-type:none;}
```

## 列表项图片list-style-image：

可以使用图片来替代列表项的符号，但是我们一般不使用list-style-image属性来实现，而是使用更高级的iconfont图标技术来实现。

### 语法：

```css
ul{list-style-image: url(img.png);}
```

## 表格样式：

### 表格标题位置：caption-side

#### 语法：

```css
table{caption-side:top;}
```

#### 属性：

标题在顶部：top

标题在底部：botton

### 表格边框合并：border-collapse

在css中，我们可以使用border-collapse属性来去掉单元格之间的空隙，也就是将两条边框合并为一

#### 语法：

```css
table{border-collapse:collapse;}
```

### 表格边框间隔：border-spacing

在css中，我们可以使用border-spacing属性来定义表格边框的间距

#### 语法：

```css
table{border-spacing:8px;}
```

## 图片样式：

### 图片大小：

在实际开发中，我们需要多大图片建议用ps裁剪多大。不建议使用一张大的照片，然后再借助width和height来改变其大小。因为一张大图片体积更大，会使页面加载速度变慢。

### 语法：

```css
img{width:60px; height:60px;}
```

### 图片边框：

#### 语法：

```css
img{border:1px solid red;}
```

### 图片对齐：

在css中，我们可以使用text-align属性来定义图片的对齐方式。很多人以为图片的对齐方式是在img元素定义，其实这是错误的。图片是在父元素中进行水平对齐，因此我们应该在**图片的父元素中定义**。

#### 语法：

```css
#img{text-align:center;}
```

#### 属性：

左对齐：left

居中对齐：center

右对齐：right

### 垂直对齐：

在css中，我们可以使用vertical-align属性来定义图片的垂直对齐方式

#### 语法：

```css
img{vertical-align:baseline;}
```

#### 属性：

顶部对齐：top

中部对齐：middle

基线对齐：baseline

底部对齐：bottom

### 文字环绕：float

文字环绕着图片进行布局

#### 语法：

```css
img{float:left;}
```

#### 属性：

元素向左浮动：left

元素向右浮动：right

## 背景样式：

### 背景颜色：background-color

在css中，我们可以使用background-color属性来定义元素的背景颜色

#### 语法：

```css
div{backgroung-color:red;}
```

### 背景图片样式：

在css中，我们可以使用background-image来给元素定义背景图片

注意：如果图片不显示，可能是我们没有为div添加宽和高。

#### 语法：

```css
div
{	width:250px;
	height:150px;
	backgroung-image:url(img.png);
}
```

### 背景图片重复：background-repeat

#### 语法：

```css
div{background-repeat:no-repeat;}
```

#### 属性：

在水平方向和垂直方向同时平铺：repeat

只有水平方向（x轴）：repeat-x

只有垂直方向（y轴）：repeat-y

不平铺：no-repeat

### 背景图片位置：background-position

在css中，我们可以使用backgroung-position属性来定义背景图片的位置

#### 语法：

```css
div{background-position:12px(水平距离) 24px(垂直距离);}
```

表示背景图片距离该元素左上角的水平距离为12px，垂直方向距离为：24px

## 超链接样式：

### 超链接伪类：

我们可以使用“超链接伪类”来定义超链接在鼠标单击的不同时期的样式

必须按照“link ，visited  ，hover ，active”的顺序进行，不然浏览器可能无法正常显示这4个样式

```css
a:link{}  	 /*定义a元素未访问的样式*/
a:visited{}	 /*定义a元素访问后的样式*/
a:hover{}	/*定义鼠标经过a元素时的样式*/
a:active{}	/*定义鼠标单击激活后的样式*/
```

最后修改：2022 年 03 月 23 日

如果文章有用，请随意打赏。

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

【css】基本知识

本当迷 • 2022 年 03 月 23 日

## css引用方式：

想在一个页面引入css，一共有3种方法

1.外部样式表

2.内部样式表

3.行内样式表

### 外部样式表：

#### 语法：

```css
<link rel="stylesheet" type="text/css" href="文件路径" />
```

### 内部样式表：

内部样式表指的是，把html文件和css文件放在同一个html文件中。其中，css代码放在style标签内，style标签是放在head标签内部

#### 语法：

```css
<style type="text/css">
....
....
</style>
```

说明：type="text/css"是必须添加的，表示标准的css

### 行内样式表

行内样式表的css是在“标签的style属性”中定义的。

#### 语法：

```css
<div style="color:red;"></div>
```

一般不推荐使用行内样式表进行开发，使用外部样式表开发较容易维护！

## css选择器：

### id和class

id具有唯一性，一个页面的id只能出现一次。

class，可以在页面出现多次

我么可以这样理解：id就相当于我么的身份证，clsss相当于我们的名字。身份证是唯一的，但是两个人的名字却可以相同！

### 选择器的理解：

只有我们选中了某个元素，我们才能对它进行操作，才可以给这个元素添加css样式。

## 实用的5种css选择器：

1.元素选择器

2.id选择器

3.class选择器

4.后代选择器

5.群组选择器

### 元素选择器：

#### 语法：

```css
div{color:red;}
```

表示把页面的所有div元素选中，然后给他们的文本定义成红色

### id选择器：

#### 语法

```css
#box{width:100dx; height:100px}
```

找到id为box的元素，给它添加宽高样式

#### 注意：

对于id选择器，id名字前面必须添加“#”，表示这是一个id选择器，否则该选择器无法生效。

### class选择器：

#### 语法：

```css
.box{color:red;}
```

找到类名为box的所有元素，给它们的文本添加颜色。

#### 注意：

对于class选择器，class名字前面必须添加英文句号“.”，表示这是一个class选择器，否则该选择器无法生效。

### 后代选择器：

后代选择器，就是选择元素内部中的某一种元素的所有元素：包括子元素和其他后代元素（如：孙元素）

#### 语法：

```css
#father div{width:100px; height:100px;}
```

#### 说明：

父元素和后代元素必须要用空格隔开，表示选中某个元素内部的后代元素

### 群组选择器：

群组选择器，指同时对几个选择器进行相同操作

#### 语法：

```css
h1, h2, h3, p{color:red;}
```

#### 说明：

对于群组选择器来说，两个选择器必须使用英文逗号“，”隔开，不然群组选择器无法生效

## 字体样式：

### 属性：

字体类型：font-family

字体大小：font-size

字体粗细：font-weight

字体风格：font-style

字体颜色：color

### 字体类型font-family：

#### 语法：

```css
font-family:字体1，字体2，字体3，...，字体N;
```

#### 说明：

### 字体大小font-size：

#### 语法：

```css
font-size:像素值;
```

### 字体粗细font-weight：

#### 语法：

```css
font-weight:取值;
```

### 字体风格font-style：

#### 语法：

```css
font-style:属性;
```

#### 属性：

默认：normal

斜体：italic

斜体：oblique

## css注释：

### 语法：

```css
/*注释的内容*/
```

### 说明：

/*表示注释的开始，

*/表示注释的结束

## 文本样式：

### 首行缩进：text-indent

#### 语法：

```css
p{font-size:14px; text-indent:28px;}
```

#### 分析：

如果我们想在段落缩进两个字空间，那么把text-index值放大为font-size的两倍即可！

### 水平对齐：text-align

我们使用text-align属性来控制文本在水平方向的对齐方式

#### 语法：

```css
p{text-align:center;}
```

#### 属性：

左对齐：left

居中对齐：center

右对齐：right

### 文本修饰：text-decoration

在css中，我们可以使用text-decoration来定义文本的修饰效果（下划线，中划线，顶划线）

#### 语法：

```css
p{text-decoratioon:取值;}
```

#### 属性：

去除所有划线效果：none

下划线：underline

中划线：line-through

顶划线：overline

### 大小写：text-transform

在css中，我们可以使用text-transform对英文文本进行大小写转换

#### 语法：

```css
p{text-transform:none;}
```

#### 属性：

无转换：none

转换为大写：uppercase

转换为小写：lowercase

将每个英文字母的首字母大写：capitalize

### 行高：line-height

#### 语法：

```css
p{line-height:15px;}
```

## 边框样式：

### 语法：

```css
div{border:1px solid red;}
```

### border第一个参数为border-width

用于定义边框的宽度，取值为像素值

### border第二个参数为border-style

用于定义边框的外观

#### 属性：

无样式：none

虚线：dashed

实线：solid

### border第二个参数为border-color

用于定义边框的颜色

## 列表样式list-style-type：

我们在开发中常用下面那个属性去掉列表的符号，其他的几乎用不到

### 语法：

```css
ol, ul{list-style-type:none;}
```

## 列表项图片list-style-image：

可以使用图片来替代列表项的符号，但是我们一般不使用list-style-image属性来实现，而是使用更高级的iconfont图标技术来实现。

### 语法：

```css
ul{list-style-image: url(img.png);}
```

## 表格样式：

### 表格标题位置：caption-side

#### 语法：

```css
table{caption-side:top;}
```

#### 属性：

标题在顶部：top

标题在底部：botton

### 表格边框合并：border-collapse

在css中，我们可以使用border-collapse属性来去掉单元格之间的空隙，也就是将两条边框合并为一

#### 语法：

```css
table{border-collapse:collapse;}
```

### 表格边框间隔：border-spacing

在css中，我们可以使用border-spacing属性来定义表格边框的间距

#### 语法：

```css
table{border-spacing:8px;}
```

## 图片样式：

### 图片大小：

### 语法：

```css
img{width:60px; height:60px;}
```

### 图片边框：

#### 语法：

```css
img{border:1px solid red;}
```

### 图片对齐：

#### 语法：

```css
#img{text-align:center;}
```

#### 属性：

左对齐：left

居中对齐：center

右对齐：right

### 垂直对齐：

在css中，我们可以使用vertical-align属性来定义图片的垂直对齐方式

#### 语法：

```css
img{vertical-align:baseline;}
```

#### 属性：

顶部对齐：top

中部对齐：middle

基线对齐：baseline

底部对齐：bottom

### 文字环绕：float

文字环绕着图片进行布局

#### 语法：

```css
img{float:left;}
```

#### 属性：

元素向左浮动：left

元素向右浮动：right

## 背景样式：

### 背景颜色：background-color

在css中，我们可以使用background-color属性来定义元素的背景颜色

#### 语法：

```css
div{backgroung-color:red;}
```

### 背景图片样式：

在css中，我们可以使用background-image来给元素定义背景图片

注意：如果图片不显示，可能是我们没有为div添加宽和高。

#### 语法：

```css
div
{	width:250px;
	height:150px;
	backgroung-image:url(img.png);
}
```

### 背景图片重复：background-repeat

#### 语法：

```css
div{background-repeat:no-repeat;}
```

#### 属性：

在水平方向和垂直方向同时平铺：repeat

只有水平方向（x轴）：repeat-x

只有垂直方向（y轴）：repeat-y

不平铺：no-repeat

### 背景图片位置：background-position

在css中，我们可以使用backgroung-position属性来定义背景图片的位置

#### 语法：

```css
div{background-position:12px(水平距离) 24px(垂直距离);}
```

表示背景图片距离该元素左上角的水平距离为12px，垂直方向距离为：24px

## 超链接样式：

### 超链接伪类：

我们可以使用“超链接伪类”来定义超链接在鼠标单击的不同时期的样式

必须按照“link ，visited  ，hover ，active”的顺序进行，不然浏览器可能无法正常显示这4个样式

【css】基本知识

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

【修仙之路】JAVA学习路线

对于异或运算的初步认识与auto用法

【JAVA经典例题】生产者/消费者问题

最近某音挺火的代码实现爱心形状

再见Swagger！拥抱smart-doc无侵入生成接口文档

C语言 - 计算当天是第该年的几天

STL初识-vector容器

【java】创建Cookie时，数据中有中文怎么办？

【conda】常用命令

封装CompletableFuture并行处理工具类

【css】基本知识

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

【css】基本知识

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款