css自学笔记

css自学笔记

1、css简介

css叫叠层样式表，是标记语言主要的使用场景美化网页，布局页面的。
它的主要作用是设置html页面中文本的内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面布局和外观显示样式。

总结：
1、html主要做结构的，显示元素内容。
2、css美化html，布局网页。
3、css最大价值：由html专注去做结构呈现。样式交给css，即结构html，样式css相分离。

2、css语法规范

css规则由两个部分构成：选择器及一条或者多条声明。
如：h1{color：red fontsize：25px} 。
其中h1为选择器，{ }中的为声明。

总结：
1、css选择器是用于指定css样式的html标签，花括号内是对选择的对象设置的具体样式。
2、属性和属性值以“键值对”的形式出现。
3、属性是对指定的对象设置的样式属性，例如：字体大小、文本颜色等。
4、属性和属性值之间用英文“：”分开。
5、多个“键值对”之间用英文“；”进行区分。

3、选择器

选择器简单来说，就是用来选择标签的。可以分为基础选择器和复合选择器。
基础选择器由单个选择器组成，类型包括：
1、标签选择器。
2、类选择器。
3、id选择器。
4、通配符选择器 。

3.1、标签选择器

标签选择器：选择器为标签名。
优点：为可以把页面中所有同类的标签进行统一设置。
缺点：为不能差异化设置，只能选择全部的当前标签
语法：
标签：{属性：属性值}。

3.2、类选择器

类选择器可以单独选择一个或者多个标签。是开发最常用的选择器。
语法：
style部分用：“.”+自定义的名称进行设置。

body部分在标签元素后面加上“class=自定义的名称”进行调用。

3.2.1、类选择器-多类名

在类选择器中，可以给一个标签元素指定多个类名。把相同的标签元素和样式放到一个类里，这些标签可以调用这个公共的类，然后再调用自己独特的类，从而节约css代码。
语法：
1、一个标签可以指定多个类名。
2、在class里写多个类名，中间用空格分开。

3.3、id选择器

id选择器可以为标有特定id的html元素指定样式。
html元素以id属性来设置id选择器，css中id选择器以“#”来定义。
需注意：id选择器在一个页面只能调用一次，在开发中一般用于页面上的唯一性元素上，经常和javascript搭配使用。
语法：
style部分通过“#+自定义的id名”来设置。

body部分用id=“自定义的id名”。只能调用一次”。

3.4、通配符选择器

在css中，通配符选择器使用“*”定义，他可以是选取页面中所有的标签 元素，进行修改。一般在特殊情况下使用 。
语法：
style部分：

4、字体

4.1、文字字体

在css使用font-family属性定义文字的字体，字体推荐用英文，各个字体用空格隔开，多单词属性值用 “ ”包裹起来。
语法：

4.2、文字粗细

在css用font-weight属性设置文本的字体粗细 。
字体粗细有几个值，分别是：
normal正常。
bold粗体。
bolder特粗体。
lighter细体。
可以通过数字表示粗细，数字不加单位。700=加粗，400=正常。
语法：

4.3字体大小

在css中用font-size属性定义文字大小，谷歌浏览器默认显示16px.
需注意：
1、不同浏览器默认字体大小不一样，我们尽量给个明确值的大小。
2、通常给body指定整个页面的文字大小。
3、标题标签比较特殊，需要单独指定大小。
语法：

4.4、字体样式

在css中使用font-stly属性设置文本样式风格。
1、属性值normal 默认值。浏览器会显示编制的字体样式 font-style:normal。
2、属性值italic 浏览器会显示斜体字的样式。
语法：

4.5、字体复合写法

在css中，字体复合属性的简写方式有固定一下顺序，各属性以空格隔开，不需要设置的属性可以省略，但必须要有属性font-size和font-family。
简写顺序：
font: font-style font-weigth font-size/line-height font-family。
语法：

5、文本属性

在css中text属性可定义文本的外观。比如：文本的颜色、文本对齐、装饰文本、文本缩进、行间距等。

5.1、文本颜色

