Css总结与特殊字符

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：定义动画播放方向


特殊符号：
>大于号：&gt;
<小于号：&lt;
空格号：&nbsp;
&和号：&amp;
￥人民币：&yen;
。摄氏度：&deg;
正负号：&plusmn;
X乘号：&times;
版权（圆包住小c）：&copy;
注册商标(圆包住小R)：&reg;
除号：&divide;
平方号：&sup2;
立方号：&sup3;