CSS样式表与格式布局详解

样式表

CSS（Cascading Style Sheetsnbsp; 层叠样式表），作用是美化HTML网页。

内联样式表： 例：lt;p style=quot;font-size:10px;quot;gt;内联样式表lt;pgt;

内嵌样式表：必须写在head标签里nbsp;nbsp;

例：lt;style type=quot;text/cssquot;gt;

p

{ 样式;}

lt;/stylegt;hei

外部样式表：新建一个CSS文件用来放置样式表 在HTML中 右键--CSS样式--附加样式表

例：lt;style type=quot;text/cssquot;gt;

*

{ margin:0px; padding:0px;}nbsp;nbsp; //网页边距为0像素 字体间距为0像素

.miannbsp;nbsp; //class选择器nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; lt;div class=quot;mianquot;gt;lt;/divgt;// 调用class样式表

{

height:40px;

width:100px;

text-align:center;

background-coloe:red;

}

#mian//ID 选择器nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; lt;div id=quot;mianquot;gt;lt;/divgt;nbsp; //调用ID选择器

{

height:40px;

nbsp;

width:100px;

text-align:center;

background-coloe:red;

}

lt;/stylegt;

复合选择器：（1）P，spannbsp; 用，隔开 表示两个标签并列 具有同样的样式

（2）miannbsp; Pnbsp;nbsp; 用空格隔开 表示后代

（3）mian.pnbsp;nbsp; 用ldquo;.rdquo;隔开 表示mian标签中的p标签

样式属性中nbsp; 例如：margin：20px 0px 20px 0pxnbsp;nbsp; 表示边框的宽度分别为上20像素nbsp; 右0像素nbsp; 下20像素nbsp; 左0像素nbsp; 顺序为顺时针 上-右-下-左

格式布局

锁定位置（相对浏览器的位置nbsp; 即不管浏览器怎么滚动 窗口相对浏览器位置不变）nbsp; position:fixed;

绝对位置与相对位置
（1）如果外层没有absolute(或者relative) 那么div 相对浏览器定位nbsp;

（2）如果外层有absolute(relative) 那么div相对于外层边框定位 position:absolut;(绝对位置)nbsp;nbsp;nbsp; position:relative;(相对位置)

分层：如果想要页面上某一标签总是最上显示 则需要设置z的值nbsp; 如：z-index:2;nbsp; //z的值为2 则在上层显示nbsp; 不更改默认为1 都在同一层

常见超链接stylenbsp;nbsp;nbsp; 定义是的顺序为nbsp; L --v--h--a

a:linknbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; 超链接被点击之前状态

a:visitednbsp;nbsp; 超链接点击后状态

a:hovernbsp;nbsp;nbsp; 鼠标悬停在超链接时

a:activenbsp;nbsp;nbsp; 点击超链接时

以上就是小编为大家带来的CSS样式表与格式布局详解全部内容了，希望大家多多支持脚本之家~

原文地址：http://www.cnblogs.com/ouyangtangfeng99/p/5377983.html

（编辑：云计算网_韶关站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!