学习CSS内联样式

div{color:red;字体大小：12px；}1.CSS可以帮助用户在页面中完成以下任务：可见和隐藏特效：借助CSS的显示和可见性实现。结合淡入淡出和各种动画序列，可以设计复杂的视觉效果缩放：使用CSS宽度和高度。常见于变形动画，如设计图片、分栏、页面展开、缩小等；动态控制目标对象的大小，设计变化的页面布局，以及其他对象定位：使用CSS定位，left，top，right，bottom等，在位移动画中常见，比如开发网页游戏视图控制：使用CSSclip、overflow、visibility，可以动态控制页面对象的显示方式和显示内容透明设计：使用CSSopacity，一般与显示、缩放、位移动画一起使用，增强渐变和淡出效果对象效果：动态改变字体样式、文字布局、网页布局等，设计图片特效等UI交互：配合CSS+HTML设计强大的交互形式和交互形式，设计充满变化的网页皮肤2、css样式表的三种引入方式：1）内联样式（inlinestyle）概念：称为内联样式和内联样式，通过标签的style属性设置元素的样式；基本语法content缺点：没有实现样式和结构的分离2）内部样式表（内嵌stylesheet）是将css代码集中写在HTML文档的head标签中，用style标签定义；基本语法：div{color:red;字体大小：12px；}缺点：没有完全分离3）外部样式表（externallinks）的概念：就是把所有的样式放在一个或多个扩展名为.的外部样式表文件中。样式表文件链接到HTML文档；基本语法：注意：link是单个标签；link标签应该放在head标签中，并指定链接的三个属性；attribute:rel：定义了当前文档和链接文档的关系，这里需要指定为“stylesheet”，表示链接文档是一个样式表文件；type：定义链接文档的类型；href：定义所有链接的外部样式表文件的url，可以是绝对路径，也可以是相对路径；缺点：需要引入内联样式三、操作内联样式；CSS的很多属性有时会有复合名，使用连字符“-”，比如border-right，margin-left等，但是在脚本（js代码）中连字符会被定义为减号，会自动计算参数表达式；解决这个问题，需要使用小驼峰名称：borderRight,marginLeft等1、使用样式对象：elementNode.style.fontFamily="Arial,Helvetica,sans-serif";elementNode.style.cssFloat="left";//float是js中的保留字，需要用cssFloat表示float属性elementNode.style.color="#ff0000";elementNode.style.width="100px";//单位不能省略elementNode.style.top=top+"px";//设置动态属性2，使用getPropertyValue()方法，早期IE不支持，直接使用elementNode。style.width访问样式属性：varvalue=elementNode.style.getPropertyValue(propertyName)例子：window.onload=function(){varbox=document.getElementById("box");//获取varwidth=box.style.getPropertyValue("width");<=>varwidth=box.style.widthbox.innerHTML="Boxwidth:"+width;varmarginLeft=box.style.getPropertyValue("margin-left");//需要连字符的样式属性box.innerHTML="Boxmargin:"+marginLeft;}3、setProperty()方法：为指定元素设置样式；不兼容早期IE，elementNode.sytle.width="500px";elementNode.setProperty（属性名称、值、优先级）；//参数说明：属性名，属性值，设置与否！importantprioritywindow.onload=function(){varbox=document.getElementById("box");//获取box.style.setProperty("width","400px","");box.style.setProperty("height","400px","");//兼容早期IEbox.style.width="400px";box.style.height="400px";}4，removeProperty()方法：移除指定CSS样式声明elementNode.removeProperty(propertyName)5、item()方法：返回样式对象中指定索引位置的CSS属性名element.style.item(index)；6、getPropertyPriority()方法：获取是否附加了指定的css属性！important，有则返回important，没有则返回空字符串