|
div+css[1]：css基本知识介绍
１、css的语法（包括：选择符、属性和值）
□属性必须要包含在｛｝号中；
□属性和属值之间用“:”分隔；
□当有多个属性时，用“；”进行区分；
□在书写属性时属性之间使用空格、换行等，并不影响属笥的显示；
□如果一个属性有几个值，则每个属性值之间用空格分隔开；
□css中所有的长度值都要注明单位，当值是0时除外；
□所用使用十六进制的颜色单位都要在颜色值前加“＃”号；
2、选择符类型
□通配选择符：“＊”，其含义就是所有元素；
*{font-size:12px;} 页面中所有文本的字体大小为12个像素
□类型选择符：以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符；
div{font-size:12px;} 页面中所有div元素包含的内容的字体大小为12个像素
□包含选择符：
div p {font-size:12px;} 页面中所有div元素包含的p元素中，文本的字体大小为12个像素
□ID选择符：
#name1{font-size:12px;} 在所有调用id名称为name1的页面元素中，文本字体大小为12个像素。
id选择符的名称在页面中是唯一的。
□类选择符：
.name1{font-size:12px;} 在所有调用类名称为name1的元素中，文本字体大小为12个像素。
□选择符分组：
.name1,div,p{font-size:12px;} 在所有调用类名称为name1的元素、div元素、p元素中，文本字体大小为12个像素。
3、css的调用
①元素中直接调用：
<div style="width:400px;height:100px;background-color:#cccccc">举例</div>
②从页面头部调用（先将css写在页面的head元素中，然后在页面中调用）
<style>
.hd{
font-size:12px;
font-family:"宋体";
}
</style>
页面中调用
<div class="hd">调用头部样式的例子</div>
③采用链接的形式调用
<link href="aa.css" type="text/css" rel="stylesheet"/>
4、背景的综合属性（即background属性）语法结构如下：
background: 背景颜色｜背景图象｜背景位置｜背景重复｜背景附件 (值的顺序可以随意交换)
代码完整版：
background-color:#cccccc;
background-image:url(images/01.jpg);
background-repeat:no-repeat; (值有：repeat、repeat-x、repeat-y、no-repeat不重复)
background-position:left center; (横向与纵向位置的值,水平居左，垂直居中)
background-attachment:fixed; (scroll：背景图随内容滚动fixed：背景图固定)
选择符的优先级：
□直接命名用的css ＞页面头部调用的css ＞链接形式调用的css;
□类选择符＞类型选择符;
□id选择符＞类选择符;
□最近最优先原则。
div+css[2]：css中文本属性流
1.段首缩进
text-indent:长度值|百分比值;
p{text-indent:4em;}
// 其中百分比是指相至于父元素的宽度.
2.段首字符下沉与大写(用伪类first-letter来表示,且选择符仅限于块元素,如果用内联元素必须先声明元素的height和width,或者设定position属性为absolute,或者设定display属性值为block后才能使用)
选择符:first-letter{属性:值}
p:first-letter(font-size:18px;color:red;float:left;text-transform:uppercase;)
// text-transform:uppercase属性的作用是:如果段首字符为英文,则转换为大写.
3.文本的对齐
□水平对齐text-align:center|left|right|justify(两端对齐)
p{text-align:center;}
□竖直对齐vertical-align:top|middle|bottom
img{vertical-align:middle;}
// 此属性仅作用于内联元素,所以无法用vertical-align属性控制div等块元素中的内容的竖直对齐.
4.图文混排
在css中可用通过文本中插入浮动元素来实现图文混排的效果.
img{float:right;margin:10px;}
5.行高属性
line-height:normal|长度值|百分比值|数字值;
□normal:默认值,由用户代理而定;
□长度值:任何长度值,但不能取负值;
□数字值:文本的行高是字体大小的两倍;
□百分比:好处在于,当更改字体的大小时行高会自动适应;
p{font-size:12px;line-height:30px;}长度值
p{font-size:12px;line-height:2;}数字值
p{font-size:12px;line-height:150%;}百分比
6.间隔与空白属性
□letter-spacing:normal|长度值;
content{letter-spacing:10px;}
<div class="content">使用文字间隔的效果</div>
显示效果是: 使用文字间隔的效果
□word-spacing:normal|长度值;
// 不支持中文,所以该属性在中文中不起作用.显示效果是: HOW ARE YOU!
□white-space:normal|pre|nowrap;
normal:默认值,忽略多余的空白.
pre:不忽略多余的空白
nowrap:文本保持同一行显示,直到文本结束或者遇到br元素.
// 在xhtml中,内容的默认显示方式是将任何多个空白字符合并成一个空白字符来显示.如果声明white-space属性值为pre,则会显示所有的空白字符.
7.文本的转换
text-transform:none|uppercase|lowercase|capitalize;
□none:文本不进行大小写的转换
□uppercase:转换成大写.
□lowercase:转换成小写
□capitalize:文本中每个单词的第一个字母大写.
div+css[3]：css中边框border与补白padding属性设置
1.边框属性border
□边框样式
border-style:none|dotted|dashed|solid|......
none:没有边框. dotted点线dashed虚线solid实线.....等等
边框样式也可以像padding一样,用4个值分别定义上下右左4个边框样式.
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
以上可以简写成为:(顺序为钟面原则:上右下左)
border-style:dotted solid dotted solid;
若上下值相同\左右值相同,则又可以简化成为
border-style:dotted solid;
□边框宽度
border-width：:medium|thin|thick|长度值
medium: 默认值、thin:比默认值细、thick:比默认值粗、长度值:
边框宽度也可以像padding一样,用4个值分别定义上下右左4个边框宽度,各不相同.
border-top-width:10px;
border-right-width:5px;
border-bottom-width:10px;
border-left-width:5px;
以上可以简写成为:(须序为钟面原则:上右下左)
border-width:10px 5px 10px 5px;
若上下值相同与左右值相同,则又可以简化成为
border-width:10px 5px;
□边框颜色
border-color:颜色值;
border-top-clolr:#cccccc;
border-right-clolr:#999999;
border-bottom-clolr:#cccccc;
border-left-clolr:#999999;
以上可以简写成为:(须序为钟面原则:上右下左)
border-color:#cccccc #999999 #cccccc #999999;
若上下值相同与左右值相同,则又可以简化成为
border-color:#cccccc #999999;
□边框的综合定义
border:border-style border-width border-color;
其中,每个属性的顺序可以随意交换,每个属性之间用空格分隔.
border:#999999 10px solid;
该样式定义了边框颜色为淡灰色,边框宽度为10px,边框样式为实线.
□单侧边框的综合定义
border-top:border-style border-width border-color;
border-right:border-style border-width border-color;
border-bottom:border-style border-width border-color;
border-left:border-style border-width border-color;
2.补白属性padding
padding:长度值|百分比(百分比一般不建议用)
padding-top:20px;
padding-right:10px;
padding-bottom:20px;
padding-left:10px;
以上可简写成为:(顺序为钟面原则:上右下左)
padding:20px 10px 20px 10px;
如果上与下同值,右与左则值,则又可以简写成为:
padding:20px 10px;
如果左边值未设,则默认为与右边相同,若两边都没设,则默认为0.上下值设置相同.
div+css[4]：css中边界属性margin
1.边界属性margin
margin:auto|长度值|百分比值;
□单侧的边界和简写
margin-top:5px;
同时定义四个单侧的属性,顺序遵循"钟面原则上右下左":
margin:margin-top|margin-right|margin-bottom|margin-left;
margin:40px 30px 20px 10px;
□ 垂直方向的边界重叠
例如两元素:content1 content2 <div class="content1"></div> <div class="content2"></div> 两元素分别定义为: .content1{ margin-bottom:50px; height:50px; width:300px; background:#cccccc; } .content2{ margin-top:50px; height:50px; width:300px; background:#cccccc; } 实际显示效果是:两个元素之间的距离为50px,而不是两个边界之和为100px.也就是说,两个元素的边界发生了重叠.当两个边界值不同时,元素间的距离等于值较大的一个. □水平方向的边界重叠
例如两元素:content1 content2
两元素分别定义为:
<div class="content1"></div>
<div class="content2"></div>
.content1{
margin-right:50px;
height:50px;
width:300px;
background:#cccccc;
float:left;
}
.content2{
margin-left:50px;
height:50px;
width:300px;
background:#cccccc;
float:left;
}
实际显示效果是:两个元素之间的距离为100px,相邻元素的边界属性在水平方向上会相加.
□负的边界值
例如两元素:content1 content2
<div class="content content1"></div>
<div class="content content2"></div>
两元素分别定义为:
.content{
height:70px;
width:300px;
padding-top:20px;
}
.content1{
margin-bottom:20px;
background:#cccccc;
}
.content2{
margin-top:-80px;
background:#666666;
}
实际显示效果是:两个元素之间的距离为20px与-80px之和-60px.所以元素content2会向上移动-60px,与content1有60个像素的重叠.
□在内联元素中使用margin属性(垂直)
这是一个在内联元素中使用
<span class="content1">边界属性</span>的示例.
.content1{
margin-bottom:40px;
backtground:#999999;
}
实际显示效果是:文本在垂直方向上保持不变,原因是边界属性不能改变文本的行高,所以元素在秉直方向上没有文化.
□在内联元素中使用margin属性(水平)
这是一个在内联元素中使用<span class="content1">边界属性的示例,请注意换行处的边界属性</span>是否有变化,这将有助于对属性的理解.
margin:40px;
backtground:#999999;
}
实际显示效果是:边界属性只会在元素的开始和结束的地方产生效要.换行断开时并不产生边界效果.
div+css[5]：负边界，overflow，min-height属性
1.嵌套元素中使用负边界
举例:
<div class="main">
<div class="content">子元素,注意自元素中的内容,这将有助于理解负边界的含义</div></div>
.main{
padding:50px 0 0 100px;
width:350px;
height:150px;
background:#999999;
}
.content{
margin:-100px 0 0 100px;
width:100px;
height:100px;
background:#cccccc;
}
实现效果是:子元素的上边界-100px,而父元素有50个像素的补白,故子元素将会向上移动50个像素.
但ie会隐藏子元素中的超出部分,而firefox则显示超出的部分.
2.使用overflow来固定长度和宽度
overflow:visible|hidden|auto|sroll;
visible:不剪切内容也不产生滚动条;
hidden:不显示超出的内容部分;
auto:在需要的时候产生滚动条;
sroll:总是显示滚动条;
3.控制高度属性min-height,max-height
min-height:auto|长度值；
定义了元素的最小高度，当元素中的内容没有达到最小高度时，元素显示最小高度；当大于最小高度时，高度自适应。
注：IE浏览器不支持这两个属性值，它会理解为没有定义高度，也就是高度自适应auto.
div+css[6]：CSS的一些小技巧
做了一些 web project 慢慢的对页面布局有了一些理解,也碰到了一些难题,在这里写出来,方便自己也方便需要的人,谨记莫要用ie 为页面布局的标准,虽然ie7美名其曰:符合w3c.我现在是用chrome作为首选浏览器,检测时firefox,ie6,ie7 都要测试,这样才不会另你的页面出现夸张的变形.
1. 让li 里面的内容各左右对齐虽然<span>放在后面也可以,但是设计页面的文字不是一个水平线上的.
<style rel="stylesheet" type="text/css"> #notice{height:149px; width:350px} #notice li span{float：:right;}</style>
<ul id="notice">
<li><span>05-09</span>测试版发布…</li>
<li><span>04-02</span>注意：对如何使用软件及…</li>
</ul>
2. 做出只要3个边框的div ,最简单的方法. 先读border 属性,然后再读border-bottom属性 ,就会把上个属性相对应的值覆盖.省去一个一个的写上下左右边框样式了.
border:1px solid red; border-bottom:0px;
3. ul 里面的li 横向居中对齐主要是text-align:center 和display:inline ,如果用float:left,就实现不了.
#div{width: 1000px; height:70px;text-align:center;}
#div ul{list-style:none;}
#div ul li{display:inline}
4. 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。
增加一个清除浮动，让父容器知道高度。增加一个BR并设置样式为clear:both。
<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>
5. 表格边框都一样宽,简单来说就是2条紧挨的平行边框并为1条线,这样看起来更漂亮!
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#DBDBDB" style=" border-collapse:collapse;">
6. 中文字数不同的2行文字对齐:文字放入lable,差的间距用中文全角补齐.
7. 文本域左面的文字与文本域的顶部对齐: <label style="vertical-align: top">内容</label><textarea name="textarea" cols="20" rows="5"/> lable标签添加style="vertical-align: top"样式.
8. IE6 里面无法设置全局的 input 样式,因为ie6 不是国际标准,只能一个一个设class, ie7才支持全局样式 input[type="text"] {样式}; input[type="submit"] {样式}; 没办法的话可以用js 来实现,比如用jquery框架实现很方便.
9. 截取字符串 多余字显示 "..." 的 css 方法:
.ellipsis{display: block;overflow: hidden; white-space: nowrap;text-overflow: ellipsis; text-indent:3px; }text-indent 为文本缩进,可以不要, 注意,要设置lable 或 linkbutton 的width 这样才起效.样式里面添加一个"width:**px;" 也可以,但是重用性就差了.ellipsis（省略）block（块）
10. div布局的时候一个div套一个div,子层设margin的时候会发现父层也跟随移动了位置,这个问题到现在也没具体的搞明白,做测试页也没发现到底是哪里的代码问题.反正大概原因是父层里面没有具体的内容元素(不包括子层的div),解析时就出现了这个bug.暂时的解决办法: a.父层里添加一个无用的元素或代码,如" " , b.给父层设border,宽度不能为0(这个方法不建议用,除非你想显示边框), c.父层style里面加"overflow:hidden"(也许加其他的也可以). 反正一句话就是体现这个层的作用.
|
