精通CSS样式和属性:Web前端入门到进阶指南

发表时间: 2022-05-25 21:40

Web前端入门到精通必会的CSS样式和属性,昨天更新了Web前端入门到精通必学的标签及属性大全,得到了很多同学的认可,有同学想要看接下来CSS以及JS的相关基础内容,今天他来了!

抽时间为大家总结了实际开发中必会的CSS、CSS3样式和属性(常用和不常用的内容都有标注),做成了网页版,以便于查询使用,对于初学者来说可以少走弯路,明确重点,时间诚可贵呀️!

盒模型

盒模型:width,height,padding,margin,box-sizing,display,visibility

单词

描述

width

设置元素的宽度

height

设置元素的高度

padding-top

设置元素上内边距

padding-right

设置元素右内边距

padding-bottom

设置元素内边距

padding-left

设置元素左内边距

padding

设置元素四个方向的内边距

margin-top

设置盒子与上方盒子的距离

margin-right

设置盒子与右方盒子的距离

margin-bottom

设置盒子与下方盒子的距离

margin-left

设置盒子与左方盒子的距离

margin

设置在上、右、下和左四个方向的外边距

box-sizing

规定计算一个元素实际宽高的方式

display

设置元素表现的类型,例如: display:block;设置元素表现为块元素

visibility

设置元素是否是可见的

常用文本样式属性

常用文本样式属性:color,font-size,font-weight,font-style,text-decoration

单词

描述

color

规定字体的颜色,也称为前景色

font-size

设置字体大小

font-weight

设置字体粗细

font-style

设置字体样式

text-decoration

设置添加到文本的装饰线

字体属性

字体属性:font-family,@font-face

单词

描述

ont-family

设置元素的字体

@font-face

定义字体,例如:阿里巴巴普惠体

段落和行相关属性

段落和行相关属性:text-indent,line-height,text-align,font

单词

描述

text-indent

设置首行文本的缩进

line-height

设置文本行间的距离(行高)

text-align

设置文本对齐方式

font

设置所有字体属性

CSS的书写位置

css的书写位置:style,link,@import

单词

描述

style

1、内嵌式,书写在head标签对中,使用<style></style>标签对,里面书写css样式。例如:

<head>

<style type="text/css">

h1 {color:red;}

p {color:blue;}

</style>

</head>

2、行内式,直接在标签上书写style属性设置css样式。这种方式不常用,了解即可

示例:<h1 style="color:blue;text-align:center">这是一个标题</h1>

link

链接外部样式文件,例如:

<head>

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

</head>

@import

导入样式规则 (不常用,了解即可)

例如:@import url('css文件')

层叠性和选择权重

层叠性和选择权重:!important

单词

描述

!important

提升权重(不常用,了解即可)

伪元素

伪元素:::before,::after,::selection,::first-letter,::first-line

单词

描述

::before

作为匹配选中元素的第一个子元素,必须设置content属性

::after

作为匹配选中元素的最后一个子元素,必须设置content属性

::selection

设置文档中被用户高亮的部分,即使用鼠标圈选的部分(不常用,了解即可)

::first-letter

选择块元素中的第一个字母设置样式(不常用,了解即可)

::first-line

选择块元素中的第一行全部文字设置样式(不常用,了解即可)

伪类

伪类::link,:visited,:active,:hover

单词

描述

:link

选择所有未被访问的超级链接

:visited

选择所有访问过的超级链接

:active

选择被用户激活的元素

:hover

选择鼠标悬停的元素

css3新增伪类

css3新增伪类::empty,:focus,:enabled,:disabled,:checked,:root (不常用,了解即可)

单词

描述

:empty

选择没有任何子级的元素

:focus

选择当前获得焦点的元素

:enabled

选择已启用的元素

:disabled

选择禁用的元素

:checked

选择选中的输入元素(仅适用于单选按钮或复选框)

:root

选择根元素,即标签

标签选择器和id选择器

标签选择器和id选择器 :element、#id

单词

描述

element

标签选择器,直接使用元素的标签名,表示选择指定元素名称的所有元素

示例:p{color:red;}选择所有的p标签

#id

id选择器,使用井号#作为前缀,表示选择指定id的元素

示例:#firstname{color:yellow;} 选择id=firstname" 的元素

class 选择器

class 选择器:.class

单词

描述

.class

class选择器,使用点.作为前缀, 表示选择指定类名的元素

p示例:.intro{color:red;} 选择class="intro" 的元素

复合选择器

复合选择器:后代,交集,并集

单词

描述

element1 element2

后代选择器,使用空格分隔两个元素

示例:.box p{} 表示选择类名为box的标签的后代元素p标签

element1.class

交集选择器

示例:h3.spec{} 表示选择有.spec类的<h3>标签

element1,element2

并集选择器,也叫分组选择器,使用逗号隔开

示例:ul, ol{} 表示同时选择<ul>标签和<ol>标签

元素关系选择器

元素关系选择器:子选择器,相邻兄弟,通用兄弟选择器

单词

描述

element>element

子选择器,使用 > 符号分隔两个元素

示例: div > p {} 选择<div>下的所有子级<p>元素

element+element

相邻兄弟选择器,使用 + 分隔两个元素

示例:div + p {}选择所有紧接着 <div> 元素之后的第一个<p>元素

element1~element2

通用兄弟选择器,使用 ~ 分隔两个元素

示例:p~ul {}选择同一父元素下的 p 元素之后的每一个 ul 元素

