CSS自学笔记CSS样式表自学笔记CSS的中文意思就是层叠样式表(cascadingstylesheet)。Web标准将页面的结构(数据HTML/XML)、表现(CSS)和行为(DOM/JS)相分离。:注释:/*需要注释的内容*/条件注释:<!—[if!IE,]-->CSS在JS中的应用:Style属性 style是HTML元素的属性之一,其包含了所有的CSS属性。通过对style属性的操作就可以操作CSS属性。 编写区别:CSS属性中的短横线在style对象中将两个单词连写,第二个单词首字母大写。如: CSS:font-size=> Style有一个cssText属性,可以接收完整的CSS代码值。如: =“font-weight:bold;color:#333;border:1pxsolidred;” 动态更改CSS样式: (“ID”).=“12px”;JavaScript中动态修改CSS样式方法一:=属性值;background-color(CSS)<=>backgroundColor(JavaScript)方法二:=class选择器CSS的引用方式1、内联样式表(行间样式表)<bodystyle="FONT-SIZE:30pt;color:blue;font-family:宋体">2、嵌入样式表(内部样式表):在网页的文档的头部<head></head>标签对之间定义,如下:<styletype=”text/css”></style>3、外部样式表:大多数浏览器会将外部样式表加载到缓冲区,从而达到提高访问速度的效果<linkrel="StyleSheet"href=""type=”text/css”>。4、CSS的媒介控制:<styletype=”text/css”media=”screen,projection,print”></style>浏览器专属属性前缀组织示例说明-ms-Microsoft-ms-interpolation-modeIE-moz-Mozilla-moz-read-only基于Gecko引擎的浏览器,如Firefox-o-Opera-o-text-overflowOpera-webkit-Webkit-webkit-box-shadow基于Webkit引擎,如Chrome和SafariCSS的颜色和数值单位: 颜色:redó#ff0000ó#f00órgb(255,0,0)órgb(100%,0,0) 单位:px(像素),pt(点/磅),in(英寸),mm(毫米),cm(厘米),em(相对当前文本倍数) 立体效果:左、上边框颜色稍浅,右、下边框颜色稍深。 其他颜色函数:hsl/hsla/rgba函数,用色调、饱和度和亮度控制的颜色。mediaquery功能:***@medianot|only设备类型[and设备特性]* 常用设备类型:all/print/projection/screen/tv/tty(打字机和终端)/aural(语音和音频合成器) 常用设备特性:Width/height:匹配浏览器窗口的宽度和高度,如600pxDevice-width/device-height:匹配设备分辨率的宽、高Aspect-ratio/device-aspect-ratio:浏览器窗口/设备分辨率的宽高比,如:16/9Color:设备色深,如真彩色是32,不是彩色设备是0例子:设置当浏览器宽度大于1000px时的CSS样式 ***@mediascreenand(min-width:1000px){CSS}CSS选择器selector1、Html标签:p、div、table…如:p{FONT-SIZE:30pt}2、id/classselector:注意:id和class命名区分大小写,格式:#id/.class{…}伪类选择器:a:visited{}结构性伪类选择器:root:根元素,即<html>:empty:只能是空元素,不能有子节点、也不能包括文本内容、甚至空格,如:<div></div>:first-child/:last-child/nth-child(n/odd/even/xn+y)/nth-last-child()/only-child:div:nth-child(2):first-of-type/:last-of-type/:nth-of-type(n/odd/even)/:nth-last-of-type/:only-of-type:共同类型
CSS自学笔记 来自淘豆网m.daumloan.com转载请标明出处.
