[ 前端与 CSS基础知识 | 青训营笔记]上一篇笔记我介绍了HTML的基础知识，今天继续介绍前端“三剑客”之一的CSS

上一篇笔记我介绍了HTML的基础知识，今天继续介绍前端“三剑客”之一的CSS。

什么是CSS

CSS指的是层叠样式表（Cascading Style Sheets）
CSS 是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则。

举个例子

h1 {
    color: red;
   }

如何引入CSS

（1）内联方式：直接在 HTML 标签中的 style 属性中添加 CSS。

<div style="background: red"></div>

（2）嵌入方式：在 HTML 头部中的style标签下书写 CSS 代码。

<head>
    <style>
    div {
        background: red;
    }
    </style>
</head>

（3）链接方式：HTML 头部的 head 标签引入外部的 CSS 文件。

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

（4）导入方式：采用@import样式导入CSS样式表。

<style>
    @import url(style.css);
</style>

id 和 class 选择器

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：例

.center {text-align:center; }

背景属性

background-color
background-image
background-repeat
background-attachment
background-position

字体和文本样式

color
text-align
text-decoration
text-transform 文本转换
text-indent 文本缩进
font-family
font-style
font-size

链接

四个链接状态：

1、a:link - 正常，未访问过的链接

2、a:visited - 用户已访问过的链接

3、a:hover - 当用户鼠标放在链接上时

4、a:active - 链接被点击的那一刻

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。（盒子模型）

说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

边框属性

border-style属性用来定义边框的样式其属性值有： none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。效果取决于边框的颜色值

border-width 属性为边框指定宽度。

可以指定长度值，比如 2px 或 1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示（如block，inline等），visibility属性指定一个元素应可见还是隐藏。

Position(定位)

position 属性的五个值：

static
relative
fixed
absolute
sticky

Overflow

overflow 属性用于控制内容溢出元素框时显示的方式。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

心得：

CSS主要是用来对页面的样式进行设计。我们可以通过运用CSS技术来设计出我们想要的页面效果。平时书写时可以把html和css分开，便于查看和修改。

[ 前端与 CSS基础知识 | 青训营笔记]