序号选择器

序号选择器::first-child,:last-child,:nth相关

单词

描述

:first-child

匹配其父元素中的第一个子元素

示例:p:first-child{}匹配<p>的父元素的第一个<p>元素

:last-child

匹配父元素中最后一个子元素

示例:p:last-child{}匹配<p>的父元素下最后一个<p>元素

:nth-child(n)

匹配父元素中的第 n 个子元素

示例:p:nth-child(2)匹配<p>的父元素中第2个子元素<p>标签

:nth-of-type(n)

匹配同类型中的第n个同级兄弟元素 (不常用,了解即可)

示例:p:nth-of-type(2){}指定每个<p>元素匹配同类型中的第2个同级兄弟元素

:nth-last-child(n)

匹配属于其父元素的第n个子元素的所有元素,从最后一个子元素开始计数 (不常用,了解即可)

示例:p:nth-last-child(2){}指定每个<p>元素匹配同类型中的倒数第2个同级兄弟元素

:nth-last-of-type(n)

匹配同类型中的倒数第n个同级兄弟元素,从最后一个子元素开始计数(不常用,了解即可)

示例:p:nth-last-of-type(2){}指定每个<p>元素匹配同类型中的倒数第2个同级兄弟元素

属性选择器

属性选择器:[attribute]、[attribute=value]、[attribute^=value]、[attribute$=value]、[attribute*=value] 、[attribute~=value] 、[attribute|=value] (不常用,了解即可)

单词

描述

[attribute]

选择指定属性的元素

[attribute=value]

选择指定了属性和值的元素

[attribute^=value]

选择属性值带指定的值开始的元素

[attribute$=value]

选择属性值带指定的值结尾的元素

[attribute*=value]

选择元素属性值包含指定值的元素

[attribute~=value]

选择属性值包含一个指定单词的元素

[attribute|=value]

选择属性值以指定值开头的元素


浮动

浮动:float,BFC,overflow,clear

单词

描述

float

设置元素浮动

BFC

块级格式化上下文,它是页面上一个独立的容器

overflow

溢出隐藏:溢出盒子边框的内容会被隐藏,也可以让盒子形成BFC(块级格式上下文)

clear

清除元素的浮动

定位

定位:position,relative,top,bottom,left,right,absolute,z-index,fixed

单词

描述

position

规定元素的定位类型

relative

定义相对定位

top

设置定位元素距离顶部的距离

bottom

设置定位元素距离底部的距离

left

设置定位元素距离左侧的距离

right

设置定位元素距离右侧的距离

absolute

定义绝对定位

z-index

设置定位元素的堆叠顺序,数值大的会盖住数值小的

fixed

定义绝对定位

鼠标样式

鼠标样式:cursor

单词

描述

cursor

设置光标的形状

边框

边框:border相关,属性(solid,dashed,dotted)

单词

描述

border-width

设置边框的宽度

border-style

设置边框线的形状

border-color

设置边框的颜色

border-top-width

设置上边框宽度

border-right-width

设置右边框宽度

border-bottom-width

设置下边框宽度

border-left-width

设置左边框宽度

border-top-style

设置上边框样式

border-right-style

设置右边框样式

border-bottom-style

设置下边框样式

border-left-style

设置左边框样式

border-top-color

设置上边框颜色

border-right-color

设置右边框颜色

border-bottom-color

设置下边框颜色

border-left-color

设置左边框颜色

border-top

上方向边框样式的复合写法

border-bottom

下方向边框样式的复合写法

border-right

右方向边框样式的复合写法

border-left

左方向边框样式的复合写法

border

边框的复合写法,设置所有的边框属性

solid

定义实线边框

dashed

定义虚线边框

dotted

定义点状线边框

圆角

圆角:border-radius

单词

描述

border-top-left-radius

设置左上方的圆角

border-top-right-radius

设置右上方的圆角

border-bottom-left-radius

设置左下方的圆角

border-bottom-right-radius

设置右下方的圆角

border-radius

设置圆角的复合写法

盒子阴影

盒子阴影:box-shadow

单词

描述

box-shadow

给元素添加阴影效果

背景:background相关

单词

描述

background-color

设置背景颜色

background-image

设置盒子的背景图片

设置线性渐变背景

设置径向渐变背景

background-repeat

设置背景图像是否重复

background-size

设置背景图片大小

background-clip

设置背景的绘制区域(不常用,了解即可)

background-origin

设置背景图片显示区域的位置(不常用,了解即可)

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动(不常用,了解即可)

background-position

设置背景图像的位置

background

设置背景样式的复合写法

浏览器前缀

浏览器前缀:-webkit-,-moz-,-ms-,-o-

单词

描述

-webkit-

谷歌浏览器的私有前缀

-moz-

火狐浏览器的私有前缀

-ms-

IE、Edge浏览器的私有前缀

-o-

欧朋浏览器的私有前缀

2D/3D转换

2D/3D转换:transform,transform

单词

描述

transform

对元素进行旋转、缩放、移动或倾斜

transform-origin

设置元素变换的原点 (不常用,了解即可)

scale

设置缩放变形(不常用,了解即可)

skew

设置斜切变形(不常用,了解即可)

translate

设置位移变形

perspective

设置透视强度,即“人眼到舞台的距离”

还需要总结什么 ?需要的同学留言,做我的粉丝我会宠你 接下来我会抽时间把这15年的Web全栈相关的经验和知识从入门到精通逐一总结出来