CSS基础知识巩固你的前端基础

拼搏现实的明天。 2021-07-24 23:23 477阅读 0赞

## CSS基础知识 ##

1.  `css`，英文 `Cascading Style Sheets`，中文名：级联样式表。层叠样式表。
2.  `css`是一种表现语言，是对网页语言的补充。
3.  `css`用于网页的风格设计，包括字体，颜色，位置等。
4.  `css`使用的4中方式：引入外部样式文件，导入外部样式文件，使用内部样式定义，使用内联样式定义。

引入外部样式文件：

导入外部样式文件:

使用内部样式定义：

使用内联样式定义：

## css的两个特性：层叠，继承 ##

层叠：层叠样式生效的优先级：

内联样式->内部样式->外部样式->浏览器默认效果。

继承，就是css属性可以从父元素向下传递到子元素。

### `css`的选择器 ###

1.  元素选择器，是最简单的选择器。
2.  通配符选择器，用 `"*"`表示，表示对任意元素都有效。
3.  属性选择器

格式：

E[attribute]{property1:value1; property2:value2;...}

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>E[attribute]</code></td> 
   <td>用于选取带有指定属性的元素</td> 
  </tr> 
  <tr> 
   <td><code>E[attribute=value]</code></td> 
   <td>用于选取带有指定属性和指定值的元素</td> 
  </tr> 
  <tr> 
   <td><code>E[attribute~=value]</code></td> 
   <td>用于选取属性值包含指定值的元素，该值必须是整个单词，可以前后有空格</td> 
  </tr> 
  <tr> 
   <td><code>E[attribute\|=value]</code></td> 
   <td>用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-”</td> 
  </tr> 
 </tbody> 
</table>

### 派生选择器 ###

1.  派生选择器根据元素在其位置的上下文关系定义样式
2.  派生选择器分3种：后代选择器，子元素选择器，相邻兄弟选择器
3.  后代选择器是某元素后代的所有元素。
4.  子元素选择器是相对于父元素的第一级子元素符合条件。
5.  相邻兄弟选择器，针对的元素是同级元素，拥有相同的父元素，且两个元素是相邻的。
6.  `id`选择器，以特定`id`值的HTML元素指定样式。
7.  类选择器，以指定`class`的HTML元素指定样式。
8.  伪类选择器

> 伪类选择器：伪类选择器和伪元素选择器

伪类以冒号`(:)`开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。

`css`中常用的伪类如下表所示：

<table> 
 <thead> 
  <tr> 
   <th>伪类名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>:active</code></td> 
   <td>向被激活的元素添加样式</td> 
  </tr> 
  <tr> 
   <td><code>:focus</code></td> 
   <td>向拥有输入焦点的元素添加样式</td> 
  </tr> 
  <tr> 
   <td><code>:hover</code></td> 
   <td>向鼠标悬停在上方的元素添加样式</td> 
  </tr> 
  <tr> 
   <td><code>:link</code></td> 
   <td>向未被访问的链接添加样式</td> 
  </tr> 
  <tr> 
   <td><code>:visited</code></td> 
   <td>向已被访问的链接添加样式</td> 
  </tr> 
  <tr> 
   <td><code>:first-child</code></td> 
   <td>向元素添加样式，且该元素是它的父元素的第一个子元素</td> 
  </tr> 
  <tr> 
   <td><code>:lang</code></td> 
   <td>向带有指定<code>lang</code>属性的元素添加样式</td> 
  </tr> 
 </tbody> 
</table>

伪元素选择器

`css`中常用的伪元素如下表所示：

<table> 
 <thead> 
  <tr> 
   <th>伪元素名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>:first-letter</code></td> 
   <td>向文本的第一个字母添加样式</td> 
  </tr> 
  <tr> 
   <td><code>:first-line</code></td> 
   <td>向文本的第一行添加样式</td> 
  </tr> 
  <tr> 
   <td><code>:after</code></td> 
   <td>在元素之后添加内容</td> 
  </tr> 
  <tr> 
   <td><code>:before</code></td> 
   <td>在元素之前添加内容</td> 
  </tr> 
 </tbody> 
