前言:
现在大家对“css头文件”大致比较关切,我们都需要了解一些“css头文件”的相关文章。那么小编在网上网罗了一些关于“css头文件””的相关知识,希望看官们能喜欢,朋友们快快来了解一下吧!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全栈相关的经验和知识从入门到精通逐一总结出来