前端自学学习笔记——CSS

前端自学学习笔记——CSS

1.CSS简介

css主要用于设置HTML页面中文本内容、图片的外形以及版面的布局和外观的显示样式。

• 主要构成：由选择器以及一条或多条键值对组成
• 语法格式：选择器{ 属性 ： 值； … }

2.CSS三大特性

2.1层叠性

相同属性选择器给设置相同样式，此时一个样式会覆盖另一个冲突样式。

原则：

• 样式冲突，遵循就近原则，那个样式离结构近，就执行哪个样式。
• 样式不冲突不层叠。

2.2继承性

子标签会继承父标签中的某些样式。

可继承的样式：文本样式（text-）、字体样式（font-）以及（line-）开头的和color属性。

行高的继承：

• 行高可以写单位也可以不写单位，即为字体的倍数。
• 若不写单位，子元素无行高，由字体大小情况下会继承父元素的行高，此时子元素行高为自身文字大小 x 继承来的行高。
• 此种写法可以让子元素根据自身字体大小自动调整行高。

2.3优先级

当同一个元素指定多个选择器，就会产生优先级。

原则：

• 选择器相同，则执行层叠性。
• 选择器不同，则根据选择器权重执行

选择器权重表如下：

选择器	权重
继承或*（通配符选择器）	0，0，0，0
元素选择器	0，0，0，1
类选择器、伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式	1，0，0，0
!important	无穷大

3.CSS属性书写顺序

1. 布局定位属性：display, position, float, clear, visibility, overflow
2. 自身属性：width, height, margin, padding, border, background
3. 文本属性：color, font, text-decoration, text-align, vertical-align, white-space
4. 其他属性：content, cursor, border-radius, box-shadow, text-shadow

4.CSS引入方式

4.1行内样式表（行内式）

在元素标签内部的style属性中设置css样式，适合修改简单样式

4.2内部样式表（嵌入式）

在HTML页面内部，将所有css代码抽取出来放入

4.3外部样式表（链接式）

将所有样式单独写入css文件中，之后再HTML页面对齐进行引入。

实现步骤：

• 创建后缀名为.css的样式文件。
• 在HTML页面中利用标签引入。

 <link rel="stylesheet" href="css文件路径"><link>

5.CSS选择器

5.1基础选择器

5.1.1标签选择器

使用HTML标签名作为选择器

语法： 标签名 {
		属性: 属性值;
		...
	  }

优点：能快速为页面中同类型的标签统一设置样式

缺点：不能差异化设置样式

5.1.2类选择器

使用类名作为选择器，可以单选或选出几个同类名标签

语法： .类名 {
		属性: 属性值;
		...
	  }

口诀：结构类调用，一个或多个，开发最常用。

5.1.3id选择器

为标有特定id的HTML元素指定样式

语法： #id名 {
		属性: 属性值;
		...
	  }

口诀：结构id调用，只调用一次。

5.1.4通配符选择器

选出页面中所有元素，用 * 定义，不需要调用

语法： * {
		属性: 属性值;
		...
	  }

5.2复合选择器

5.2.1后代选择器

可以选择父元素中的子元素，父元素的所有后代元素

语法： 元素1 元素2 ...{
		  属性: 值;
		  ...
	  }
注：为指定的后代元素（元素2，可以是子元素也可以是孙元素）指定样式，其中元素1、元素2可为任意基础选择器

5.2.2子选择器

只能选择作为某一元素的最近一级子元素

语法： 元素1 > 元素2{
		  属性: 值;
		  ...
	  }
注：为元素2修改样式，其中元素1、元素2可为任意基础选择器

5.2.3并集选择器

选择多组标签同时为他们定义相同样式，常用于集体声明。

语法： 元素1 , 元素2 , ... {
		  属性: 值;
		  ...
	  }
注：元素1、元素2都修改了样式，其中元素1、元素2可为任意选择器

5.2.4伪类选择器

用于向某些选择器添加特殊效果，用 : 表示。

链接伪类选择器
:link 选择所有未被访问的链接
:visited 选择所有已被访问的链接
:hover 选择鼠标指针位于其上的链接
:active 选择活动链接（鼠标按下但未弹起）
建议按照LVHA的顺序声明

:focus伪类选择器
用于获取焦点的表单，用于表单中

6.Emmet语法

6.1快速生成HTML结构语法