</table>

### css背景 ###

`css`背景属性如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>background-color</code></td> 
   <td>定义背景颜色</td> 
  </tr> 
  <tr> 
   <td><code>background-image</code></td> 
   <td>定义背景图片</td> 
  </tr> 
  <tr> 
   <td><code>background-repeat</code></td> 
   <td>定义背景图片是否重复以及其重复方式</td> 
  </tr> 
  <tr> 
   <td><code>background-attachment</code></td> 
   <td>定义背景图片是否跟随内容滚动</td> 
  </tr> 
  <tr> 
   <td><code>background-position</code></td> 
   <td>定义背景图片的水平位置和垂直位置</td> 
  </tr> 
  <tr> 
   <td><code>background</code></td> 
   <td>可以用一条样式定义各种背景属性</td> 
  </tr> 
 </tbody> 
</table>

#### background ####

1.  `background-color`用于设置背景颜色，初始值为 `transparent`透明色。
2.  颜色取值3种如：颜色名，十六进制颜色，rgb函数。
3.  `background-image`用于设置元素的背景图片，默认值为 `none`。
4.  `background-repeat`控制图像的平铺。

> `background-repeat`默认值为`repeat`，即图像沿着x轴和y轴平铺，还可以指定沿着x轴平铺`rpeat-x`，沿着y轴平铺`repeat-y`，或者不平铺`no-repeat`，继承父元素该属性设置`inherit`。

1.  `background-attachment`用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为： `scroll`，表示可以随着页面其余部分的滚动而滚动。设置 `fixed`，表示当页面其余部分滚动时，背景图片不会滚动，设置 `inherit`，继承父元素。
2.  `background-position`用于设置背景图像圆点的位置。

> `background`可以将`background-color`，`background-position`，`background-attachment`，`background-repeat`，`background-image`全部设置。

### css字体属性 ###

`css`常用字体属性表：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>font-family</code></td> 
   <td>定义文本的字体系列</td> 
  </tr> 
  <tr> 
   <td><code>font-size</code></td> 
   <td>定义文本的字体尺寸</td> 
  </tr> 
  <tr> 
   <td><code>font-variant</code></td> 
   <td>定义是否以小型大写字母的字体显示文本</td> 
  </tr> 
  <tr> 
   <td><code>font-style</code></td> 
   <td>定义文本的字体是否是斜体</td> 
  </tr> 
  <tr> 
   <td><code>font-weight</code></td> 
   <td>定义字体的粗细</td> 
  </tr> 
  <tr> 
   <td><code>font</code></td> 
   <td>可以一条样式定义各种字体属性</td> 
  </tr> 
 </tbody> 
</table>

1.  `font-family`用于设置元素的字体，该元素属性值一般可以设置多个字体。
2.  `font-size`用于设置字体的尺寸。
3.  `font-style`用于设置字体是否是斜体，默认值为 `normal`，当设置为 `italic`，显示为一个斜体的样式，当设置为 `oblique`，显示为一个倾斜的样式。
4.  `font-variant`用于设置字体使用小写字体，默认为 `normal`，一旦设置为 `small-caps`，将所有小写字母变为大写。
5.  `font-weight`用于设置字体的粗细， `normal`值等于400， `bold`的值等于700。
6.  `font`，可以设置 `font-family,font-size,font-style,font-variant,font-weight`。

