CSS基础

jetway

浏览: 483758 次
性别:
来自: 武汉

最近访客更多访客>>

wang_eye

gaozhonghui

xiaoweishu

私奔到冰岛

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

知识库

CSS 浏览器 C C++C#

CSS基础
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

一、如何把样式加入到你的网页。

1、链接外部样式。

<head>
<title>文档标题</title>
<link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css">
</head>

特点：格式与代码分离。

2、定义内部样式块对象。

<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!–
body {font: 10px "Arial"}
h1 {font: 15px/17px "Arial"; font-weight: bold; color: maroon}
h2 {font: 13px/15px "Arial"; font-weight: bold; color: blue}
p {font: 10px/12px "Arial"; color: black}
–>
</style>
</head>
<body>

特点：页面内部使用，方便，下载流量会适当减少。

3、内联定义。

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>

特点：随意、方便。
上面三种方式都可以达到我们需要的效果，主要看我们想达到什么效果，还要看个人习惯，如果想格式和代码分离，就用第一种；如果是一个页面内部的应用，用第二种和第三种方式都可以；第三种方式很随意，但是有一点不足的地方，下面会讲到。

二、语法
样式表语法 (CSS Syntax)
元素 { 属性:值 }
元素的写法将在下面第三部分讲到，属性和值将在第四部分讲到。

三、书写方法
1、直接用标签。

div{
font-size:12px;
}
<div>定义的样式</div>

特点：不用定义额外的元素，直接可以写CSS样式。

2、#开头的代表的是id。

#id{
font-size:12px;
}
<div id="text">定义的样式</div>

特点：可以为单独为某个元素定义的样式。

3、.开头的代表类

.text{
font-size:12px;
}
<div class="text">定义的样式</div>

特点：可以为一个页面里面多个应用此类的元素定义样式。

4、连写方式，中间加空格 (*)

div #text{
font-size:12px;
}
<div id="text">定义的样式</div>
#text p{
font-size:12px;
}

特点：精准定位到某个元素。

<div id="text">定义的样式<p>在p里面的样式</p></div>\

上面四种写法在我们平时用的都比较多，对于第四种是前三种的一种灵活的写法。具体用哪种方式，大家可以根据自己的情况来定。

四、常用的属性。

1、字体：font, font-size, font-family, font-weight, text-decoration, line-height
A. font是一个复合属性。所有后面的这几个属性的值都可以放在font里面用。
B. font-size定义文字的大小。
C. font-family定义字体。
D. font-weight定义文字的粗细。
E. text-decoration定义文字的装饰。
F. line-height定义行高。

2、文本：text-indent, vertical-align, text-align, word-break
A. text-indent，设置对象的缩进。
B. vertical-align，设置对象的上下对齐方式。
C. text-align，设置对象的左右对齐方式。
D. word-break，设置字体的强制换行。

3、背景：background, background-color, background-image, background-position, background-repeat
A. background定义背景的一个复合属性。和上面的font一样，可以把后面这几个属性的值都放在font里面用。
B. background-color定义的是背景的颜色。
C. background-image定义的是背景的图片。
D. background-position定义背景的位置。
E. background-repeat定义背景的是否平铺。

4、定位：position, z-index, top, right, bottom, left.
A. position定位方式。
B. z-index 定义层叠顺序。
C. top, right, bottom 和left表示距离他父级的上边，右边，下边和左边的距离。

5、尺寸：width, height
A. width定义对象的宽度。
B. height定义对象的高度。

6、布局：clear, float, display
A. clear 设置不允许又浮动对象的边。
B. float设置对象浮动及如何浮动。
C. display设置对象是否及如何显示。
D. visibility 设置对象是否显示。

7、外补丁：margin, margin-top, margin-right, margin-bottom, margin-left
A. margin定义外补丁的一个复合属性。同上。
B. margin-top定义对象的上边距离父级的外补丁。
C. margin-right 定义对象的右边距离父级的外补丁。
D. margin-bottom 定义对象的下边距离父级的外补丁。
E. margin-left 定义对象的左边距离父级的外补丁。

8、边框：border, border-top, border-right, border-bottom, border-left
同上（外补丁）。

9、内补丁：padding, padding-top, padding-right, padding-bottom, padding-left
同上（外补丁）。

10、列表：list-style, list-style-image, list-style-position, list-style-type
A.list-style是一个定义列表项目的复合属性。
B. list-style-image定义列表项目的图标。
C. list-style-type定义列表项目的标记。

11、其他：Cursor
这里只讲cursor，就是定义鼠标的显示样式，可以用图标。

12、伪类：:link, :visited, :hover, :active
:link定义链接未被点击时候的样式。
:visited定义链接点击之后的样式。
:hover定义鼠标移动到链接上的样式。
:active定义链接被激活时候的样式。
伪类只讲这四个，因为这四个用的最多，而且很多人容易出错，这里强调一个地方，书写顺序。在CSS里面写这四个伪类的时候，就按上面的顺序来写，不要颠倒顺序，否则可能达不到我们想要的效果。

13、伪对象：:first-letter
这里只讲这一个伪对象，他的作用是定义对象的第一个字母的样式。