在css中，文本颜色用color：颜色值; 设置。
可以用以下三种方式呈现：
1、预定义颜色值（英文单词）。
2、十六进制（#xxxxxx）。
3、RGB代码（rgb（x，x，x）。
在开发中用十六进制比较多。
语法：

5.2、文本对齐

在css中，文本对齐用text-align设置元素内文本内容的水平对齐方式。
属性值有center居中对齐、left左对齐（默认）、right右对齐。
语法：

5.3、文本装饰

在css中，装饰文本用 text-decoration属性规定添加到文本的装饰。
可以给文本加下划线，删除线、上划线。
text-decoration的属性值：

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

语法：

5.4、文本缩进

在css中，用text-indent属性来指定文本第一行的缩进，通常是将段落的首行缩进。
我们在段落缩进2个文字时，一般用em这个相对单位。就是当前元素font-size 1个文字大小。如果当元素没设置大小，则按父元素的1个文字的大小。
语法：

5.5、文本行间距

在css中，line-height属性设置行间距（行高）。可以控制文字行与行之间的距离。
行间距由上间距、文本高度、下间距组成。当文本高度不变时，我们真正改的行间距是上间距和下间距。
语法：

6、引入方式样式表

按照css样式书写位置（或者引入方式），css样式表可以分为3大类
1、行内样式表（行内式）。
2、内部样式表（嵌入式）。
3、外部样式表（链接式）。

6.1、内部样式表

在css中，内部样式表（内嵌样式表）是将所有的css代码抽取出来，单独放到一个style标签中。
style标签理论上可以放到html问道的任何一个地方，但一般放到head标签中。
语法：

6.2、行内样式标

在css中，行内样式表（内联样式表）是在元素标签内部书写style属性，设定css样式。适合于修改简单样式。
style是标签属性。在""中间，书写符合css规范的属性和属性值。可以控制当前设置样式。
语法：

6.3、外部样式标

在css中，实际开发都是外部样式表，适合样式比较多的情况。核心是：样式单独写道css文件中，之后把css文件引入到html页面中使用。
引入外部样式表分两步：
1、新建一个后缀名.css的样式文件，把所有的css代码都放入此文件中。

2、在html页面中、使用link标签引入这个文件。
语法：

7、chrome调试工具

打开浏览器，按f12或者右键空白页面处点检查。
使用调试工具：
1、ctrl+滚轮可以放大开发者工具代码大小。
2、左边是html元素结构，右边是css样式。
3、右边css样式可以改动数值(左右箭头或者直接输入)和查看颜色。
4、ctrl+0复原浏览器大小。
5、如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
6、如果有样式，但是样式前面有黄色感叹号，则是样式属性书写错误。

8、emmet语法

emmet语法通过缩写，提高编写html/css编写速度，vscode内部集成了该语法。

快速生成html结构语法：
1、生成标签直接输入标签名按tab键即可， 比如div然后tab，就可以生成。
2、如果想要生成多个相同的标签，加上 * 即可，比如div*3，就可以快速生成3个div。
3、如果有父子级关系的标签，可以用>即可，比如ul>li。
4、如果有兄弟级关系的标签，可以用+即可，比如div+p。
5、如果生成带有类名或者id名字的，直接写.类名称或者#id名称的div，按tab就可以了。
6、如果生成div类名是有顺序的，可以用自增符号$。
7、如果想要在生成的标签内部写内容可以用{ }表示。

格式化代码：
可以设置成保持当前页面的时候自动格式化代码：
1、文件>首选项>设置。
2、搜索emmet.include。
3、在settings.json下的用户中添加一下语句。
“editor.formatOnType”:true,
“editor.formatOnSave”:true
只需要设置一次即可。

9、复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
1、复合选择器可以更准确、更高效的选择目标元素（标签）。
2、复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的。
3、常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器。

9.1、后代选择器

后代选择器也被称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：

元素1 元素2 {样式声明}
1、这是后代选择器， 元素1和 元素2中间用空格隔开。
2、 元素1是父级， 元素2是子级，最终选择元素2。
3、 元素2可以是 元素1的儿子，也可以是孙子，只要是后代就行。
4、 元素1和 元素2可以是任意基础选择器。