1. 生成标签，直接输入标签名，再按Tab键即可
2. 如果想生成多个相同的标签，标签名*个数
3. 如果想生成父子级标签，父级标签名>子级标签名
4. 如果想生成兄弟级标签，兄弟1标签名+兄弟2标签名
5. 如果想生成带有类名或者id名的div标签，.类名 、#id名
6. 如果想生成带有类名或者id名的其他标签，标签名.类名、标签名#id名
7. 如果想生成的标签中类名是有顺序的，*标签名.类名$个数
8. 如果想生成的标签中添加内容，标签名{内容}

6.2快速生成CSS样式语法

采取简写形式：

w200 按tab 生成 width: 200px;
lh200 按tab 生成 line-height: 200px;
tac 按tab 生成 text-align: center;

6.3快速格式化代码

快捷键：Alt + Shift + f

在vscode中设置保存页面时自动格式化代码：

1. 文件—>首选项—>设置
2. 搜emment.include;
3. 在setting.json下的用户中添加：

"editor.formatOnType":true,
"editor.formatOnSave":true

7.元素显示模式

7.1块元素

常见标签有：

<h1></h1>、<h2></h2>、<h3></h3>、 <h4></h4>、<h5></h5>、<h6></h6>
<div></div>、<p></p>、<ul></ul>、<ol></ol>、<li></li>
注：文字类的元素内不能使用块级元素

特点：

• 独占一行，默认宽度是容器的100%
• 高度、宽度、外边距、内边距可控
• 是一个容器及盒子，内可放行内元素或块级元素或行内块元素

7.2行类元素

常见标签：

<a></a>、<strong></strong>、<b></b>、<em></em>、<i></i>、<del></del>、<s></s>、<ins></ins>、<span></span>
注：<a></a>链接标签里面不能再放链接标签，但是链接标签中可以放块级元素

特点：

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

7.3行内块元素

常见标签：

<img/>、<input/>、<td></td>

特点：

1. 一行可以显示多个，但与相邻行内元素之间存在空隙
2. 默认宽度就是它本身内容宽度
3. 高度、外边距、内边距，行高可控

7.4元素的模式转换

一个元素的显示模式可以转换为另一种显示模式

属性值	含义
display: block;	转换为块级元素
display: inline;	转换为行内元素
display: inline-block;	转换为行内块元素

7.5元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来。

display显示隐藏： 用于设置一个元素如何显示

dispaly: none; 隐藏对象

dispaly: block; 显示元素（注：该属性有两种含义）

display隐藏元素后，不再占有原来的位置。

visiblity显示隐藏： 用于指定一个元素应可见还是隐藏

visiblity: hidden; 元素隐藏

visiblity: visible; 元素可视

visiblity隐藏元素后，继续占有原来的位置。

overflow溢出显示隐藏： 指定了如果内容溢出一个元素的框时，会发生什么。

overflow: visible; 不剪切内容，也不添加滚动条（默认值）

overflow: hidden; 不显示溢出部分内容，溢出部分隐藏

overflow: scroll; 不管内容是否溢出，总是显示滚动条

overflow: auto; 超出时自动显示滚动条，不超出则不显示

若盒子有定位，谨慎使用overflow: hidden，会隐藏多余部分。

8.字体属性

用于定义字体系列，大小，粗细，样式

font-family属性：定义字体系列

font-size属性：定义字体大小，常用单位px（像素）

font-weight属性：定义字体粗细，不跟单位。

常见属性值：normal 正常，相当于400

​ bold 粗体，相当于700

​ bolder 特粗体

​ lighter 细体

font-style属性：定义文本风格（样式）

字体复合属性：简写方式，即font属性。

​ 语法：font: font-style font-weight font-size/line-height font-family

注：font-size和font-family必须写，其余属性可省略。

9.文本属性

用于定义文本的外观、颜色、对齐方式、缩进方式、行间距、装饰文本

9.1文本属性

color属性：用于定义文本颜色

text-align属性：用于定义元素内文本的水平对齐方式

属性值：left 左对齐（默认）、right 右对齐、center居中对齐

text-decoration属性：规定添加到文本的装饰（下划线、删除线、上划线）

属性值：none 无装饰（默认）

​ underline 下划线

​ line-through 删除线

​ overline 上划线

text-indent属性：用于指定第一行的缩进，常用于首段缩进

注：em是一个相对单位，是相对于当前元素字体大小而言的，1em等于1个字体大小

