css

来源：互联网发布：mac层的作用编辑：程序博客网时间：2024/06/07 23:38

1.overflow:hidden的作用是隐藏溢出

2 .opacity -- 不透明度取值: <alphavalue> | inherit<alphavalue>: 透明度取值(取值范围[0.0,1.0])
inherit: 继承
初始值: 1(不透明)
继承性: 是
适用于: 所有元素
引用网址:http://www.dreamdu.com/css/property_opacity/
CSS3提出opacity属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>CSS opacity 属性示例</title>    <style type="text/css" media="all">   #p1   {    opacity:0.2;   }   #p2   {    opacity:0.4;   }   #p3   {    opacity:0.6;   }   #p4   {    opacity:0.8;   }   #p5   {    opacity:1;   }   p   {    width:200px;    height:200px;    background-color:green;    float:left;   }  </style> </head> <body>  <p id="p1">opacity:0.2;不透明度为20%</p>  <p id="p2">opacity:0.4;不透明度为40%</p>  <p id="p3">opacity:0.6;不透明度为60%</p>  <p id="p4">opacity:0.8;不透明度为80%</p>  <p id="p5">opacity:1;不透明度为100%</p>  <blockquote>IE6,IE7不支持此属性,请使用Firefox1.5,或Opera9浏览.</blockquote>
 </body></html>

2.clear:both;

图像的左侧和右侧均不允许出现浮动元素：

img  {  float:left;  clear:both;  }

3.display:block;
display是显示的方式，block是有结构，inline是没有结构（没有宽和高）比如a标签a没有结构，就是没有宽高，如果设置了为block，就可以有宽高了，还可以设置背景图片
div如果不定义宽高的话，只有里面有文字、图片时才会撑大；加上display：block默认就会撑大显示出来

img{display:block;}表示将img标签，也就是图片标签变成一个区块标签是分成 区块 和 内联块 2种一个标签显示一行的称为 区块，如（段落P，标题H系列，DIV等）（你没见过在2个P标签放在一行能显示的情况吧）？若标签能在一行显示N个，表明此标签为 内联块，如（<a>,<img>,<input>）区块和内联块最大的区别就是，区块可以设置宽、高、居中对齐等操作，而内联块不行也就是说，当你需要将一张图片居中，或者要设置区域大小，或单独一行显示，就用到你说的这个样式反之，你若想把区块变为内联块，则将display:none就可以了PS：区分区块还是内联块其实很简单，你可以把这个标签加一个背景颜色，若能占一行，则为区块，反之则是内联块

4.css - 属性选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style>input[type="text"]{  width:150px;  display:block;  margin-bottom:10px;  background-color:yellow;  font-family: Verdana, Arial;}
input[type="button"]{  width:120px;  margin-left:35px;  display:block;  font-family: Verdana, Arial;}</style></head><body>
<form name="input" action="" method="get"><input type="text" name="Name" value="Bill" size="20"><input type="text" name="Name" value="Gates" size="20"><input type="button" value="Example Button">
</form></body></html>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">a[href][title]{color:red;}</style></head>
<body><h1>可以应用样式：</h1><a title="W3School Home" href="http://w3school.com.cn">W3School</a>
<hr />
<h1>无法应用样式：</h1><a href="http://w3school.com.cn">W3School</a></body></html>

5.

网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正文全文高： document.body.scrollHeight;网页被卷去的高： document.body.scrollTop;网页被卷去的左： document.body.scrollLeft;网页正文部分上： window.screenTop;网页正文部分左： window.screenLeft;屏幕分辨率的高： window.screen.height;屏幕分辨率的宽： window.screen.width;屏幕可用工作区高度： window.screen.availHeight;屏幕可用工作区宽度：window.screen.availWidth;scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标event.clientY 相对文档的垂直座标event.offsetX 相对容器的水平坐标event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置，用：document.documentElement.scrollTop;而不是：document.body.scrollTop;documentElement 对应的是 html 标签，而 body 对应的是 body 标签

6：css-连接

<!DOCTYPE html><html><head><style>a:link {color:#FF0000;}    /* 未被访问的链接 */a:visited {color:#00FF00;} /* 已被访问的链接 */a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */a:active {color:#0000FF;}  /* 正在被点击的链接 */</style></head>
<body><p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p><p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p><p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p></body></html>

<!DOCTYPE html><html><head><style>a:link {text-decoration:none;}    /* 未被访问的链接 */a:visited {text-decoration:none;} /* 已被访问的链接 */a:hover {text-decoration:underline;}   /* 鼠标指针移动到链接上 */a:active {text-decoration:underline;}  /* 正在被点击的链接 */</style></head>
<body><p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p><p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p><p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p></body></html>

7：

为表格设置合并边框模型：

table { border-collapse:collapse; }

8：设置边框样式：

p { border-style:solid; border-top-style:dotted; }

9：css类似js的效果（伪类）  focus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">input:focus{background-color:yellow;}</style></head>
<body><form action="form_action.asp" method="get">First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br /><input type="submit" value="Submit" /></form>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。</p>
</body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><style type="text/css">p:first-child {font-weight: bold;}li:first-child {text-transform:uppercase;}</style></head>
<body><div><p>These are the necessary steps:</p><ul><li>Intert Key</li><li>Turn key <strong>clockwise</strong></li><li>Push accelerator</li></ul><p>Do <em>not</em> push the brake at the same time as the accelerator.</p></div>
<p><b>注释：</b>必须声明 DOCTYPE，这样 :first-child 才能在 IE 中生效。</p></body>
</html>

<html><head><style type="text/css">q:lang(no){quotes: "~" "~"}</style></head>
<body><p>:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：</p>
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p></body>
</html>

"first-line" 伪元素用于向文本的首行设置特殊样式。

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">h1:before {content:url(/i/w3school_logo_white.gif)}        //h1:after</style></head>
<body><h1>This is a heading</h1><p>The :before pseudo-element inserts content before an element.</p><h1>This is a heading</h1><p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。</body></html>