`css`文本属性表：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>color</code></td> 
   <td>文本颜色</td> 
  </tr> 
  <tr> 
   <td><code>direction</code></td> 
   <td>文本方向或者书写方向</td> 
  </tr> 
  <tr> 
   <td><code>letter-spacing</code></td> 
   <td>字符的间距</td> 
  </tr> 
  <tr> 
   <td><code>line-height</code></td> 
   <td>文本的行高</td> 
  </tr> 
  <tr> 
   <td><code>text-align</code></td> 
   <td>文本的水平对齐方式属性,设置元素中文本的水平方式，值有<code>left，right，center，inherit</code>。</td> 
  </tr> 
  <tr> 
   <td><code>text-decoration</code></td> 
   <td>给文本添加修饰效果，值有<code>underline为添加下画线，overline添加上画线，line-through添加删除线，blink添加闪烁的效果,none无如何修饰,inherit</code>。</td> 
  </tr> 
  <tr> 
   <td><code>text-indent</code></td> 
   <td>定义文本的首行缩进方式，默认值为0</td> 
  </tr> 
  <tr> 
   <td><code>text-shadow</code></td> 
   <td>为文本添加阴影效果</td> 
  </tr> 
  <tr> 
   <td><code>text-transform</code></td> 
   <td>切换文本的大小写</td> 
  </tr> 
  <tr> 
   <td><code>white-space</code></td> 
   <td>设置如何处理元素内的空白</td> 
  </tr> 
  <tr> 
   <td><code>word-spacing</code></td> 
   <td>定义单词之间的距离</td> 
  </tr> 
 </tbody> 
</table>

`css`尺寸属性表：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>width</code></td> 
   <td>设置元素的宽度</td> 
  </tr> 
  <tr> 
   <td><code>min-width</code></td> 
   <td>设置元素的最小宽度</td> 
  </tr> 
  <tr> 
   <td><code>max-width</code></td> 
   <td>设置元素的最大宽度</td> 
  </tr> 
  <tr> 
   <td><code>height</code></td> 
   <td>设置元素的高度</td> 
  </tr> 
  <tr> 
   <td><code>min-height</code></td> 
   <td>设置元素的最小高度</td> 
  </tr> 
  <tr> 
   <td><code>max-height</code></td> 
   <td>设置元素的最大高度</td> 
  </tr> 
 </tbody> 
</table>

`css`列表属性表：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>list-style-image</code></td> 
   <td>设置列表项标记样式为图像，<code>none/inherit/url</code></td> 
  </tr> 
  <tr> 
   <td><code>list-style-position</code></td> 
   <td>设置列表项标记的位置，<code>inside/outside/inherit</code></td> 
  </tr> 
  <tr> 
   <td><code>list-style-type</code></td> 
   <td>设置列表项标记的类型</td> 
  </tr> 
  <tr> 
   <td><code>list-style</code></td> 
   <td>可以用一条样式定义各种列表属性</td> 
  </tr> 
 </tbody> 
</table>

`list-style-type`

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>disc</code></td> 
   <td>实心圆</td> 
  </tr> 
  <tr> 
   <td><code>circle</code></td> 
   <td>空心圆</td> 
  </tr> 
  <tr> 
   <td><code>square</code></td> 
   <td>方块</td> 
  </tr> 
  <tr> 
   <td><code>decimal</code></td> 
   <td>数字</td> 
  </tr> 
  <tr> 
   <td><code>low-roman</code></td> 
   <td>小写罗马数字</td> 
  </tr> 
  <tr> 
   <td><code>upper-roman</code></td> 
   <td>大写罗马数字</td> 
  </tr> 
  <tr> 
   <td><code>low-alpha</code></td> 
   <td>小写字母</td> 
  </tr> 
  <tr> 
   <td><code>upper-alpha</code></td> 
   <td>大写字母</td> 
  </tr> 
  <tr> 
   <td><code>none</code></td> 
   <td>无标记</td> 
  </tr> 
  <tr> 
   <td><code>inherit</code></td> 
   <td>继承父元素的该设置</td> 
  </tr> 
 </tbody> 
</table>

