Css总结
1、样式规则:选择器{属性1:属性值1; 属性1:属性值1}
选择器有:
标记选择器:
p{font-family:”微软雅黑”;}
类选择器:
<style type=”text/css”>
.ddd{font-size:20px;} //注意ddd前面有”.”这个符号
.kkk{color:red;} //类的第一个字符不能为数字,并且区分大小写
</style>
<h2 class=”ddd kkk”>内容</h2>
Id选择器:
<style type=”text/css”>
#ttt{color:red;}
</style>
<h2 id=”ttt”></h2> //不支持多个,即不能像类选择器那样,”ddd kkk”
通配符选择器:*,对所有的元素作用。
<style type=”text/css”>
*{
margin:0;//定义外边距
padding:0;//定义内边距
}
</style>
标签指定式选择器:又称交集选择器,由两个选择器构成。第一个为标记选择器,第二个为id或者class选择器。不能有空格。
<style type=”text/css”>
h2.sss{color:green;}
h2#ddd{color:red;}
</style>
<h2 class=”sss”>内容1</h2>
<h2 id=”ddd”>内容2</h2>
后代选择器:把外层标记现在前面,内层标记写在后面,中间用空格分开。
<style type=”text/css”>
h2 strong{color:green;}
</style>
<h2>不变色<strong>变色</strong>不变色</h2>
并集选择器:各个选择器通过逗号”,”连接,任何选择器都可以。
h2,h3,#ddd,.kkk{color:green;}
<h2>变色</h2>
<h3>变色</h3>
<h4 id=”ddd”>变色</h4>
<h5 class=”kkk”>变色</h5>
<p>不变色</p>
2、行内式引入css样式表,举例:
<h2 style=”font-size:20px;color:red”>内容</h2>
3、内嵌式引入css样式表
在head里面写,举例:
<style type=”text/css”>
p{
font-size:15px; //字体大小
text-decoration:underline //下划线;
}
</style>
4、链入式引入css样式表
,在head里面写,举例:
<link href=”css文件路径” type=”text/css” rel=”stylesheelt”>
5、css属性
字体样式属性:
font-size:字体大小,通常单位px
font-family:字体,可以同时指定多个,中间逗号隔开。
font-weight:字体粗细。normal(默认值),bold(粗体),bolder(更粗的字符),lighter(更细的字符)
font-style:字体风格。normal(默认值),italic(斜体),oblique(倾斜)
@ font-face:定义服务器字体。@ font-face{ font-family:字体名称;src:字体路径;}
word-wrap:实现长单词和URL地址自动换行,normal(默认值,只在允许断字点换行),break-word:在长单词或URL内部自动换行。
color:文本颜色,预定义的颜色值red等或者十六进制的#ff0011(#f01)或者Rgb格式rgb(255,0,0)或者rgb(100%,0%,0%)
letter-spacing:字间距, 即字符与字符之间的距离空白。允许有负值,默认normal。
Word-spacring:单词间距,英文单词的间距,对中文无效。
Line-height:设置行间距,即行高。
Text-transfrom:文本转换,默认不转换,capitalize(首字母大写)。Uppercase(全部字符转换为大写)。Lowercase:全部字符转换为小写。
Text-decoration:文本装饰,underline(下划线),overline(上划线),line-through(删除线)
Text-align:水平内容对齐方式,left(左对齐,默认),right(右对齐),center(居中对齐)。适合块级元素,对行内元素无效。
Text-indent:首行缩进,设置文本的,允许使用负值,建议使用em为单位。
White-space:空白符处理。默认normal(文本中空格、空行无效,满行自动换行),pre(保留文本中的空格、空行),nowrap(空格空行无效,强制文本不能换行)
Text-shadow:阴影效果。举例:text-shadow:10px 10px 10px red;//水平阴影距离,垂直阴影距离,模糊半径,阴影颜色。也可以设置两组或多种,那样可以达到叠加的效果。
Text-overflow:标示对象溢出文本。Clip(修剪,不显示省略标记…),ellipsis。
注意:要显示溢出文本效果,要同时White-space:nowrap、overflow:hidden和Text-overflow:ellipsis使用
6、css优先级
标记选择器<后代选择器<类选择器<id选择器。行内样式比其他选择器高,权重相同就近原则。多个标记选择去权重可以叠加。
7、css3属性选择器
p[id^=”one”]:表示p标签的id选择器中开头为one的就会命中。
P[id$=”mmm”]:表示p标签的id选择器中结尾为mmm的就会命中。
P[id*=”ddd”]:表示p标签的id选择器中包含为ddd的就会命中。
子代选择器(>):
兄弟选择器(+,~):
普通兄弟选择器(~):
:root选择器:
:not选择器:
:only-child选择器:父元素的唯一子元素
:first-child选择器:父元素第一个子元素
:last-child选择器:父元素最后一个子元素
:nth-child(n)选择器:父元素第n个子元素
:nth-last-child(n)选择器:父元素倒数第n个子元素
:nth-of-type(n)选择器:父元素第n个子元素,与类型无关
:nth-last-of-type(n)选择器:父元素倒数第n个子元素,与类型无关
:empty选择器:选择没有子元素或者文本内容为空的所有元素。
:target选择器:用户单击超链接并且跳转到target元素后才起作用,
8、伪元素选择器
:before选择器:
P:before选择器{content:文字/url;css属性….}:插入的数据是在被选中p标签之前。
:after选择器:
P:after选择器{content:文字/url;css属性….}:插入的数据是在被选中p标签之后。
9、链接伪类
a:link{css样式}:未访问超链接的状态
a:visited{css样式}:访问后超链接的状态
a:hover{css样式}:鼠标经过,悬停时超链接的状态
a:active{css样式}:鼠标单击不动时超链接的状态。
10、css盒子模型
<div>:一个区块容器标记,可以多层嵌套。块级元素,可以设置它的高和宽
border:四边宽度 四边样式 四边颜色。
border-style:上 右 下 左;边框样式。
border-width:上 右 下 左;边框宽度。
border-color:上 右 下 左;边框颜色。也可以一个一个的来:border-top-colors,border-right-colors,border-bottom-colors,border-left-colors
border-redius:水平参数/垂直参数;圆角边框。
border-images: 图片路径 … 重复方式;图片边框。
margin:外边距,元素与相邻元素之间的距离。
padding:内边距
box-shadow:水平 垂直 模糊半径 扩展半径 阴影颜色 内阴影/外阴影:对盒子进行阴影效果。
box-sizing:content-box/border-box:定义盒子的宽度和高度值是否包含内边距和边框。
background-color:默认值transparent(背景透明),定义背景颜色。
background-image:url():设置网页背景图像。
Rgba模式:举例:p{ background-color :rgba(255,0,0,0.5)}:最后一个参数是表示透明度。
opacity:能够使任何元素显示透明效果,值介于0-1之间。0表示完全透明,1表示完全不透明。
Background-repeat:值分别为repeat(沿水平和垂直方向平铺,默认值),no-repeat(不平铺,显示一个),repeat-x(沿水平方向),repeat-y(沿垂直方向)。
Background-position:右 上:设置背景图像的位置
Background-attachment:值分别为scroll(默认值,图像随着页面元素一起滚动),field(图像固定在屏幕上,不随页面元素滚动)。
Background-size:设置背景图像大小
Background-origin:自定义背景图像相对位置。值分别为padding-box(背景图像相对于内边距区域来定位),border-box(背景图像相对边框定位),content-box(背景图像相对内容定位)
Background-clip:定义背景图像的裁剪区域,值分别为padding-box(从内边距区域来向外裁剪背景),border-box(从边框向外裁剪背景),content-box(从内容向外裁背景)
Background:背景复合模式。
Background-image:linear-gradient(渐变角度deg,颜色值1…):线性渐变,沿着一条直线按顺序过渡到结束颜色。
Background-image:radial-gradient(渐变角度deg,圆心角度,颜色值1…):径向渐变
Background-image:repeating-linear-gradient(渐变角度,颜色值1…):重复线性渐变
Background-image:repeating -radial-gradien(渐变角度deg,圆心角度,颜色值1…):重复径向渐变。
11、浮动元素float
指的是设置浮动属性的元素会脱离标准文档流的控制,移动到其父元素指定的位置。
Float:浮动元素,值分别为left,right,none。
Clear:消除浮动。值分别为left,right,none。只能消除元素左右浮动的影响。
clear:可以使用空标记方式消除浮动(没有内容的),父元素被其子元素撑开,即子元素浮动对父元素的影响不存在了
overflow:hidden:可以消除浮动对该元素的影响。
After:也可以消除元素浮动,注意:必须为需要消除浮动的的伪对象设置为”height: 0”;必须在伪对象中设置content属性。
Overflow:规范溢出内容显示方式。值分别为visible(显示并在盒子外,默认值),hidden(溢出部分隐藏起来),auto(溢出就产生滚动条),scroll(浏览器始终显示滚动条)
Position:值分别为static(静态定位,默认值),relative(相对定位),absolute(绝对定位),fixed(固定定位)
边偏移量:top,buttom,left,right。是属性,值的单位可以是px;
12、元素类型与转换
快元素:独自占一行或多行,可以对其设置高度,宽度等属性,<hn>,<p>,<div>,<ul>,<ol>,<li>等
行内元素:显示同一行不占独立区域,一般不能设置其高度宽度等。<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<a>,<span>等
<span>双标记:之间只能放行内标记和文本。
Display:值为inline(显示为行内元素),block(显示为快元素),inline- block(行内快元素,可设置宽高等属性,但不独占用一行),none(此元素被隐藏)
12、表单
完整表单:表单控件,提示信息,表单域3个元素部分组成。
<form action=”提交地址” method=”提交方式” name=”表单名称” autocomplete=”自动完成” novalidate=”true/false”>双标记:创建一个表单,用于定义表单域。地址可以是相对路径也可以是绝对路径,提交方式常用post(分段传输)和get(直接发送)。Autocomplete(值为on和off,通过历史帮你自动填入,下拉的方式). Novalidate验证功能。
<input />属性有:type、name、value、size、readonly、disabled、checked、maxlength、autocomplete、autofocus、form、list、multiple、min和max和step、pattern、placeholder、required。
type的值:
单行文本框:text
密码输入框:password
单选按钮:radio
复选框:CheckBox
普通按钮:button
提交按钮:submit
重置按钮:reset
图像形式提交按钮:image
隐藏域:hidden
文件域:file
邮箱输入域:email
地址输如域:URL
数值输入域:number
一定数值范围内的输入域:range
搜索域:search
颜色输入类型:color
电话号码输入类型:tel
日期和时间:Data pickers类型。值为date、month、week、time、datetime、datetime-local。
Name:控件的名称,值自定义
Value:控件默认文本值
Size:正整数,显示宽度
Readonly:该空间内容为只读
Disabled:第一次加载该控件时显示禁用该控件
Checked:默认被选中的值
Maxlength:允许输入最大字符数
Autocomplete:设定是否自动完成表单内容。On/off
Autofocus:加载后是否自动获取焦点
Form:该字段隶属哪个表单或多个表单,值为form元素的id。
List:datalist的id,指定字段的候选数值列表
Multiple:指定输入框是否可以输入多个值,值为Multiple
min和max和step:规定输入框允许最小、最大和间隔。
pattern:验证输入内容是否与定义的正则表达式匹配。
placeholder:提示
required:规定该输入框不能为空。
正则表达式图:
<textarea cols=”每行中字符数” rows=”共几行”>双标记:多行文本框,属性有name、Readonly、Disabled。
<select size=”下拉可见项数” multiple=”具有多项选择功能” >双标记:下拉框,其子元素是<option selected=” selected”>默认选中。
Datalist:为list提供值指定的值,举例:
<input type=”text” list=”ddd”>
<datalist id=”ddd”>
<option>张三</option>
<option>李四</option>
</datalist>
Keygen:密钥生成器,私钥在客户端,公钥在服务器。
Output:常用于不同类型的输出。
13、多媒体技术
视频和音频有其他方法和事件,可以去网上查。
引入视频:
<video src=”视频文件路径” controls=” controls”>双标记: controls是提供播放控件,标记之间可以插入文字,用于显示视频无法播放的时候。
Video:的其他属性
页面载入时自动播放:autoplay
视频播放完毕就重新播放:loop
预备播放:preload,如果存在autoplay属性,则忽略该属性。
当视频缓冲不足时,该属性链接一个图像,并一定比例显示:Poster
引入音频:
<audio src=”路径” controls=” controls”>双标记:controls是提供播放控件,标记之间可以插入文字,用于显示音频无法播放的时候。
audio其他属性:
页面载入时自动播放:autoplay
视频播放完毕就重新播放:loop
预备播放:preload,如果存在autoplay属性,则忽略该属性。
14、css高级应用
过渡效果:
Transition-property:指定过渡效果的css名称。值为none(没有过渡效果),all(所有属性都获得过渡效果),property(定义过渡效果名称,多个名称用逗号隔开)
Transition-duration:过渡效果花费的时间,默认值为0,定位为秒(s)或者毫秒(ms),
Transition-timing-function:规定过渡效果的速度曲线,默认值ease(慢-快-慢)。Linear(平均速度),ease-in(慢-快),ease-out(快-慢),cubic-bezier(n,n,n,n)
Transition-delay:过渡效果何时开始。默认值为0,常用单位秒或者毫秒。可正可负可0。
Transition:复合属性。
变形效果:
Transform:none/ Transform-functions; 默认不变形,使用与内联元素和块元素。
2D转换
平移:transform: translate (x,y)。可以是正数、负数。移动元素
缩放:transform:scale(x,y)。可正数可负数可小数。正数就是放大,负数不是缩小而是翻转元素在缩放。小于1的可以缩小元素。
倾斜:transform:skew(x,y):单位deg。
旋转:transform:rotate(number):单位deg
更改变换中心点:transform-origin:x y z;上面的是基于中心点来操作的,这个可以改变中心点。
3D转换
Transform:rotateX(a):定义旋转的角度值,单位为deg。可正可负,正数表示顺时围绕x旋转,否则反之。
Transform:rotateY(a):定义旋转的角度值,单位为deg。可正可负,正数表示顺时围绕Y旋转,否则反之。
rotate3D(x,y,z,角度值):三维动态
动画:
@keyframes:
animation-name:定义动画名称,适用所有块元素和行内元素。
animation-duration:定义整个动画效果完成的所需要的时间。单位毫秒或者秒。
animation-delay:定义动画播放延迟的时间。
animation-iteration-count:定义动画播放次数。
animation-direction:定义动画播放方向
特殊符号:
>大于号:>
<小于号:<
空格号:
&和号:&
¥人民币:¥
。摄氏度:°
正负号:±
X乘号:×
版权(圆包住小c):©
注册商标(圆包住小R):®
除号:÷
平方号:²
立方号:³
Css总结与特殊字符
最新推荐文章于 2023-08-18 16:43:15 发布