这是上周为公司内部培训的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>\
上面四种写法在我们平时用的都比较多,对于第四种是前三种的一种灵活的写法。具体用哪种方式,大家可以根据自己的情况来定。
阅读全文 ->