YOYO的最新BLOG文章

Oct
28

这是上周为公司人员培训而准备的CSS教程,这次的教程比上次CSS培训详细了不少,希望对初学CSS的朋友有所帮助。

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

一、如何使用CSS样式

1、链接外部样式(推荐)

<link href="http://www.dhtmlet.com/dhtmlet.css" rel="stylesheet" type="text/css" />

特点:样式与代码分离。2、定义内部样式块对象

<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>

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

3、内联定义。

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

特点:随意、方便。

推荐第一种调用方式。伪类的几种样式是无法通过第三种样式定义的。

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

三、选择符
通配选择符、类型选择符、属性选择符、包含选择符、子对象选择符、类选择符ID选择符、选择符分组、伪类和伪对象选择符。

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;
}
<
p id="text">定义的样式</p>
#text p{
font-size:12px;
}

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

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

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

阅读全文 ->

Tags: ,
Posted in HTML | CSS, 刀光剑影
Jun
21

对于公司内部的CSS培训,营销部已经和我说过多次了,我也拖了好几周了,这次实在是不能再拖了,于是抽昨天和今天的时间把培训的内容整理了一下。

对于CSS的使用,应该说是还算熟练,但是让我来培训别人,还真有点不知道从何讲起。于是又学了很多人的老一套,从CSS是什么讲起(别笑,你得让我开头啊),不过后面的内容基本上是直奔主题了。讲完CSS是什么之后,就是CSS的调用方式和CSS的语法,然后就是CSS的一些属性了。

在搞这次培训之前,我一直都自以为是的认为自己的CSS应该相当不错了,今天才发现原来还有这么多不知道,真汗颜[emot]sweat[/emot]。不过通过这次整理培训讲稿,不但复习了之前学过的知识,又学到了一些新的知识,收获还是蛮多的。说实话,苏沈小雨的CSS文档做得相对好,无论是讲解还是实例都做得超级棒,可以说是我见过的最好的CSS文档了,我一直当宝贝保留着。

明天就要培训了,今天就到这里吧,明天就看我上台的了,呵呵。。。

Tags: ,
Posted in 走狗的路