代码改变世界

CSS入门1

2012-11-13 16:42  露珠的微笑  阅读(230)  评论(0)    收藏  举报

1、可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素

①样式

行内样式：

内嵌样式：将CSS写在<head></head>

链接样式：<link href="1.css" type="text/css" rel="stylesheet">

导入样式：@import语句放在<style></style>

优先级从高到低：行内样式-->链接样式-->内嵌样式 -->导入样式

②CSS选择器：标记选择器  类别选择器   ID选择器

③选择器的声明：

集体声明--例如：h1,h2,p,div{color:purple;font-size:15px;}

选择器的嵌套--例如：.special ul li{color:red;}

④CSS继承

2、float属性
在 CSS 中，任何元素都可以浮动

三列自适应宽度：

主要是设置float属性：左右两列各设为float:left,right

中间列设置：设置左右margin距离=左右两个div的宽度

代码：

#left{ background: #CCFF66; height:300px; width:120px; float:left;}
#main{ background:#99CC33; height:300px; margin-left:120px; margin-right:120px;}
#right{background:#66FFCC; height:300px; width:120px; float:right}
<div id="left">此处显示  id "left" 的内容</div>
<div id="right">此处显示  id "right" 的内容</div>
<div id="main">此处显示  id "main" 的内容</div>

注意html左右两个div和中间列div的顺序：中间列main一定要放在最后，左右两个div顺序无关

3、IE6的3像素bug

3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现

body { margin:0;}
 #side { float: left; background:#99FF99; height: 300px; width: 120px;}
 #main { background: #99FFFF; height: 300px;}
<div id="side">此处显示 id "side" 的内容</div>
 <div id="main">此处显示 id "main" 的内容</div>

IE6会在两个div中间加上3px的空隙，那么要解决这个问题，请在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效
#side{ float:left; background:#66FFFF; height:300px; width:120px; _margin-right:-3px;}
4、浮动容器高度自适应

overflow:auto; zoom:1

5、解决双倍边距

display:inline;

 4、CSS强制换行与强制不换行

禁止换行：word-break:keep-all;white-space:nowrap;

强制换行：word-break:break-all

5、相对定位与绝对定位

①绝对定位：脱离文档流，可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序，z-index值越高，它显示的越在上层

②相对定位：无论是否移动，元素仍然占据原来的空间，因此移动元素会导致它覆盖其它框

③父容器使用相对定位,子元素使用绝对定位，这样子元素位置不再相对于浏览器左上角，而是相对于父窗口左上角

6、css滑动门技术自适应

7、CSS文字样式

①字体

font-family

②字体大小

font-size

③字体粗细

font-weight

④斜体

font-style:italic;

⑤文字的下划线、顶划线、删除线

下划线——text-decoration:underline

顶划线——text-decoration:overline

删除线——text-decoration:line-through

闪烁——text-decoration：blink   /*IE不支持，Firefox支持*/

希望文字具有有下划线，顶划线：可将underline和overline同时赋值给text-decoration，用空格分开

⑥英文字母大小写：text-transform

text-transform:capitalize//首字母大写

text-transform:uppercase//全部大写

text-transform:lowercase//全部小写

padding-bottom:4px;//文字下方补白

border-bottom:1px solid #9999 //线条

⑦段落文字对齐

水平对齐——text-align(left,right,center,justify)

垂直对齐——vertical-align(取值：top,bottom,middle，XXXX px;对块级元素无效）

⑧行间距和字间距

行间距——line-height:相对值和绝对值（line-height:1.5——会根据当前字体大小的1.5倍）

字母间距——letter-spacing:

 例子：

<p> <span>获</span>得专业的搜索引擎优化诊断分析报告，可以使搜索引擎营销策略更有效。新竞争力 www.jingzhengli.cn 公司特别开发出高效的搜索引擎优化诊断分析系统。
该诊断指标体系由电子商务博士冯英健自行研究的 68 项评价指标构成，是国内目前最权威的搜索引擎优化评价体系。 将搜索引擎优化诊断分析报告配合新竞争力开发的网站专业性评
价系统，可以全方位透彻了解网站的网络营销表现，还可以针对存在的问题获得专家的分析建议。 </p>
<p>网站经营者都希望发布的重要内容如新产品信息或重要新闻被蜘蛛快速抓取并出现在搜索结果中。但现今我们点击搜索结果中的链接，往往进入后发现内容与结果描述不同，这是因为
搜索到的结果是搜索蜘蛛在上次光顾该网站时抓取到的信息，之后该页内容更新，蜘蛛程序却还没有来得及抓取，从而造成的搜索结果与实际内容不符。不过，各搜索引擎都在加快对网站
访问的频率，除了每月一次全面的深度检索，还对频繁更新的网站进行数天甚至每天简单检索一次，以保证搜索结果的时效性。总结起来，Google 对网站信息的更新取决于以下因素： </p>

CSS：
body{ background-color:black;}
p{ 
    font-size:15px; 
    color:white;
}
p span{
    font-size:60px; 
    float:left;//首字下沉 
    padding-right:5px;//首字与右边的间隔
    font-weight:bold; 
    font-family:"宋体"; 
    color:yellow;
}

 设置首字下沉还可以通过伪类别：first-letter(顺带为类另first-line设置第一行的样式）

8、图片效果

①图片边框：border,可以进行具体设置（上下左右4个边框各自设置不同风格样式），如下例子

      border-left-style:dotted; 
      border-left-color:#FF9900; 
      border-left-width:5px;
     
      border-right-style:dashed;
      border-right-color:#0099FF;
      border-right-width:2px;
       
      border-top-style:solid;
      border-top-color:#993300;
      border-top-width:10px; 
      
      border-bottom-style:groove;
      border-bottom-color:#330033;
      border-bottom-width:15px;

图片的对齐通常是通过设置其父元素的text-align与vertical-align属性来实现的,其中vertical-align的值为bottom或者sub时，IE与Firefox的显示结果是不一样的
②设置图片和文字的距离margin:

9、设置背景

①用背景来分块

②页面背景图：background-image;

③背景图片重复方式background-repeat:repeat-y(repeat-x,no-repeat)

④背景图片的位置background-position

⑤固定背景图片background-attachment