line-height属性：用于定义行间距（行高） 单位px

注：行间距 = 上间距 + 文本高度 + 下间距

拓：设置单行文本垂直居中对齐：

将line-height与盒子高度height的值设置为相同数值。若行高大于盒子高度，文字偏下；否则，文字偏上。

text-shadow属性：用于给文本添加阴影

语法：text-shadow: h-shadow v-shadow blur color;

属性值：h-shadow：必须，水平阴影位置（正值右，负值左）

​ v-shadow ：必须，垂直阴影位置（正值下，负值上）

​ blur：可选，模糊距离（数值越大越模糊）

​ color：可选，阴影颜色，常用半透明效果

9.2vertical-align属性

使用场景：用于设置图片或者表单（行内块元素）和文字的垂直对齐方式

​ 注：只针对于行内元素或行内块元素

属性值：baseline 默认值，元素放置在父元素的基线上。（基线对齐）

​ top 把元素的顶部与行中最高元素的顶部对齐。（顶端对齐）

​ middle 把元素放在父元素的中部。（中部对齐）

​ bottom 把元素的底部与行中最高元素的底部对齐。（底端对齐）

图片底部默认空白缝隙问题：行内元素默认和文字的基线对齐。

解决方法：

1. 给图片添加vertical-align属性（提倡使用）
2. 将图片转换为块级元素

9.3溢出文字省略号

1. 单行文本溢出省略号：

white-space:nowrap;//强制一行文本显示
overflown:hidden;//隐藏超出部分
text-overflow:ellipsis;//超出文字用省略号显示

1. 多行文本溢出省略号：

overflown:hidden;//隐藏超出部分
text-overflow:ellipsis;//超出文字用省略号显示
display:-webkit-box;//将盒子转换为弹性伸缩盒子
-webkit-line-clamp:2;//限制一个块元素显示的文本行数
-webkit-box-orient:vertical;//设置或检索伸缩盒子对象子元素的排列方式
//最后记住更改盒子高度，使省略号出现即可

10.背景 background

用于给页面元素添加背景样式（背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定）

background-color属性：定义背景颜色，默认值为transparent（透明）

background-image属性：开发中常用于logo或一些装饰性的图片或超大背景图片

​ 属性值：url(背景图片地址)

background-repeat属性：在html页面上对背景图像平铺

​ 属性值：repeat：在横向和纵向进行平铺（默认值）

​ no-repeat：无平铺效果

​ repeat-x：在横向进行平铺

​ repeat-y：在纵向进行平铺

background-position属性：用于指定图像的位置

​ 语法：background-position：x y;

注：x和y可以使用方位名词或精确单位（单位px）。

方位名词：top、center、bottom、left、right

background-attachment属性：设置图像是否固定或随页面其余部分滚动

​ 属性值：scroll：图像随着对象内容滚动

​ fixed：图像固定

背景复合写法：background: 颜色 图片 平铺 固定 位置

背景颜色半透明： 语法：background：rgba(数值，数值，数值，数值)

注：前三个参数的取值是0_{255，最后一个参数的取值为0}1表示透明度

11.盒子模型

组成：边框（border）、外边距（margin）、内边距（padding）、实际内容（content）

11.1边框border

设置元素的边框，由三部分组成：粗细、样式、颜色

属性：border-width：边框粗细

​ border-style：样式，实线（solid）、虚线（dashed）、点线（dotted）

​ border-color：颜色，transparent（透明色）

属性复合写法：border：width style color

边框分开写法：border-top/bottom/right/left

border-collapse: collapse; 表示相邻边框合并在一起。

11.2内边距padding

设置边框与内容之间的距离 padding-top/bottom/right/left

复合写法：padding：数值; 表示上下左右内边距均为同一个数值

​ padding：数值1 数值2；表示上下内边距为数值1，左右内边距为数值2

​ padding：数值1 数值2 数值3；表示上内边距为数值1，左右内边距为数值2，下内边距为数值3

​ padding：数值1 数值2 数值3 数值4；表示上、右、下、左依次的内边距

注：padding常用于设置与文字之间的距离，是页面更加整洁美观。

如果盒子本身没有指定width/height属性，此时padding不会撑开盒子。

11.3外边距margin

控制盒子与盒子之间的距离。

复合写法：margin：数值; 表示上下左右外边距均为同一个数值