14、声明：!important
提升应用样式的优先权。这个声明在firefox和ie7上面支持，在ie6上面不支持。他的主要作用是用来调整不同浏览器显示效果的差异。

五、单位

1、长度：Px
px象素，in英寸等。用得最多的是象素px。
2、颜色：rgb(RGB),#RRGGBB
Rgb(255,255,255)，#FFFFFF
3、Color name：red, blue

六、注意
1、html代码和css代码尽量小写。
2、子随父姓，就近原则。

一、善用css缩写规则
/*注意上、右、下、左的书写顺序*/
1. 关于边距（4边）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px （省略的左等于右）
1px 2px (省略的上等于下)
1px （四边都相同）

2. 简化所有：
*/ body{margin:0}------------表示网页内所有元素的margin为0
#menu{ margin:0}------------表示menu盒子下的所有元素的margin为0

3. 缩写（border）特定样式：
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;

4. 关于文字的缩写规则：
Font-style:italic; 斜体形式
Font-variant:small-caps/normal; 变体样式：小型大写字母/正常
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
Font-family:arrial,sans-serif,verdana;
缩写成：
Font:italic small-caps bold 12px/1.5em arrial,sans-serif;
注意：Font-size和Line-height用斜杠组合在一起不能分开写。

5. 关于背景图片的：
Background:#FFF url(log.gif) no-repeat fixed top left;

6. 关于列表：
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
缩写成：
List-style:none inside url(filename.gif)

二、运用4种方法来引入CSS样式
1.link
<link rel=”stylesheet” type=”text/css” href=”a.css”>
rel 关系
type 数据类型,有多种
href 路径
部分浏览器支持候选样式,关键字:alternate:
<link rel=”stylesheet” type=”text/css” href=”a.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”b.css”>
<link rel=”alternate stylesheet” type=”text/css” href=”c.css”>
2.内部样式块
<style>
<!–
h1{color:red;}
–>
</style>
3.@import
@import url{a.css}
注意:此指令必须放在<style>容器中,并且在所有样式之前
建议放在一个html注释中,<!– –>浏览器会不显示注释内的内容,而import等css代码能正常工作
4.内联样式
<p style=”color:red;”>
选择器是css的一个基本概念，基本规则如下：
1.规则结构：
h1 {color:red;}
选择器 {属性:值;}
这类是元素选择器，基本可以包括所有html的元素
属性值可以包括多个元素，如：border：1px solid red;
常用语法
1)分组：
选择器和声明都可以分组:
h1,h2,h3{color:red;background:#fff;} ,选择器用“,”分割开,属性用”;”分割
2)类选择器,即通过class=”stylename”应用的声明
定义:
.stylename{color:red;}
注意:
在html中可以使用多类选择:如class=”cn1 cn2 cn3″
3)ID选择器,即与id属性对应的样式
定义:
#a{color:red;} ->这个定义对用id=”a”的元素
2.这部分都是我们常见的css语法，下面谈一下我们不常见的选择器语法
1)父子结构,跟文档结构图对应
如p span{border:1px solid red;}对应的是<p>下面的<li>标签,这个很用用途,可以准确定位.
一些特殊应用(IE7支持):
(1) p > span{},匹配所有p下所有的span
(2) p + span{} ,匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签
2)属性选择器:(注意:属性选择器ie7才开始支持,以下版本并不支持,其他的浏览器基本可以)
语法:img[alt]{border:1px solid;}
表示对应有alt属性的img标签,当然可以支持多个属性对应,如img[alt][title]{};表示这个2个属性都有的img标签,也可以与具体值对应:如:img[alt=”摄影”]{};
属性选择器中的高级应用,特殊匹配:
(1)img[class~=”b”], ~= : 与属性中的一个值对应的,即与<img class=”a b c”>对应
(2)[class^=”a”],以a开头的
(3)[class$=”a”],以a结束的
(4)[class*=”a”],包含a的
(5)[class|=”a”],等于a或以a开头的
3)伪类和伪元素
日常使用中主要是<a>标签的几个伪类:link:hover:active:visited
以及:first-child:first:before:left:right:lang:focus:fist-line等等
注意:动态伪类可以应用到任何元素,如,input:focus{background:red;}当input标签获得焦点时背景变红
以上语法组合使用,就能实现定位准确、简单间接的样式了。

分享到：

AspriseOCR破解用Java实现网络图片解析 | Nutch

2010-06-13 15:43
浏览 1353
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS基础

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS基础

评论

发表评论

相关推荐

Apache + Tomcat集群配置详解

maven eclipse

ZooKeeper API

给DIV添加滚动条

jboss数据源

Apache+Jobss cluster安装配置

Spring 事务

Apache 负载均衡+Tomcat集群

ESB企业服务总线

定庄记忆法

Android开发环境搭建全程演示（jdk+eclip+android sdk）

jbpm

企业信息化十年

首先，遍历map有以下方法：

职场能力

tomcat 配置

YUI：带checkbox的TreeView的赋值与读值

Spring中的Assert工具类

comments

tomcat 配置

最近访客更多访客>>