当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS样式表的基础知识

时间:2013-03-02 03:46来源:未知 作者:admin 点击:

标签:CSS样式表的基础知识 先容(7)基础知识(3)一些(40)简略(7)样式(83)大家(15)CSS(655)
为大家先容一些简略的CSS样式表的一些基础知识。 1、使用CSS样式把持页面的表示 一般常见的网页宽度为width:960px; 用div实现一行两列的布局 div div class=left第一列/div div class=right第二列/div /div 注意:1)两列的宽度之和不能大于父div的宽度; 2
CSS样式表的基础知识》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023341H013.htm

为大家先容一些简略的CSS样式表的一些基础知识。

1、使用CSS样式把持页面的表示

一般常见的网页宽度为width:960px; 用div实现一行两列的布局
<div>
      <div class=”left”>第一列</div>
      <div class=”right”>第二列</div>
</div>
注意:1)两列的宽度之和不能大于父div的宽度;
      2)让其中一列进行 float:left/right; 用div实现一行三列的布局
<div>
      <div class=”left_mid”>
             <div class=”left”>第一列</div>
             <div class=”mid”>第二列</div>
      </div>
      <div class=”right”>第三列</div>
</div>
留神:1)三列宽度之跟不能大于父div的宽度;
    ,CSS样式表的分类详解;  2)控件列的float属性即可。 阅读器默认是超链接样式为:蓝色+下划线,点击之后为:紫色+下划线. 谈谈div与span标记的区别
1)div是块级元素,它包括的所有元素均会主动换行;
2)span是行内元素,它不换行。 对于margin和padding属性
1)若属性连起来写,则依据顺时针按上、右、下、左的次序规矩缩写;
2)当上和下、左和右的属性值一致时,可简写为:margin: 40px 50px;
3)当高低左右的属性值都一致时,可简写为:margin:60px; 将网页中的元素居中
width:960px;
margin:0 auto; 设置了float的div在ie6下的margin会加倍,这是ie6 的bug
解决措施:在div的款式中加上 display:inline 解决div垂直居中的问题
vertial-align:middle
line-height:div’height Id与class的差别
1)id不可以反复,class能够重复使用
2)id的优先级要高于class的优先级
3)id在某些情形下节俭时光 将flash设为透明
<param name=”wmode” value=”transparent”> Tag:   基础   样式表   CSS     基础   样式表   CSS  

三、技能

--> [网站建设之]CSS样式表的基本常识

二、CSS选择器

标志选择器
如:li选择器,用于声明页面中所有<li>标记的样式风格
<style type=”text/css”>
      li{
             color:red;
    ,CSS样式表注释书写规范;        ,CSS样式表教程之浏览器默认样式; text-decoration:none;
      }
<,CSS样式表在网页设计中的特性;/style> 种别抉择器 .class
.error{color:red; font-size:17px; }
注意:class类别选择器的另一种更为直观的使用是直接在标记声明后按类别号称来区别该标记。
如:h3,CSS样式表在网页设计中的4个特性.first_class{color:green} ID挑选器
ID selector 与 class selector基原形同,不同之处在于ID取舍器在HTML页面中只能应用一次,因而针对性更强。
如: #once{ font-weight:bold; font-size:30px; } 选择器群体申明,实用于某些选择器的样式作风是完整相同或局部雷同的情况下。
如:h1, h2, h3, p{color:purple; font-size:14px; }
    h2.special,CSS样式如何实现Logo立体盒子效果, .special, #once{text-decoration:underline;} 选择器的嵌套,嵌套方法可用于对特别地位的HTML标记进行声明。
如: p b {color:yellow; font-size:30px;}
只针对p标记下的b标记才生效,对p标记之外的b并不生效。
注意:典范的嵌套语句
1).second I { color:black; } /* 只针对使用了second类的<i>标记生效 */
2)#first li { padding-left:8px; } /*针对ID为first的标记中的<li>标记生效*/
3)ul li { list-style:none;}
4)td.top, top1 strong{ font-szie:10px; } /*多重嵌套*/ 子选择器,表现用来选择一个父元素的直接子元素,符号为”>”
如:ul.mylist>li>a{ text-decoration:none;}
      <ul class=”mylist”>
             <li><a href=”#”>link</a><,css样式名规范命名建议;/li> /*仅对这句生效,由于用到子选择器*/
 ,CSS样式书写之选择器详解;     </ul>
      <li><a href=”#”>link2</a></li> /*这句不起后果*/
若改为:ul.mylist>li a {. . .}, 则所有的<a>标记都生效。 行内样式
<p style=”color:red; font-size:14px;”> 内嵌式
<head>
<,CSS样式中的图片Referer差异判断;title>页面题目</title>
<style type=”text/css”>
body{
      margin:0 auto;
      width:960px;
}
</style>
</head> 链接式
<head>
      <link href=”mycss.css” type=”text/css” rel=”stylesheet”>
</head> 导入样式
<head>
      <style type=”text/css” >,CSS样式 background-position说明;
             @import url(“mycss.css”);
      </style>
</head>
(责任编辑:网站建设)
CSS样式表的基础知识相关文章
上一篇:CSS样式表的分类详解 下一篇:css样式设计时快速定位bug的几个好方法
回到顶部