`css`表格属性表：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>border-collapse</code></td> 
   <td>设置是否合并表格边框</td> 
  </tr> 
  <tr> 
   <td><code>border-spacing</code></td> 
   <td>设置相邻单元格边框之间的距离</td> 
  </tr> 
  <tr> 
   <td><code>caption-side</code></td> 
   <td>设置表格标题的位置</td> 
  </tr> 
  <tr> 
   <td><code>empty-cells</code></td> 
   <td>设置是否显示表格中空单元格上的边框和背景</td> 
  </tr> 
  <tr> 
   <td><code>table-layout</code></td> 
   <td>设置用于表格单元格列宽的设置方式</td> 
  </tr> 
 </tbody> 
</table>

### 盒模型 ###

1.  `css`盒模型，包含元素内容 `content`，内边距 `padding`，边框 `border`，外部距 `margin`。

`css`内边距属性，元素的内边距在边框和内容之间。

`css`内边距的属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>padding-top</code></td> 
   <td>元素的上内边距</td> 
  </tr> 
  <tr> 
   <td><code>padding-right</code></td> 
   <td>元素的右内边距</td> 
  </tr> 
  <tr> 
   <td><code>padding-bottom</code></td> 
   <td>元素的下内边距</td> 
  </tr> 
  <tr> 
   <td><code>padding-left</code></td> 
   <td>元素的左内边距</td> 
  </tr> 
  <tr> 
   <td><code>padding</code></td> 
   <td>用一个声明定义所有内边距属性</td> 
  </tr> 
 </tbody> 
</table>

设置顺序为上右下左依次进行。

padding: 10px 10px 10px 10px;

`css`外边距的属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>margin-top</code></td> 
   <td>定义元素的上外边距</td> 
  </tr> 
  <tr> 
   <td><code>margin-right</code></td> 
   <td>定义元素的右外边距</td> 
  </tr> 
  <tr> 
   <td><code>margin-bottom</code></td> 
   <td>定义元素的下外边距</td> 
  </tr> 
  <tr> 
   <td><code>margin-left</code></td> 
   <td>定义元素的左外边距</td> 
  </tr> 
  <tr> 
   <td><code>margin</code></td> 
   <td>用一个声明定义所有外边距属性</td> 
  </tr> 
 </tbody> 
</table>

`css`边框的属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>border-top-style</code></td> 
   <td>上边框的样式属性</td> 
  </tr> 
  <tr> 
   <td><code>border-right-style</code></td> 
   <td>右边框的样式属性</td> 
  </tr> 
  <tr> 
   <td><code>border-bottom-style</code></td> 
   <td>下边框的样式属性</td> 
  </tr> 
  <tr> 
   <td><code>border-left-style</code></td> 
   <td>左边框的样式属性</td> 
  </tr> 
  <tr> 
   <td><code>border-style</code></td> 
   <td>设置4条边框的样式属性</td> 
  </tr> 
  <tr> 
   <td><code>border-top-width</code></td> 
   <td>设置上边框的宽度属性</td> 
  </tr> 
  <tr> 
   <td><code>border-right-width</code></td> 
   <td>设置右边框的宽度属性</td> 
  </tr> 
  <tr> 
   <td><code>border-bottom-width</code></td> 
   <td>设置下边框的宽度属性</td> 
  </tr> 
  <tr> 
   <td><code>border-left-width</code></td> 
   <td>设置下边框的宽度属性</td> 
  </tr> 
  <tr> 
   <td><code>border-width</code></td> 
   <td>设置4条边框的宽度属性</td> 
  </tr> 
  <tr> 
   <td><code>border-top-color</code></td> 
   <td>设置上边框的颜色属性</td> 
  </tr> 
  <tr> 
   <td><code>border-right-color</code></td> 
   <td>设置右边框的颜色属性</td> 
  </tr> 
  <tr> 
   <td><code>border-bottom-color</code></td> 
   <td>设置下边框的颜色属性</td> 
  </tr> 
  <tr> 
   <td><code>border-left-color</code></td> 
   <td>设置左边框的颜色属性</td> 
  </tr> 
  <tr> 
   <td><code>border-color</code></td> 
   <td>设置4条边框的颜色属性</td> 
  </tr> 
  <tr> 
   <td><code>border-top</code></td> 
   <td>用一条声明定义所有上边框的属性</td> 
  </tr> 
  <tr> 
   <td><code>border-right</code></td> 
   <td>用一条声明定义所有右边框的属性</td> 
  </tr> 
  <tr> 
   <td><code>border-bottom</code></td> 
   <td>用一条声明定义所有下边框的属性</td> 
  </tr> 
  <tr> 
   <td><code>border-left</code></td> 
   <td>用一条声明定义所有左边框的属性</td> 
  </tr> 
  <tr> 
   <td><code>border</code></td> 
   <td>用一条声明定义所有边框的属性</td> 
  </tr> 
  <tr> 
   <td><code>border-width</code></td> 
   <td>一次定义4条边框的宽度</td> 
  </tr> 
  <tr> 
   <td><code>border-color</code></td> 
   <td>一次定义4条边框的颜色</td> 
  </tr> 
 </tbody> 
