前端开发之基础篇（二）CSS3层叠样式表：尺寸+背景+盒子模型+浮动+定位+过度+变换+3D转换+动画+渐变+视频教程...

于 2019-07-10 18:36:00 发布
阅读量281 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：https://my.oschina.net/u/3586285/blog/3072480
版权
本文详细介绍了CSS（层叠样式表）的基础知识，包括语法、引入方式、选择器及属性详解，涵盖尺寸、背景、文字、字体、列表、显示隐藏等各类属性，适合初学者快速掌握CSS核心概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

  • 选择器：规定CSS样式对哪些元素生效。
  • 属性：规定对HTML元素设置的样式，必须写在一对“｛｝”中。
  • 属性值：规定CSS某条属性具体的值，后面使用分号结束一条属性。

如：

p {
	text-align:center;/*文字居中*/
	font-size:20px/*字体大小为20像素*/
}

CSS 三种引入方式

  1. 外部样式表:使用link标签引入写有CSS代码的外部CSS文件
<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  1. 内部样式表：使用style标签，并在其内部直接写CSS代码
<head>
	<style>
		hr {color:sienna;} 
		p {margin-left:20px;} 
		body {background-image:url("images/back40.gif");} 
	</style> 
</head>
  1. 内联样式：使用style属性，直接在需要修改样式的标签上写CSS代码
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

CSS选择器

  1. 通用选择器（*）【范围：所有元素】
/*所有元素*/
*{
	margin:0;/*所有元素的外边距为0*/
	padding:0;/*所有元素的内边距为0*/
}
  1. 标签（元素）选择器（标签名）【范围：同类型的所有元素】
/*所有p标签*/
p{
	text-size:20px;/*字体大小为20像素*/
}
  1. ID选择器（id属性）【范围：指定id属性的一个】
/*指定id="myid"的标签*/
#myid{
	text-size:20px;/*字体大小为20像素*/
}
  1. CLASS选择器（class属性）【范围：指定相同class的所有元素】
/*所有class="myclass"的标签*/
.myclass{
	text-size:20px;/*字体大小为20像素*/
}
  1. 子元素选择器（子元素）【范围：所有满足的子元素】
/*所有满足条件的div子元素*/
.myclass div{
	text-size:20px;/*字体大小为20像素*/
}
  1. 直接子元素选择器（下一级子元素）【范围：所有满足的下一级子元素】
/*所有满足条件的下一级div子元素*/
.myclass>div{
	text-size:20px;/*字体大小为20像素*/
}
  1. 相邻兄弟元素选择器（紧挨着后面的同级元素）【范围：紧挨着后面的一个】
/*所有满足条件的紧挨着后面的一个div元素*/
.myclass+div{
	text-size:20px;/*字体大小为20像素*/
}
  1. 相邻兄弟元素选择器（紧挨着后面的同级元素）【范围：紧挨着后面的所有】
/*所有满足条件的紧挨着后面的所有div元素*/
.myclass~div{
	text-size:20px;/*字体大小为20像素*/
}
  1. 属性选择器（任意属性）【范围：带有某属性的所有元素】
/*所有带有type属性的标签*/
[type]{
	text-size:20px;/*字体大小为20像素*/
}
/*所有type=text属性的标签*/
[type=text]{
	text-size:20px;/*字体大小为20像素*/
}
/*所有type属性值中包含text单词的标签*/
[type~=text]{
	text-size:20px;/*字体大小为20像素*/
}
/*所有type属性值以text开头的标签*/
[type^=text]{
	text-size:20px;/*字体大小为20像素*/
}
/*所有type属性值以text-开头的标签*/
[type|=text]{
	text-size:20px;/*字体大小为20像素*/
}
/*所有type属性值以text结尾的标签*/
[type$=text]{
	text-size:20px;/*字体大小为20像素*/
}
  1. 伪类选择器
选择器示例示例说明
:checkedinput:checked选择所有选中的表单元素
:disabledinput:disabled选择所有禁用的表单元素
:emptyp:empty选择所有没有子元素（任何内容）的p元素
:enabledinput:enabled选择所有启用的表单元素
:first-of-typep:first-of-type选择每个父元素是p元素的第一个p子元素
:in-rangeinput:in-range选择元素值在指定min和max范围内的值
:invalidinput:invalid选择所有无效的元素
:last-childp:last-child选择所有p元素的最后一个元素
:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素
:not(selector):not(p)选择所有p以外的元素
:nth-child(n)p:nth-child(2)选择所有p元素的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素
:only-childp:only-child选择所有仅有一个子元素的p元素
:optionalinput:optional选择没有"required"的元素属性
:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性
:read-onlyinput:read-only选择只读属性的元素属性
:read-writeinput:read-write选择没有只读属性的元素属性
:requiredinput:required选择有"required"属性指定的元素属性
:rootroot选择文档的根元素
:target#news:target选择当前活动#news元素(点击URL包含锚的名字)
:validinput:valid选择所有有效值的属性
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个p 元素的第一个字母
:first-linep:first-line选择每个p 元素的第一行
:linka:link选择所有未访问链接
:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 p 元素
:beforep:before在每个p元素之前插入内容
:afterp:after在每个p元素之后插入内容
:lang(language)p:lang(it)为p元素的lang属性选择一个开始值

