前端开发学习路线-CSS快速掌握

2020-05-20

CSS快速掌握

1、CSS简介

css（cascading style sheets的缩写）翻译为“层叠样式表”或者“级联样式表”，简称样式表。

2、CSS的主要作用

它是用来给HTML网页来设置外观或者样式的，包括文字的大小、颜色、字体，网页的背景色、背景图片等。

3、CSS书写规则

css代码是由选择器和一对括号组成的
大括号里面是由一条一条的声明语句组成
每一条语句都要使用英文状态下的分号
每一条语句是由“属性：值”组成
CSS中的属性值一般不加引号
在CSS中如果属性值为数值型数据的时候，一般情况下需要加单位（px）
在CSS中不能出现HTML标签

4、CSS代码的书写方式

书写方式分为三种：嵌入式、外链式、行内式。

嵌入式

将css代码键入到HTML文件中，通过<style>标签将css代码嵌入到网页中。
一般只将它放到<head>标签里。

外链式

单独为写一个以.css为扩展名的文件。在<head>标签中使用<link />标签引入

行内式

将CSS代码书写在HTML标签的style属性中。
语法格式：
<标签名 style=”属性:值; 属性:值;”></标签名>

5、注释

格式：
/* 注释内容 */

6、基本选择器

选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式。

选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器。

选择器	格式	含义	举例
通用选择器	*{属性:值;}	通用选择器，将匹配HTML所有标签。不建议使用，IE6不支持，给大型网站增加负担	*{margin:0px;}
标签选择器	标签名{属性:值；}	标签选择器，匹配对应的HTML标签。	p{font-size:14px;}
类选择器	.class属性值{属性:值;}	类选择器，给拥有指定的class属性值得元素设置样式	.box{width:800px;}
id选择器	#id属性值{属性:值;}	id选择器可以为标有特定ID的HTML元素指定特定的样式，只能使用一次。ID选择器以“#”来定义。	#title{font-size:14px;}

7、尺寸样式属性

属性	值	含义
height	auto: 自动，浏览器会自动计算高度。length：使用px定义高度。 %：基于包含它的块级对象的百分比高度。	设置元素的高度
width	同上	设置元素的宽度

8、文本与字体属性

属性名	值	含义
color	#ff0000 或 red 或 rgb(3,5,8)	给文本设置颜色
text-align	left(居左)、right(居右)、center(居中)	设置文本的水平对齐方向
text-decoration	none(去掉文本修饰线)、underline(下划线)、overline(上划线)、line-through(删除线)	设置文本的修饰线
text-transform	capitalize、uppercase、lowercase	大小写转换或者首字母大写
line-height	固定值或百分比	设置行高
text-indent	px 或者 em	设置首行缩进允许负值
letter-spacing	px	设置字符间距
word-spacing	px	设置单词间距

9、字体属性

属性名	值	功能
font-style	normal(正常)、italic(斜体)	设置文本为倾斜
font-weight	normal(正常)、bold	设置文字粗细
font-size	如12px、14px 记得加单位	给文本设置大小
font-family	微软雅黑、楷体、宋体……	给文本设置字体
font	举例：font: italic bold 12px “微软雅黑”	简写属性能够同时给文本设置斜体、加粗、大小、字体每一个值之间需要使用空格并且一定要有顺序。

10、复合元素选择器