</table>

边框的样式

1.  `none`，无边框效果
2.  `hidden`，与 `none`相同
3.  `dotted`，点线边框效果
4.  `dashed`，虚线边框效果
5.  `double`，双线边框效果
6.  `solid`，实线边框效果
7.  `groove`，3D凹槽边框效果
8.  `ridge`，3D凸槽边框效果

`css`轮廓是绘制在元素周围的一条线，位于边框边缘的外围，起到突出元素的作用。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>outline-style</code></td> 
   <td>定义轮廓的样式属性</td> 
  </tr> 
  <tr> 
   <td><code>outline-color</code></td> 
   <td>定义轮廓的颜色属性</td> 
  </tr> 
  <tr> 
   <td><code>outline-width</code></td> 
   <td>定义轮廓的宽度属性</td> 
  </tr> 
  <tr> 
   <td><code>outline</code></td> 
   <td>同一个声明中定义所有的轮廓属性</td> 
  </tr> 
 </tbody> 
</table>

### 布局属性 ###

1.  布局属性是文档中元素排列显示的规则
2.  布局方式3种：普通文档流，浮动，定位

`css`浮动涉及到的属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>float</code></td> 
   <td>设置框是否需要浮动以及浮动方向</td> 
  </tr> 
  <tr> 
   <td><code>clear</code></td> 
   <td>设置元素的哪一侧不允许出现其他浮动元素</td> 
  </tr> 
  <tr> 
   <td><code>clip</code></td> 
   <td>裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则</td> 
  </tr> 
  <tr> 
   <td><code>overflow</code></td> 
   <td>设置内容溢出元素框时的处理方式，值：<code>visible,auto,hidden,scroll</code></td> 
  </tr> 
  <tr> 
   <td><code>display</code></td> 
   <td>设置元素如何显示，值<code>none,block,inline,inline-block,inherit</code></td> 
  </tr> 
  <tr> 
   <td><code>visibility</code></td> 
   <td>定义元素是否可见，<code>visibility</code>设置为隐藏，元素占用的空间依然会保留，但<code>display:none</code>不保留占用空间，值：<code>visible,hidden</code></td> 
  </tr> 
 </tbody> 
</table>

`css`定位的属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>position</code></td> 
   <td>元素的定位类型，值<code>static</code>,<code>absolute</code>绝对，<code>relative</code>相对</td> 
  </tr> 
  <tr> 
   <td><code>top</code></td> 
   <td>元素上外边距</td> 
  </tr> 
  <tr> 
   <td><code>right</code></td> 
   <td>元素右外边距</td> 
  </tr> 
  <tr> 
   <td><code>bottom</code></td> 
   <td>元素下外边距</td> 
  </tr> 
  <tr> 
   <td><code>left</code></td> 
   <td>元素的左外边距</td> 
  </tr> 
  <tr> 
   <td><code>z-index</code></td> 
   <td>元素的堆叠顺序</td> 
  </tr> 
 </tbody> 
</table>

> `z-index`用于设置目标对象的定位层序，数值越大，所在层级越高。该属性只在`position:absolute`时有效。