javascript基础之CSS基础

CSS除了可以轻松设置网页元素的格式外，还可以产生滤镜，图像淡入淡出，网页淡入淡出。CSS的目标就是对网页实现与Woid一样的排版控制。
不一定要记到繁多的样式。实际上只要通过辅助工具就可以了。
样式规则选择器：
HTML元素选择器
Class选择器
Id选择器
关联选择器
组合选择器
伪元素选择器
样式规则的注释。样式属性：
CSS的样式属性分类，大概可以分为以下几类：
字体，背景，文本，位置，布局，边缘，列表。其它。
与字体相关的属性：主要包括字体大小，颜色，样式。
font-family:字体的名称。值可以设置多个字体名称，当用户浏览器无法识别第一种字体时，就会使用第二种字体或更后面的。
font-size:绝对大小的设置：small,x-small,xx-small,medium,large,x-large,xx-large.xx-small为最小值，xx-large为最大值。相对大小设为larger,smaller.
font-style:用来定义字体的样式是斜体还是正常字体。分别是italic,normal.
text-decoration: 用于在文本中添加下划线，中划线，上划线等效果。可以设置多个值，多个值要用空格隔开。underline,overline,line-throw.none.
font-weight:用于指示粗体字的大小。bolder,lighter.
font-variant:small-caps大写字母。
text-transform:字母的大小写转换。首字母大写，或全部大写。全部小写。
color:
CSS中的背景属性：背景颜色，图像。
background-color:
background-image:url(" ");
background-repeat:表示背景图像重复或者重复的方式。取值可以如下：no-repeat,repeat,repeat-x,repeat-y.
background-attachment:用于确定背景图像是不是随鼠标的滚动而滚动。fixed,scroll.
background-position:图像的水平位置和垂直位置。left,right,center,bottom,top,center,20px.
文本属性：距离，对齐，上标，下标。
word-spacing:单词间的间距。
letter-spacing:用来设置每个字符的间距。
vertical-align:sub下标，super上标，top,middle,bottom.相对于行高元素的百分比。
text-align:水平对齐，left,right,center,justify
text-indent:
white-space:如何处理文本中的空白字符。它的取值可以如下：normal,pre,nowrap.
line-height:行高。可以是精确的数字，也可以是百分比。
CSS滤镜(Filter)
Filter是CSS提供的一种用于产生多媒体效果的属性，使用这种技术可以把效果添加到网页中，对于视觉是很有用的。
首先根据下列的HTML代码体会Filter的作用：
<div style="width:120;height:40;background-color:red;filter:Alpha(Opcity=80) Blur(Add=5,Direction=135)">
<div style="width:120;height:40;background-color:red;filter:Alpha(Opcity=80) Blur(Add=5,Direction=135) FlipV">
<div style="width:120;height:40;background-color:red;filter:Alpha(Opacity=80) Blur(Add=5,Direction=135) FlipV">资讯次序网<br>1111</div>
下面来看看其各个参数的作用：
Alpha说明一个元素与背景混合的程度，透明度。
Alpha(Opacity=?透明度级别0-100,Finishopacity=?渐变的透明效果，用来指示结束时的透明度,style=?透明的样式可以为0.1.2.3,startx=?渐变透明效果的X坐标,starty=?渐变透明效果的Y坐标,finishx=?;finishy=?);
BlendTrans(Duration=?)这个参数用于设置淡入和淡出的效果。Duration设置淡入淡出的时间值。
Blur（Add=?是否是在单个方向上糊糊，Direction=？模糊的方向，45的整数倍，Strength=?有多少个像素的宽度受到模糊的影响）用于设置模糊的效果。
Chroma（Color=？）将某种颜色设为透明，即是过滤掉某种颜色。
DropShadow（Color=?,offx=?水平偏移量,offy=?,Position=?布尔值，为真时建立外部阴影。)用于建立阴影效果。
FlipH：将元素水平方向上翻转。
FlipV:将元素垂直方向上翻转。
Gray：去年图像色彩
Xray:用于设置图像的轮廓、
Invert：翻转图像颜色，。
Light：用于设置光圆效果。
Glow（color=?,strength=?）用于设置元素边缘产生发光的效果。
Mask(color=?)用于在元素表面上覆盖一个透明的遮照。就像带着有色眼镜去看物体的效果一样。
RevealTrans（Duration=?切换的时间，Transition=?切换的方式，可以从0到23之间的一个数字。）用于建立初始状态的转换效果。
Shadow（Color=？，Direction=?。）用于建立另一种阴影效果。
Wave（Add=?设置原对象是不是按照波纹的效果扭曲。非零表示扭曲。，Freq=?波纹的频率。,LightStrength=?波纹效果的光照强度，0到100，Strength=?波浪的摇摆幅度。。,Phase=?）用于在元素上显示一种波纹的效果。
最后，我为大家提供一些学习上的建议：
HTML标签，CSS属性。使用工具软件来实现。但是知道有哪些标签可用，以及各个标签的作用。还是必要的。否则你对工具软件的应用只能不知所以然。用的多了。就会记住。常时间不用，自然会忘记。
苦干不如巧干，最聪明的是最会用工具的人。
要查找一些帮助资料来补回一些忘记的知道，而不是死记硬背。
查看优秀网页的源代码。
在当前网页中获取CSS文件和JavaScript文件的方法：
如果是外部文件，那么就把它的地址复制到地址栏上，浏览器会自动下载这个文件。
如果表格中的有一个单元格特别长，全部由字母组成，浏览器会增加表格的宽度，无论怎么设置，浏览器都不会根据表格宽度自动的换行。通过设置<td>标签的word-break,word-wrap.自动显示。
CSS的位置属性：
就是指定元素的位置，它可以用来控制任何元素在浏览器窗口中的位置。对网页元素进行定位控制。包括下面属性：
Position：定位方式。用于设置CSS的定位方式。可以取如下值：
absolute:绝对定位，精确的将元素定位在页面上的某个位置，而不考虑其他元素的位置。
relative:相对定位，相对于元素通常位置的一个偏移量。
static:：通用的定位方式。
left:用来设置元素左边的属性。
top:用来设置元素顶部的属性。
width:用于设置元素的宽度。
height:元素显示的高度。
Z-index：元素的层叠顺序。
边缘属性：
margin属性：用于设置元素的边界。
margin-right.
margin-top,
margin-left.
margin-bottom.
padding属性：用来设置元素边界与内容之间的空隙大小。
padding-top
padding-right
padding-left
padding-bottom
border-width属性：用来设置元素的边框的宽度。
border-top-width
border-bottom-width
border-right-width
border-left-width
border-color属性：用来设置元素边框的颜色。
border-right-color
border-left-color
border-top-color
border-bottom-right
border-style属性：用来设置边框的样式。
border-top-style
border-right-style
border-left-sstyle
border-bottom-style
它的设置值可以取如下样式：dotted点线,none,dashed,solid,double,groove,ridge,inset,outset.
列表属性：
list-style-type:用于指示列表目标项标记的类型。设置值有很多。disc实心圆。
list-style-image:目录列表项的图像。
list-style-position：用来指示列表项是显示在文本内，还是显示在文本外。inside,outside.
其它的属性：
Cursor:用于指示当鼠标移动到上面的时候，光标的形状。
取值有很多，hand手形。
filter:滤镜特效。
样式表中的注释：
/*     */