​ margin：数值1 数值2；表示上下外边距为数值1，左右外边距为数值2

​ margin：数值1 数值2 数值3；表示上外边距为数值1，左右外边距为数值2，下外边距为数值3

​ margin：数值1 数值2 数值3 数值4；表示上、右、下、左依次的内边距

注：

• 元素水平居中对齐的方法：

块级元素水平居中对齐：①盒子必须指定宽度

​ ②盒子左右外边距设为auto

​ 常见写法：margin：0 auto；

行内元素或行内块元素水平居中对齐：给其父元素添加text-align：center

• 相邻块级元素垂直外边距合并：

当上下相邻的两个块级元素相遇时，若上面的元素有margin-bottom，且下面的元素有margin-top，他们之间的垂直间距为两者之间较大者。

解决方法：尽量只给一个设置margin值。

• 嵌套块级元素垂直外边距的塌陷：

对于两个嵌套关系（父子元素）的块级元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大者的外边距。

解决方法：①为父元素定义上边框

​ ②为父元素定义内边距

​ ③为父元素添加overflow: hidden;

• 清除内外边距：

* {
	padding: 0;
	margin:0;
}

• 去掉li标签前的小圆点：list-style: none;

11.4圆角边框 border-radius

用于设置外边框圆角，属性值可以是数值或百分数

圆形的做法：正方形的高度或宽度的一半设置为属性值；

圆角矩形的做法：将属性值设置为高度的一半。

11.5盒子阴影

box-shadow属性：用于给文本添加阴影

语法：box-shadow: h-shadow v-shadow blur spreed color inset;

属性值：h-shadow：必须，水平阴影位置（正值右，负值左）

​ v-shadow ：必须，垂直阴影位置（正值下，负值上）

​ blur：可选，模糊距离（数值越大越模糊）

​ spreed：可选，阴影尺寸（影子大小）

​ color：可选，阴影颜色，常用半透明效

​ inset：可选，将外阴影outset改为内阴影inset，默认值outset

注：阴影不占空间不影响其他盒子排列

12.浮动 float

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框边缘。

属性值： none 元素不浮动（默认值）

​ left 元素向左浮动

​ right 元素向右浮动

特性：①浮动元素会脱离标准流（脱标）

​ ②浮动元素会一行内显示并且元素顶部对齐

​ ③浮动元素会具有行内块元素的特性

注：

1. 浮动元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行显示。
2. 如果块级盒子没有设置宽度，默认宽度和父级一样，但添加浮动后，他的大小根据内容决定。
3. 若行内元素有了浮动，则不需要转换块级元素/行内块元素就可以直接设置高度宽度。
4. 浮动的盒子只会影响后面的标准流，不会影响前面的盒子。

• 清除浮动

清除浮动的原因：由于父盒子多数情况下不方便给高度，但盒子浮动又不占有位置，最后父盒子高度为0，影响下面标准流盒子。

清除浮动的本质：清除浮动元素造成影响，清除浮动后，父级会根据浮动的盒子自动检测高度。父级有了高度，就不会影响下面的标准流。

clear属性：清除

​ 属性值：left/right：不允许左/右侧有浮动元素

​ both：同时清除左右两边浮动的影响

清除浮动的方法：

①额外标签法

在浮动元素末尾添加一个空的标签，且新增标签必须为块级元素，并且需要在这个标签添加清除浮动样式。

②父级添加overflow属性

③父级添加after为元素