CSS属性

尺寸属性

属性描述
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。

背景属性

属性描述
background背景的简写background: #ffffff url('banner.jpg') no-repeat fixed center top;
background-color设置背景颜色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)）
background-image设置背景图片（url(img/logo.png)）
background-repeat设置背景图片是否重复（no-repeat、repeat）
background-attachment设置背景图片是否固定（scroll、fixed）
background-position设置背景图片的位置（left、right、top、bottom、center、%、px）
background-size（不可合并）设置背景的大小（px、%、cover、contain）

文字属性

属性描述
color设置文本颜色（纯文字）
direction设置文本方向（ltr：[left to right]；rtl）
unicode-bidi设置文本是否被重写（bidi-override）
line-height设置文本行高（像素单位px，百分比单位）
letter-spacing设置字符间距 （像素单位px，百分比单位）
word-spacing设置字（单词间的空格）间距（像素单位px，百分比单位）
white-space设置元素中空白的处理方式（pre：保留空格和换行；nowrap：不保留）
vertical-align设置元素的垂直对齐（表格、图片、内联元素）（top、middle、bottom）
text-align水平对齐元素中的文本（内联子元素）（left、right、center）
text-decoration向文本添加上、中、下划线（overline、line-through、underline、none）
text-indent缩进元素中文本的首行（像素单位px，百分比单位）
text-shadow设置文本阴影（水平偏移、垂直偏移、模糊、颜色）
text-transform控制元素中的字母（lowercase、uppercase）

字体属性

属性描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size/line-height指定文本的字体大小
font-style指定文本的字体样式（斜体：italic）
font-weight指定字体的粗细（100：不加粗；900：加粗【bold】）。
font-variant以小型大写字体或者正常字体显示文本。small-caps

列表属性

属性描述
list-style简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image将图象设置为列表项标志。（url('sqpurple.gif')）
list-style-position设置列表中列表项标志的位置。（inside、outside）
list-style-type设置列表项标志的类型。

显示隐藏属性

属性描述
display除了none之外的其他值 none
visibilityvisible、hidden

显示模式属性

属性描述
display:block显示为块级元素
display:inline显示为内联元素
display:inline-block显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

表格标题属性

属性描述
top默认值。把表格标题定位在表格之上。
bottom把表格标题定位在表格之下。
inherit规定应该从父元素继承 caption-side 属性的值

内边距属性

属性描述
padding使用缩写属性设置在一个声明中的所有填充属性
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充
padding-right设置元素的右部填充
padding-top设置元素的顶部填充

边框属性

属性描述
border简写属性，用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。
border-left简写属性，用于把左边框的所有属性设置到一个声明中。
border-right简写属性，用于把右边框的所有属性设置到一个声明中。
border-top简写属性，用于把上边框的所有属性设置到一个声明中。
border-radius1-4 、length% 、 1-4 length%;
box-shadow:h-shadow v-shadow blur spread color inset;
box-sizing:content-box、border-box、inherit

边框属性

属性描述
outline在一个声明中设置所有的轮廓属性
outline-color设置轮廓的颜色
outline-style设置轮廓的样式
outline-width设置轮廓的宽度

边框属性

属性描述
margin简写属性。在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

浮动属性

属性描述
Float使元素浮动到左边或者右边（left、right）

定位属性

属性描述
Static静态定位，默认值，就是没有定位。
Relative相对定位，相对当前元素位置
Fixed固定定位，在页面上固定的位置出现
Absolute绝对定位，相对于上级已经定位的元素的位置
z-index属性指定了一个元素的堆叠顺序

过度效果属性

属性描述
transition简写属性，用于在一个属性中设置四个过渡属性。
transition-property规定应用过渡的 CSS 属性的名称。
transition-duration定义过渡效果花费的时间。默认是 0。
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。
transition-delay规定过渡效果何时开始。默认是 0。

转换效果属性

属性描述

transform 适用于2D或3D转换的元素 transform-origin 允许您更改转化元素位置

transform属性值

属性描述
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
rotate(angle)定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。

动画属性

属性描述
@keyframes规定动画。
animation所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function规定动画的速度曲线。默认是 "ease"。
animation-delay规定动画何时开始。默认是 0。
animation-iteration-count规定动画被播放的次数。默认是 1。Infinite:无限循环
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。

HTML视频课程

配套教学视频： HTML5+CSS3+JS教程精细化前端WEB开发实战视频教学2019课件源码

全套前端企业开发教学视频： WEB大前端教程视频教学小程序+VUE+AJAX+HTML5+canvas+node.js+Angular系列完整视频教学

转载于:https://my.oschina.net/u/3586285/blog/3072480

chengyue3201
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值