CSS 学习积累

来源：互联网发布：永恒之塔多玩数据库编辑：程序博客网时间：2024/04/29 16:02

本文不讲详细，只讲注意事项，需要看详细，地址如下：

http://www.divcss5.com/rumen/r309.shtml

position语法：
position : static absolute relative

position参数：
static : 　无特殊定位，对象遵循HTML定位规则
absolute: 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative: 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

position说明：
设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。

通常我们使用position:absolute；position:relative进行绝对定位布局，通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿，更加经验适当使用，用于该使用地方。

在绝对定位时候我们可以使用css z-index定义css层重叠顺序。

DIV重叠

要实现DIV重叠，并改变实现DIV盒子层叠重叠顺序，我们对父级使用position:relative,对子级使用position:absolute、z-index（重叠顺序）、left，right，top，bottom绝对定位相当于父级具体位置。

left ，right， top ，bottom定位

这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative此取值方可生效

纯英文文章，首字母大写

text-transform 值：
Capitalize 英文拼音的首字母大写
Uppercase 英文拼音字母全大写
Lowercase 英文拼音字母全小写

CSS text-transform语法结构
div{text-transform:capitalize}

汉字首字放大样式

p:first-letter
{
color:red;
font-size:20px;
}

<p>我们的大中国，好大的一个家！</p>

注意：IE8,9,10都可能不支持该属性，可以选用以下办法:

例如：

<div id="brithContent" class="text2">
<p>我们的大中国，好大的一个家！</p>

</div>

jQuery(document).ready(function(){
var brithc=jQuery("#brithContent>p").text();
var fnum=brithc.substring(0,2);
var other=brithc.substring(2,brithc.length);
jQuery("#brithContent>p").html("<span id='bfletter'>" + fnum + "</span>" + other);

});
</script>

#bfletter
{
font-size:24px;

}

居中属性讲解：

整体布局的居中：

假如网页宽度为700px，最外层css样式为的class="weicheng"，那设置应该这样“.weicheng{margin:0 auto; width:700px;}

介绍使用css属性让网页的背景居中：
这里居中就包括了左右居中与上下居中，居中代码如下：
body{BACKGROUND: #FFF url(logo.gif） no-repeat center;} //这段话意思就是让logo.gif这个图片设置背景不重复（no-repeat ），并将居中（center）这个居中是左右居中，而垂直不需要设置，自动会居中。

图片居中是vertical-align:middle;

文字居中就要靠设置行高方法居中文字内容，这里我们设置为高度是120px，需要设置line-height:120px;这样就通过css属性类样式来实现文字与图片的上下左右居中。

左缩进：

text-indent 后面可以直接写像素，在遇到汉字需要左缩进2个汉字的时候也可以用我们熟知的默认缩进 2em 。

divcss5{ text-indent:35px}

通常text-indent缩进属性将对段落首行开头文本文字进行缩进显示。如果使用html br换行标签，第二个换行开始也不会出现缩进效果。如果使用了html P段落标签段落换行，将会出现每个p段落换行开头都将缩进。

text-decoration下划线CSS单词值参数：
none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　贯穿线
overline : 　上划线

text-decoration:none 无装饰，通常对html下划线标签去掉下划线样式
text-decoration:underline 下划线样式
text-decoration:line-through 删除线样式-贯穿线样式
text-decoration:overline 上划线样式

在HTML u标签下划线标签“U”即可对对象文字加html下划线。<u></u>

常用cursor光标说明

1）、div{ cursor:default }默认正常鼠标指针
2）、div{ cursor:hand }和div{ cursor:text } 文本选择效果
3）、div{ cursor:move } 移动选择效果
4）、div{ cursor:pointer } 手指形状链接选择效果
5）、div{ cursor:url(url图片地址) }设置对象为图片

案例

p { cursor: text; } /* css注释：设置鼠标移动到html p对象时鼠标变为文本选择样式 */
a { cursor: pointer; } /* css注释：设置鼠标移动到a超链接对象时鼠标变为手指形状（链接选择） */
body { cursor: url("小图片地址")} /* 设置鼠标指针默认为一个小图片 */

letter-spacing（字间隔）

font-variant : normal | small-caps

CSS参数：
normal : 正常的字体
small-caps : 让字母变成小型的大写字母字体并缩小字母

在DW软件中字体只被大写，而在浏览器中将会缩小并大写字体

注意DIVCSS5对象内内容，被css设置font-variant后，对象内所有无论是大写字母还是小写字母，最终全显示为大写的字母

font-variant将文本里英文转为全大写，并以缩小方式显示。css font-variant实现全大写但英文或拼音字母会被缩小，如果要实现CSS英文只大写而不缩小请用css text-transform字体大小写样式

text-overflow参数值和解释：
clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）

CSS中“*”号是通配符，即指，网页html中所有标签意思，例如：*{ padding:0; margin:0; font-family:"黑体"}

在CSS选择器内星号+CSS样式属性单词，一般区别IE6和IE8、IE6和FF，IE7和IE8，IE7和FF浏览器之间属性CSS HACK。例如：.divcss5{border:1px solid #000;width:220px;*width:300px;}

white-space语法：
white-space : normal nowrap

white-space参数：
normal : 　默认处理方式
nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

让文字不自动换行，无论CSS宽度设置多少，所有文字都在一行内显示。特别是标题列表，我们想一行只显示一条标题内容，而有时宽度有限标题文字多了width(宽度)又有限，这样会造成文字自动换行，这个时候我们可以使用white-space样式让他一排显示不换行，当然我们为了隐藏超出的文字内容我们可以再加一个css overflow:hidden样式。

@import语法结构
@import + 空格+ url(CSS文件路径地址);

1）、在html中
<style type="text/css">
@import url(CSS文件路径地址);
< /style>

@import在html中使用截图

2）、在css中
直接使用
@import url(CSS文件路径地址);

import在css文件中使用
import在CSS代码或CSS文件中使用截图

在css和html中均可以使用@import

0 0