.clearfixL::after {
	content:'';
	display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {
    *zoom: 1;
}

④父级添加双伪元素

.clearfix::before, .clearfix::after {
	content:'';
	display:table;
}
.clearfix::after {
	clear: both;
}
.clearfix {
	*zoom:1;
}

13.定位 position

定位是让一个盒子自由的在某个盒子内移动位置或固定在屏幕中的某个位置，并且可以压住其他盒子。

定位 = 定位模式 + 边偏移

定位模式：用于指定一个元素在文档中的定位方式，由position属性确定。

定位模式（position）	含义
static	静态定位，无边偏移，按标准流特性摆放，默认值
relative	相对定位，不脱标，相对于自身位置移动
absolute	绝对定位，脱标，相对于带有定位的父级
fixed	固定定位，相对于浏览器可视区

边偏移：决定该元素的最终位置。由top、bottom、right、left属性确定，单位px。

边偏移	含义
top	该元素相对于其父元素上边线距离
bottom	该元素相对于其父元素下边线距离
left	该元素相对于其父元素左边线距离
right	该元素相对于其父元素右边线距离

默认为top和left两个属性。

13.1相对定位 relative（自恋型）

元素在移动位置时，相对于它原来位置来说的。

特点：①它是相对于自己原来的位置来移动的。

​ ②原来的标准流的位置继续占有，后面的盒子仍以标准流方式对待它。（不脱标）

13.2绝对定位 absolute（拼爹型）

元素在移动位置时，相对于它最近一级带有定位的祖先元素来说的。

特点：①如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。

​ ②如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位的祖先元素为参考点移动位置。

​ ③绝对定位不再占有原来的位置（脱标）

13.3固定定位 fixed

元素固定于浏览器可视区的位置。

特点：①以浏览器的可视窗口为参考点移动元素。与父元素无关，不随滚动条滚动。

​ ②固定定位不在占有原来的位置。

13.4粘性定位 sticky

相对定位与固定定位的混合。

特点：①以浏览器的可视窗口为参照点移动元素。

​ ②粘性定位占有原来的位置。（不脱标）

​ ③必须添加边偏移。

注：绝对定位和固定定位和浮动类似，但不会触发外边距合并。

1. 行内元素添加绝对定位或固定定位，可以直接设置高、宽。
2. 块级元素添加绝对定位或固定定位，如果不给宽高，默认大小是内容的大小。
3. 不同于浮动，绝对定位或固定定位会完全压住盒子（包括里面的内容）；而浮动只会压住它下面标准流的盒子，但不会压住下面标准流盒子里的文字。

• 子绝父相 ：子级元素是绝对定位，父级元素要有相对定位

原理：①子级绝对定位不会占有位置，可以放到父盒子里的任何一个位置，不影响其他兄弟盒子。

​ ②父级盒子需要添加定位限制子盒子在父盒子内显示。

​ ③父盒子在布局时，需要占有位置，因此父元素只能是相对定位。

• 将盒子固定在版心右侧位置：

方法：①让固定定位的盒子left: 50% 走到浏览器可视区的一半。

​ ②让固定定位的盒子margin-left: 版心宽度一半的距离。

• 定位叠放次序（z-index）：控制盒子的前后次序

注：①数值越大，盒子约靠上，默认值auto。

​ ②如股票属性值相同，则按书写顺序，不需要跟单位。

​ ③只有定位的盒子才有z-index。

• 绝对定位的盒子居中

方法：①left: 50% 让盒子的左侧移致父元素的水平中心位置

​ ②margin-left: -盒子宽度的一半（是一个负数）

14.精灵图sprites

目的：为有效地减少服务器接收和发送请求的次数，提高页面加载速度

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器就只需要一次请求即可。

使用方法：

background-image、background-repeat、background-position属性进行背景定位，

其中最关键的是使用background-position 属性精确地定位。

注：网页中的坐标：x轴往右走为正，左走为负；y轴往下走为正，往上走为负。

15.字体图标iconfont

使用场景：用于显示网页中通用、常用的一些小图标。（展示的是图标，本质属于字体）

使用方法：

1. 字体图标下载。常用网站：阿里字体：http://www.iconfont.cn/
2. 字体图标引入（引入到HTML页面）
   1. 将下载包中的fonts文件夹放入页面根目录下
   2. 在css样式中全局声明字体（在下载包的style.css中）
   3. HTML标签内添加小图标
   4. 给HTML标签定义字体（这个字体必须和@font-face中一致）
3. 字体图标追加（以后添加新的小图标）

16.CSS三角

div {
	width: 0;
	height: 0;//宽高必须设置为0
	line-height: 0;
	font-size: 0;//为兼容低版本浏览器
	border: 50px solid transparent;//边框越粗，三角越大
	border-bottom-color: pink;
}

17.网页布局准则

1. 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
2. 先设置盒子大小，再设置盒子位置。

18.CSS用户界面样式

18.1鼠标样式 cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	含义
default	默认，三角形箭头
pointer	小手，点击的手势
move	移动，十字架形状
text	文本，变成一个“I”
not-allowed	禁止

18.2轮廓线 outline

给表单添加outline: 0或outline: none样式，就可以去掉默认的蓝色边框。

18.3防止文本域拖拽 resize

resize: none设置防止拖拽

如果觉得对你有帮助的话，点个赞呗~

如需转载，请注明出处Hoki802