选择器	含义
选择器1，选择器2{属性:值;}多元素选择器	多元素选择器，同时匹配选择器1和选择器2，多个选择器之间用逗号分隔	p,h1,h2{margin:0px;}
`E F`{属性:值;}后代元素选择器	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔	#slidebar p{font-color:#990000;}
E>F{属性:值;}子元素选择器	子元素选择器，匹配所有E元素的子元素F(只匹配一级 )	div > p{color:#990000;}
E + F{属性:值;}相邻元素选择器	相邻元素选择器，匹配所有紧随E元素之后的同级元素F	div+div{color:#990000;}

11、列表样式属性

列表包括：无序列表和有序列表。

在整个网页里无序列表使用的是最多的。

属性	值	含义
list-style-type	none(将列表前面的项目符号去掉),disc(实心圆)，square(实心小方块),circle(空心圆)	设置列表前项目符号的类型。
list-style-position	inside(在里面),outside(在外面)	设置列表项标记的放置位置
list-style-image	url(图像路径)
list-style	square inside url(arrow.gif)	在一个声明中设置所有列表属性

12、伪类选择器

什么是伪类选择器？

伪类选择器是用来给超级链接的不同状态来设置样式。

选择器	含义
`:link`	向未被访问的链接添加样式
`:visited`	向已被访问的链接添加样式
`:hover`	当鼠标悬浮在元素上方时，向元素添加样式
`:active`	鼠标放在元素上面时，点击的一瞬间

13、对超级链接的美化

我们通常会去掉超级链接的下划线，然后同时给超级链接设置一个颜色

一般情况下：

正常状态与访问过后的状态样式设置为一样

当鼠标放上的时候给其设置另外一个颜色激活状态一般不会设置因为激活状态的时间太短

举例：

1
2
3

a:link,a:visited {去掉超级链接的下划线;设置一个颜色;}

a:hover {设置另外一个颜色;增加一张下划线;}

/*对超级链接进行美化*/
/*正常状态与访问过后的状态*/
a:link,a:visited{    
		text-decoration: none;  color: #444;
}
/*鼠标放上状态*/
a:hover{
		color: #f00;
		text-decoration: underline;
}

14、属性选择器

什么是属性选择器？

属性选择器它是与标签的属性名和属性值有关系。

属性选择器是通过标签的属性名和属性值来匹配元素。

attr是英文“attribute”的简写，中文意思“属性” 属性名

val是英文单词“value”的简写，中文意思是‘’值‘ 属性值

选择器
[attr]	匹配所有具有attr属性的元素，不考虑它的值	`h1[align]{......}` `input[type][size]{......}`
[attr = “val”]	匹配所有attr属性值等于val的元素	h1[align=”center”]{……}属性值一般加引号
[attr^ = “val”]	匹配元素中attr属性以指定值开头的所有元素	font[color^=”#ff”]
[attr$= “val”]	匹配元素中attr属性以指定值结尾的所有元素	font[color$=”00”]
[attr* = “val”]	匹配元素中attr属性中包含指定值的所有元素	font[color*=”00”]

15、继承性

特点：

1、外层元素身上的样式会被内层元素所继承。

2、如果内层元素与外层元素身上的样式相同时，外层元素的样式会被内层元素所覆盖。

3、并不是所有样式都能够被继承。只有文本与字体样式属性能够被继承。其他样式属性都不可以被继承。

注意：在实际工作中，我会给body标签设置字体大小及字体颜色。因为body是最外层的元素，内层的元素会继承外层的元素样式。

16、优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器

一般而言，选择器指向的越准确，优先级就会越高。通常我们会用1来表示标签选择器的优先级，用10来表示类选择器的优先级，用100来表示ID选择器的优先级，用1000来表示行内样式。

标签选择器 1

类选择器 10

ID选择器 100

行内样式 1000

值越大表示其优先级越高。

不管是单个选择器还是多个选择器组合他们之间的优先级都可以通过上面这个公式来进行计算。我们将其值称之为权重值。权重值越大就表示其优先级越高。

例子：
/*类选择器*/
.d{
	color: #00f;
}
/*标签选择器*/
div{
	color: #f00;
}
/*ID选择器*/
dd{
	color: #0f0;
}



<body>
	<div class="d" id="dd" style="color:skyblue;">
	<h2>无聊才读书</h2>
	<p> 个人网站</P>
	</div>
</body>

17、`!important`属性

important 在英文中的含义是“重要的”意思

!important在css中的作用：主要是用来提升属性的权重。其属性的权重值无穷大。

语法格式：属性：值 !important;

18、背景样式属性

属性	值	含义
background-color	#ff0000、red、rgb(255,0,0)	背景颜色
background-image	url(图像路径和名称);	背景图像
background-repeat	repeat、repeat-x、repeat-y、no-repeat	背景图像是否重复
background-position	center center或x% y%或xpos ypos	背景图像起始位置
background-attachment	scroll(滚动)、fixed(固定)	设置背景图像是否固定或者随着页面的其余部分滚动
background	url(1.jpg) no-repeat center center fixed	设置背景的简写形式

background-color：用于给元素设置背景颜色但是前提这个元素要么有内容，要么有宽度和高度才可以。
background-image 用于给元素设置背景图片图片的地址一定放在url（图片的地址）但是前提这个元素要么有内容，要么有宽度和高度才可以背景图片默认是平铺的
background-repeat 是用于设置0背景图片是否平铺 repeat（是平铺）、repeat-x（水平方向平铺）、repeat-y（垂直方向平铺）、 no-repeat（不平铺）
background-position 用于设置背景图片的位置如果要设置背景图片的位置这个属性就会有两个值
background-position：水平位置垂直位置

这个两个位置的表示方式有三种：英文单词固定值百分比这三种方式可以混合使用。

1.英文单词的表示方式

水平位置：left（居左）、center（居中）、right（居右）

垂直位置：top（居上）、center（居中）、bottom（居下）

2.固定值得表示方式

3.百分比的表示方式
background：简写属性它可以同时设置多个样式比如背景颜色、背景图片、背景图片是否平铺水平位置垂直位置
background：简写属性其值得个数不定顺序也不定每一个值之前使用空格分隔

19、标准文档流

HTML网页在制作的时候，都遵循一个“流”的规则：从左至右、从上到下

1）空白折叠现象

2）高矮不齐，底部对齐

20、浮动

浮动可以让元素脱离标准文档流，就可以实现让多个元素排在同一行，并且可以设置宽高。

浮动它通过一个浮动属性来实现

float：这个属性有两个值 left（向左浮动）向左移动、right（向右浮动）向右移动

浮动元素的特色：

浮动元素它脱离标准文档流，不在占用空间了
我们可以把浮动元素理解为“漂”
浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住
浮动元素它会向左或者向右进行浮动（移动）
浮动元素它遇到了父元素的边框然后就停止了浮动
浮动元素它还会遇到上一个浮动元素后就停止了浮动
浮动元素浮动以后其父元素不会再包裹着浮动元素
我们将行内元素进行浮动以后那么这个行内元素它会变成块级元素

21、清楚浮动

注意：只要有浮动那么必须有清除浮动

为什么清除浮动？

因为经过浮动了元素它会影响到它下面的元素的排版布局还有浮动元素的父元素没有将浮动元素包裹着

只要清除了浮动不会影响到浮动元素的下面进行排版布局浮动元素的父元素会将浮动元素从视觉上包裹着

清除浮动有以下三种方法：

给浮动元素的父元素设置一个固定的高度（不建议，因为一个元素的高度一般情况下不是手动设置的应该是有其自身的内容来撑高的）
使用清除浮动的样式属性 clear（clear是专用于清除浮动的这个属性有三个值 clear：left；清除左浮动 clear：right；清除右浮动 clear：both；两者都清除。这个属性一般用在最后一个浮动元素的下面在最后一个浮动元素的下面新建一个空白的div 这个div什么都不要放不要给这个div里面放置内容它只做一件事就是清除浮动）
使用overflow：hidden 这个属性来清除浮动

22、盒子模型

在css中一个盒子的组成部分：内容（content）+内填充（padding）+边框（border）+外边距（margin）

一个盒子的主要属性：width、height、padding、border、margin

width：指“宽度”的意思但是这里的宽度指的盒子里面的内容的宽度而不是盒子的宽度

height：指“高度”的意思但是这里的高度指的盒子里面的内容的高度而不是盒子的高度

padding：是“内填充”的意思，指的盒子里面的内容到盒子边框的距离

border：是“外边距”的意思指的盒子的边框

margin：是“外边框”的意思指的是盒子与盒子之间的间距

23、padding

padding是“内填充”的意思指的是盒子中间的内容到边框的这一段距离

padding 是有四个方向的，描述这些方向的方法有两种：第一种我们称之为小属性，第二种我们称之为简写属性

padding-top: 上内填充

padding-right：右内填充

padding-bottom：下内填充

padding-left：左内填充

简写属性是有顺序的，按照顺时针（上右下左）这个顺序。

24、margin

margin 它表示“外边距”的意思它是指盒子与盒子之间的距离

margin 它也有4个方向的，对方向的描述方法也有两种：第一种是小属性，第二种我们称之为简写属性.

小属性：

margin-top：上外边距

margin-right：有外边距

margin-bottom：下外边距

margin-left：左外边距

简写属性：

margin：简写属性它是有方向的这里的方向是一个顺时针的方向他的方向顺序是：上、右、下、左。

margin：10px；表示上右下左这四个方的外边都是10px

margin：10px 20px；表示上下两个方向的外边距为10px，左右外边距为20px

margin：10px 20px 30px；表示上边距为10px，左右外边距为20px，下边距为30px。

margin：10px 20px 30px 40px；表示上边距为10像素，右边距为20像素，下边距为30像素，左边距为40像素

25、margin塌陷现象

什么是margin的塌陷现象：

1、在标准的文档流中 竖直方向的margin值不会叠加它会取较大的值

2、横着方向是没有margin的塌陷现象

3、浮动元素它是没有margin的塌陷现象的

26、margin居中

margin的值可以是auto 。auto表示“自动”的意思，当左外边距与右外边距的值都是auto时那么这个盒子就会水平居中。

注意：

使用margin来实现水平居中时一定要有固定的宽度（给这个盒子设置一个宽度）只有块元素可以实现水平居中，行内元素是不能实现居中的
只有标准文档流中的盒子才可以使用margin来实现水平居中
margin属性是用来实现盒子的水平居中，而不是文本的水平居中

text-align只能实现文本的对齐。
善于使用父元素的padding而不是使用子元素的margin

要解决上图的问题：有两种方法

第一种给父元素设置一个边框线

但是这个方法不常用，因为边框是用来调试代码的，很少会给一个盒子设置边框。

第二种方法：不要使用子元素的margin 而是要使用其父元素的padding。

说明：margin这个属性它本意是用于来描述兄弟与兄弟元素之间的关系，不是用于描述父子元素之间的关系的。如果是父子元素的关系，就最好使用给其父元素设置padding属性。

27、border属性

border：它是“边框”的意思
边框有三个要素: 粗细、线型、颜色

语法格式：

border : 粗细线型颜色

border：1px solid #f00;
说明：边框的颜色可以省略不写，如果不写默认是黑色，其他的两个属性不能不写。
其实边框也是有四个方法：

border-top：上边框

border-right：右边框

border-bottom:下边框

border-left: 左边框

28、display属性

display 它是“显示”的意思，他就是用来进行行内元素与块级元素之间的相互转换。将隐藏的元素显示或者是将显示的元素进行隐藏。

display 这个属性取值：inline（行内）、block（块级）、none（无）

当我们将一个行内元素的display属性的值设置为block以后，那么这个元素就会被转换为块级元素。
当我们将一个块级元素的display属性值设置为inlinek以后，那么这个元素就会被转换成行内元素。

注意：

如果说将行内元素转换为块级元素，那么这个元素它就会拥有块级元素的特点

如果说将块级元素转换为行内元素，那么这个元素它就会拥有行内元素的特点。

将一个显示的元素隐藏、将一个隐藏的元素显示。

display：none（将一个显示的元素进行隐藏）

display：block（将一个隐藏的元素显示出来）

这两个功能主要是JavaScript来使用

29、固定位置

position 在英语中表示“位置”的意思，它主要是用于实现对元素的定位

在css中定位分为三种：

position：fixed 固定定位

position：relative 相对定位

position：absolute 绝对定位

注意：在使用定位属性时，一定要配合定位的坐标来使用

left：表示定位的元素离左边多远

right：表示定位的元素离右边多远

top：表示定位的元素离上边多远

bottom：表示定位的元素离下边多远

固定定位

语法：position：fixed

固定定位,它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变。

特点：

固定定位元素它脱离了标准文档流
固定定位元素的层级比标准文档流里面的元素要高，所以固定定位元素它会压盖住标准文档流里面完的元素。
固定定位元素它不再占用空间
固定定位元素它显示的位置不会随着浏览器滚动而滚动

30、相对定位

语法：position：relative；

相对定位它是相对于“原来的自己”来进行定位。

特点：

相对定位元素它没有脱离标准文档流
相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置
相对定位元素设置了定位的坐标以后，那么它会在原来的位置留下一个坑。
相对定位元素它会将标准文档流中的元素压盖住。
相对定位元素的定位坐标值可以是负数。

注意：

相对定位元素他会在老家留下一个坑，所以一般情况下它很少单独使用，相对定位元素它主要是用来配合“绝对定位”元素来使用的。

31、绝对定位

语法：position：absolute；

什么是绝对定位？

绝对定位元素是相对于“祖先定位元素”来进行定位

什么是祖先定位元素？

绝对定位元素它会先去查其父元素是否设置了定位的属性如果有设置定位的属性，那么他就会相对于其父元素来进行定位；但是如果他的父元素没有设置定位属性那么他就会去查找其父元素的上一级元素是否设置了定位的属性；如果有设置就相对于其父元素的上一级元素进行对位。但是如果没有设置，那么会继续往向一级进行查找，如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”来进行定位！

特点：

绝对定位元素它脱离了标准文档流
绝定定位元素它不在占用空间
绝定定位元素它会压盖住标准文档流中的元素
绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位但是我们一般只会给其祖先定位元素设置相对定位属性。

“子绝父相”子元素设置绝对定位，父元素设置相对定位。

<!doctype html>
    <html>                  /*示例代码*/
        <head>
            <meta charset="UTF-8">
            <title>绝对定位</title>
            <style type="text/css">
                *{
                    margin:0;
                    padding:0;
                }
                .box{
                    width:600px;
                    border: 1px solid #000;
                    margin:100px auto;
                    /*给其设置一个相对定位*/
                    position:telative;
                }
                .box div{
                    width:100px;
                    height:100px;
                }
                .div1{
                    background-color:#f00;
                }
                .div2{
                    background-color:#0f0;
                    /*绝对定位属性*/
                    position:absolute;
                    /*设置定位的坐标*/
                    right:0px;
                    top:0px;
                }
                .div3{
                    background-color:#00f;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <div class="div1">
                </div>
                <div class="div2">
                </div>
                <div class="div3">
                </div>
            </div>
        </body>
</html>

31、z-index属性

z-index 表示谁压盖着谁，数值大的会压盖住数值小的
只有定位的元素才有z-index值，只有设置了固定定位、相对定位、绝对定位的元素他们才会拥有z-index
如果多个定位元素没有设置z-index属性或者z-index值设置一样，那么写在HTML后面的定位元素就会压盖住前面的定位元素

32、结构伪类

1）、CSS3与CSS2之间的区别

CSS3=CSS2+新语法+新的属性

就是对CSS2进行扩充删减优化

2）、结构伪类

选择器	功能
E:first-child	匹配第一个孩子
E:last-child	匹配最后一个孩子
E:nth-child（n）	匹配第n个孩子
E:nth-child（2n）	匹配偶数的孩子如：2、4、6…..
E:nth-child（even）
E:nth-child（2n+1）	匹配奇数的孩子如：1、3、5……
E:nth-child（odd）
E:only-child	匹配有且只有一个孩子

33、border-collapse

这个属性主要用来合并表格的边框线，其值为：collapse

border-collapse:collapse;

34、伪元素

选择器	功能
:first-letter	操作当前元素中第一个字
:first-line	操作当前元素中第一行
::before	在之前插入，在一个盒子内部的最前面
::after	在之后插入，在一个盒子内部的最后面

::before 要在当前元素之中插入文字必须将文字放在content中

35、文本阴影

text-shadow:水平阴影垂直阴影模糊距离阴影颜色

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0.

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅css颜色值

描述：

文字阴影可以有多组值，多组之间用逗号隔开就可以
水平阴影正值阴影在右边，负值在左边。
垂直阴影正值在下边，负值在上边。
模糊强度，值越大越模糊。

36、盒子阴影

box-shadow：水平方向阴影垂直方向阴影模糊距离阴影尺寸阴影颜色内/外阴影

水平阴影和垂直阴影必须得写，其余的是可以省略不写；

语法：

1	box-shadow:h-shadow v-shaadow blur spread color inset;

注释：box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影是由2-4个长度值。可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。

值	描述	测试
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅CSS颜色值。
inset	可选。将外部阴影（outset）改为内部阴影。

盒子阴影可以有多组值，多组之间用逗号隔开就可以。
水平阴影正值阴影在右边，负值在左边。

37、圆角矩形

语法：

border-radius：左上右上右下左下；

如果四个值都是一样的话，写一个就可以了。

38、透明度

只要有颜色都可以实现透明度。

rgba（红色、绿色、蓝色、透明度）

a：表示透明度的意思透明度取值：0~1之间 0表示完全透明 1表示不透明

背景颜色透明：

background-color：rgba（255,255,255,0.3）
文本颜色透明：

color：rgba（255,255,255,0.3)
边框颜色透明

border：1px solid rgba（255,255,255,0.5）

-------------本文结束感谢您的阅读-------------

本文作者： 无聊才读书

本文链接： https://blogs.zhaozf.site/4f88b68a/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！