9.2、子元素选择器

子元素选择器（子选择器），只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
语法：

元素1>元素2 {样式声明}
1、元素1和元素2用大于号隔开。
2、元素1是父级，元素2是子级，最终选择的是元素2。
3、元素2必须是亲儿子，其孙子、重孙之类他都不管，你也可以叫他亲儿子选择器。

9.3、并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
语法：

元素1，元素2{样式声明}
并集选择器是各选择器通过 “,” 连接而成，任何形式的选择器都可以作为并集选择器的一部分。

9.4、伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大特点是用冒号（：）表示，比如:hover、:first-child
因为伪类选择器很多，比如有链接伪类、结构伪类等。

9.4.1、链接伪类选择器

链接伪类选择器

链接伪类	说明
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hove	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下未弹起的链接）

语法：

链接伪类选择器主要事项：
1、为确保生效，需按照lvha的顺序声明:link-:visited-:hover-:active。
2、因为a链接在浏览器有默认样式，我们实际开发中要给a单独指定样式。

9.4.2、focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况input表单元素才能获取，因此这个选择器主要针对表单。
语法：

10、元素的选择模式

元素显示模式就是元素（标签）以什么方式显示，比如div自己占一行，比如一行可以放多个span。
html元素一般分为块元素和行内元素。
需了解到：
1、什么是元素的显示模式？
2、元素显示模式的分类？
3、元素显示模式的转换?

10.1、块元素

常见的块元素有h1-h6、p、div、ul、ol、li等，其中div标签是典型的块元素。
块元素的特点：
1、比较霸道，一人占一行。
2、高度、宽度、外边距及内边距都可以控制。
3、宽度默认是容器（父级宽度）的100%。
4、是一个容器及盒子，里面可以放行内或者块级元素。

注意：
1、文字类的元素不能使用块级元素。
2、p标签主要用于存放文字，因此p里面不能放块级元素，特别不能放div。
3、同理h1-h6等文字类块元素标签，里面也不能放其他块级元素。
语法：

10.2、行内元素

常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中span标签是最典型的行内元素。其他地方也将行内元素称为内联元素。

行内元素的特点：
1、相邻的行内元素在一行上，一行可以显示多个。
2、高、宽直接设置无效。
3、默认宽度是它本身内容的宽度。
4、行内元素只能容纳文本或其他行内元素。

注意:
1、链接里面不能再放链接。
2、特殊情况下,a里面可以放块级元素,但是要给a转换一下块级模式最安全。

语法：

10.3、行内块元素

在行内元素中有几个特殊的标签，img/ 、siput/、td、他们同时具有块元素和行内元素的特点。

行内块元素的特点：
1、和相邻行内块元素（行内块）在一行上，但他们之间会有空白缝隙。一行可以显示多个（行内元素的特点）。
2、默认宽度就是他本身内容的宽度（行内元素特点）。
3、高度、行高、外边距以及内边距都可以控制（块元素特点）。

语法：

10.4、元素显示模式转换

特殊情况下、我们需要将元素模式进行转换，简单理解：一个模式的元素需要另一种模式的特性。比如想要增加链接a的触发范围。

转换代码：

项目	Value
转换块元素	display: block;
转换行元素	display: inline;
转换行内块	display: inline-block;

语法：

10.5、单行文字垂直居中代码

在css中，没有给我们提供文字垂直居中的代码，但我们可以通过小技巧来实现。
解决方法：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

语法：

11、背景

在css中，通过background属性，可以给页面元素添加背景样式。 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

11.1、背景颜色

在css中，通过background-color属性定义元素的背景颜色。
一般情况下背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。

语法：

11.2、背景图片

在css中，通过background-image属性描述了元素背景图像。
实际开发常见于logo或者一些装饰性的小图片或者超大背景图片。
优点是非常便于控制位置（精灵图也是一种应用场景）。

语法：

11.3、背景平铺

在css中，通过background-repeat属性对背景图片进行平铺。
它有4个取值：
1、repeat:平铺。
2、no-repeat：不平铺。
3、repeat-x࿱