前端之家收集整理的这篇文章主要介绍了【CSS】CSS入门笔记第一弹~，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
一起快乐的学习吧~
预学知识HTML：小白学习笔记之HTML
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML,让 HTML 更漂亮， 让页面布局更简单。
CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
h3 { color: deeppink;font-size: 20px;}
h3 {
color: pink;
font-size: 20px;
}
强烈推荐第二种格式， 因为更直观。
1.小写格式
h3 {
color: pink;
}
2.大写格式
H3 {
COLOR: PINK;
}
强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
h3 {
color: pink;
}
属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
/* 标签选择器：标签名 */
属性：属性值
...
p {
color: aquamarine;
}
div {
color: mediumorchid;
}
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
/* 类选择器口诀：样式点定义 结构类<class>调用 一个或多个 开发最常用 */
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名"></p>
* {
margin: 0;
padding: 0;
}
h2 {
font-size: 16px;
}
CSS 使用 font-weight 属性设置文本字体的粗细
● normal 默认值
● bold 定义加醋 700
● 100-900 400=normal 700=bold
p {
font-weight: bold;
}
CSS 使用 font-style 属性设置文本的风格。
● normal 默认值
● italic 斜体
● 平时很少加斜体 反而要给斜体标签<em></em>改为正常字体
p {
font-style: normal;
}
最好是英文
h2 {
font-family: "Microsoft YaHei";
}
p {
font-family: "Times New Roman",'Times New Roman', Times, serif;
}
顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
body { font: font-style font-weight font-size/line-height font-family;}
color 属性用于定义文本的颜色
div {
/* color: deeppink; */
/* color: rgb(252,209,209); */
color: #71ee94;
text-align 属性用于设置元素内文本内容的水平对齐方式。
h1 {
/* text-align: center; */
/* text-align: right; */
text-align: left;
}
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overlines;
}
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小,如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。
div {
text-indent：20px；
}
div {
text-indent：2em；
}
line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
div {
line-height: 16px;
}
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个
<style>
div {
color: red;
font-size: 12px;
}
</style>
实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
引入外部样式表分为两步：
<link rel="stylesheet" href="css文件路径">
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。
CSS 基本采取简写形式即可
比如 w200 按tab 可以 生成 width: 200px;
比如 lh26px 按tab 可以生成 line-height: 26px;
Vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
文件 ------.>【首选项】---------->【设置】；
搜索emmet.include;
在settings.json下的【工作区设置】中添加以下语句：
"editor.formatOnType": true,
"editor.formatOnSave": true
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
元素一 元素二 {样式声明}
/* ol里面的li改为pink */
ol li {
color: pink;
}
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素
元素1 >元素二 {样式声明}
.nav > a {
color: pink;
}
并集选择器可以选择多组标签,同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
元素1，元素二{样式声明}
/* 熊大熊二为粉色1，小猪一家为粉色 */
div,p,.pig li {
color: pinksss;
}
/* 约定的语法规范，用逗号隔开，最后一个不需要，我们并集选择器喜欢竖着写 */
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
/* 未访问的链接 a:link 把没有访问的链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/* a:visited 选择点击过的链接 */
a:visited {
color: orange;
}
/* a:hover 选择鼠标经过的那个链接 */
a:hover {
color: rgb(112, 187, 237);
}
/* a:active 选择的是我们鼠标正在按下还没有叹气鼠标的那个链接 */
a:active {
color: green;
}
实际在开发中的写法
/*a是标签名 所有的链接*/
a {
color: gray;
}
/*:hover 鼠标经过变色*/
a:hover {
color: red; /*鼠标经过 由灰色变成红色*/
}
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 类表单元素才能获取
input:focus {
background-color: #a1dfe7;
color: pink;
}
CSS第一弹先到这里吧，文章太长啦哈哈，持续更新中…
以上是前端之家为你收集整理的【CSS】CSS入门笔记第一弹~全部内容，希望文章能够帮你解决【CSS】CSS入门笔记第一弹~所遇到的程序开发问题。
如果觉得前端之家网站内容还不错，欢迎将前端之家网站推荐给前端开发程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。