【CSS教程】努力更新中
本帖最后由 点烟续命 于 2013-12-24 20:08 编辑 <br /><br /><head><style>
#table_01{
border:5px #000000 solid;
width:720px;
height:1000px;
}
#memu_01{
font-family:微软雅黑;
font-size:35px;
}
.title{
text-align:left;
padding-left:20px;
font-size:25px;
}
.content{
text-align:left;
padding-left:25px;
font-family:微软雅黑;
color:#000000;
background-color:#ACACAC;
}
.table_02 td{
text-align:left;
padding-left:25px;
font-family:微软雅黑;
color:#000000;
background-color:#ACACAC;
}
.textarea{
overflow-y:visible
}
</style>
</head>
<body>
<table id="table_01" background=http://img15.poco.cn/mypoco/myphoto/20131026/11/1741445762013102611115781THX.jpg align=center >
<tr>
<td align=center>
<h1 id="memu_01">第一课：CSS样式的基础</h1>
<h2 class="title">目标:</h2>
<hr size=3px color=green />
<p class="content">
一、Web标准的构成<br/>
二、理解表现和结构分离<br/>
三、什么是CSS，CSS语法<br/>
四、CSS在网页中的应用方式
</p><br/>
<h2 class="title">一、Web标准的构成：</h2>
<hr size=3px color=green />
<table class="table_02">
<tr><td>
Web标准主要由三部分组成：结构(Structure)、表现(Presentation)和行为（Behavior）
<ul class="li">
<li>结构标准对应的主要语言是XHTML/HTML</li>
<li>表现标准对应的主要语言是CSS</li>
<li>行为标准对应的主要语言是JavaScript</li>
</ul>
制作成一个静态页面，主要用到的就是HTML与CSS,制作成一个动态页面，需要加入JavaScript语言,我们主要学习制作静态页面，已经足够了。
</td></td>
</table><br/><br/>
<h2 class="title">二、理解表现和结构的分离：</h2>
<hr size=3px color=green />
<table class="table_02">
<tr><td>
Web标准的好处之一是”理解表现和内容分离”,那这到底是什么意思呢？
首先我们必须先明白一些基本的概念：内容、结构、表现和行为。
<ol class="li">
<li>内容：就是制作者放在页面内真正想让访问者浏览的信息,简单说我们帖子里的文字、图片、FLASH等</li>
<li>结构：使内容更加具有逻辑性和易用性（类似于：1级、2级标题、正文、列表等把他们称为结构），例如我们帖子里的表格、框架等，这就好比一个人的模型，不过是裸体。</li>
<li>表现：用于修饰内容的外观的样式的东西就叫做表现（或者样式），我们用CSS就好比给裸体的结构传上衣服，让它变得漂亮、具体化。</li>
<li>行为：对内容的交互及操作效果，如通过Javascript判断表单等提交，这部分我们目前不做学习。</li>
</ol>
</td></td>
</table><br/><br/>
<h2 class="title">三、什么是CSS以及CSS语法：</h2>
<hr size=3px color=green />
<table class="table_02">
<tr><td>
一、 CSS概念：<br/> CSS是Cascadinig Style Sheets（层叠样式表）的简称。
更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在你丰富的想象力下千变万化，实际上CSS的代码都是由一些最基本的语句构成的。<br/>
CSS可以作为HTML，XHTML，XML的样式<strong><u>控制语言</u></strong><br/><br/>
二、CSS语法结构：<br/>
      参数说明：
<ol class="li">
<li>选择符(Selector):指明这组样式所要针对得对象。可以是一个XHTML标签，如body,h1;也可以是定义了特定的id或class的标签，如#main选择符表示选择<div id=”main”>，即一个被指定了main为id的对象。</li>
<li>属性(proprety):选择符的样式属性，如颜色、大小、定位、浮动方式等。</li>
<li>值(value):是指属性的值。</li>
<li>同时可以为一个选择符定义多个属性，每个属性之间用分号”；”分隔。</li>
</ol>
</td></td>
</table><br/><br/>
<h2 class="title">四、CSS在网页中的应用方式：</h2>
<hr size=3px color=green />
<table class="table_02">
<tr><td>
这里我们主要理解两种方式，因为我们做贴，都是在既定的网页中，所以后两种方式主要是制作网页，而我们只要掌握前面两种即可。<br/><br/>
网页中加CSS的方式有四种：
<ol class="li">
<li>内联式样式表：直接写在现有的标记中，如：<br/>
<textarea class="textarea" readonly="readonly" rows="3" cols="60"><p style=”color:red”>这里文字是红色的</p></textarea></li>
<li>嵌入式样式表：使用<xmp>"<style> </style>"</xmp>标签嵌入到HTML文件的头部中<head>标记中，如：<br/>
<textarea class="textarea" readonly="readonly" rows="14" cols="60">
<head>
<style type=”text/css”>
body{
background:white;
Color:black;
}
</style>
</head>
</textarea>
</li>
<li>外部链接式”样式表”：将样式表写在一个独立的.CSS文件中，然后在页面head区<head>标记内用<link>标签调用它，主要用于实现表现与结构分离，如:<br/>
<textarea class="textarea" readonly="readonly" rows="4" cols="60"><link href=”main.css” rel=”stylesheet” type=”text/css”/></textarea></li>
<li>导入式”样式表”：导入式样式表与链接式样式表的功能基本相同，只是语法和动作方式上略有不同，同样导入样式代码写在<head>标记内，如：<br/>
<textarea class="textarea" readonly="readonly" rows="7" cols="60">
<style type=”text/css”>
@import url(“basic.css”);
</style>
</textarea>
</li>
</ol>
后面两种方法不要求大家掌握，只是让大家了解下，主要是学会用1、2两种方法。
</td></td>
</table>
</td>
</tr>
</table>
</body>
</html>
<div align="right"><embed style="WIDTH: 50px; HEIGHT: 20px; MARGIN-RIGHT: 20px" type="application/x-shockwave-flash" src="http://www.51119.com/play/swf/2.swf?file=http://io.poovv.com/ce7ea5d2.mp3&autoStart=true&repeatPlay=true&backColor=000000&frontColor=ffffff&songVolume=120" menu="false" wmode="transparent" /></div>
{:2_86:}辛苦啦 点烟MM 点烟老师我来学习了，今天早退了，不好意思，我来补课来了 点烟好有心。俺会认真看看的 惭愧，俺不懂，但是想学。 本帖最后由 点烟续命 于 2013-11-11 10:29 编辑 <br /><br /><head>
<style>
#table_01{
border:5px #000000 solid;
width:720px;
height:2000px;
}
#h1_02{
font-family:微软雅黑;
font-size:35px;
}
.title{
text-align:left;
padding-left:20px;
font-size:25px;
}
.content{
text-align:left;
padding-left:25px;
font-family:微软雅黑;
color:#000000;
background-color:#ACACAC;
}
.table_02{
text-align:left;
padding-left:25px;
font-family:微软雅黑;
color:#000000;
background-color:#ACACAC;
}
.textarea_01{
overflow-y:visible
}
</style>
</head>
<body>
<table id="table_01" background=http://img15.poco.cn/mypoco/myphoto/20131026/11/1741445762013102611115781THX.jpg align=center >
<tr>
<td align=center>
<h1 id="h1_02">第二课：CSS选择符及优先权</h1>
<h2 class="title">目标:</h2>
<hr size=3px color=green />
<p class="content">
一、熟悉CSS选择符类型和使用<br/>
二、CSS样式特点<br/>
三、CSS样式的优先权<br/>
</p><br/>
<h2 class="title">一、CSS选择符的类型：</h2>
<hr size=3px color=green />
<table class="table_02">
<tr><td>
因为我们制帖并不是很繁杂，所以我们主要学习1、2、3、5四个简单的选择器就够了，其他的选择器供参考。
<br/><br/>
<ol>
<li>标签（类型）选择符：<br />就是针对HTML文档中的标签（那些html标签应用哪些CSS样式）,如：<br />
<textarea class="textarea_01" readonly="readonly" rows="14" cols="60">
p{
font-size:12px;
}
div{
background:blue;
}
以上这些都是针对某一种HTML文档标签。
</textarea>
</li><br/><br/>
<li>ID选择符：<br />
只想针对某一个元素进行控制，使用ID选择符。<br />ID在网页中具有唯一性，也就是在网页中只出现一次的内容,ID选择器不要以数字开头。<br />
#ID名称{属性:值},
如：<br /><textarea class="textarea_01" readonly="readonly" rows="6" cols="60">
#two{
font-weight:bold;
font-size:24px;
}
</textarea>
</li><br/><br/>
<li>
类选择符：<br />
可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式，类以英文“.”开头，后面的名字自己定义，类定义后还需要在网页中加入class=类名称，加以调用。如：<br />
<textarea class="textarea_01" readonly="readonly" rows="6" cols="60">
.warning{
属性:值
}
<p class=＂warning＂>．．．</p></textarea><br />
同时给某个元素应用多个类<br/>
<textarea class="textarea_01" readonly="readonly" rows="3" cols="60"><p class=＂a1 a2＂>．．．</p></textarea><br/>
</li><br/>
<li>
通配选择符：*{属性：值}， 用于定义所有的HTML元素，作用范围很广，<br/>但是，它的
效率最低，它必须读取所有代码一次，慎用(我们做帖基本不用)。
</li><br/><br/>
<li>包含选择符（嵌套/派生）：语法e1 e2{属性：值}，
含义是所有被e1包含的e2，
如：<br/>
<textarea class="textarea_01" readonly="readonly" rows="10" cols="60">
table td{
属性：值
}
#header li a{
属性：值
}
</textarea><br/>
优点就是不需要再被单独为ID为header的标签内，li标签内的a标签单独定义class或者id，CSS代码就少了，同样也优化了CSS代码
</li><br/><br/>
<li>
选择符分组（集体控制）：将同样的样式定义用于多个选择符，选择符之间用逗号分隔。如：<br/>
<textarea class="textarea_01" readonly="readonly" rows="6" cols="60">
p, div, .waring{
属性：值
}
</textarea>
</li><br/><br/>
<li>
标签指定式选择符：如果既想使用id或class,也想同时使用标签选择符<br/>
H1#content{}表示针对所有id为content的h1标签<br/>
H1.p1{}表示针对所有class为p1的h1标签<br/>
</li><br/><br/>
<li>
组合选择符：将以上选择符进行组合使用<br />
H1.p1,#content h1{}
</li>
</ol>
</td></tr>
</table><br/><br/>
<h2 class="title">二、CSS样式特点：</h2>
<hr size=3px color=green />
<table class="table_02">
<tr><td>
<ol>
<li>继承：</br>
网页中子元素，将继承父元素的某些样式。</br>
例如：要控制段落P中的文字大小，可以直接给body标记加样式。</br>
</li>
<li>层叠：</br>
网页中子元素定义了与父元素额相同的样式，则子元素的样式将覆盖掉父元素的样式。
后面定义的样式，会覆盖前面定义的样式。</br>
</li>
</ol>
</td></tr>
</table><br/>
<h2 class="title">三、CSS样式的优先权：</h2>
<hr size=3px color=green />
<table class="table_02">
<tr><td>
<ul>
<li>四种方式的优先权：<br/>
内联式【行内样式】>内嵌式【内部式】>链接式【外部式】>@import导入式<br />
CSS优先权：就近原则,
作用范围越小，优先权越高。
离要修饰目标越近的样式优先权越高。
</li>
<li>选择符优先权：
<br/>
行内>id>class>标签选择符<br/>
我们可以采用!important语法来提升重要性【优先权】<br/>
<textarea class="textarea_01" readonly="readonly" rows="10" cols="60">
P{
Background-color:#ffcccc;
!important; ie6不支持该语句
Background-color:#66cccc ;
}
</textarea>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> 点烟有心了，太感谢了，话说这签名也太有性格了吧 本帖最后由 点烟续命 于 2013-11-11 10:49 编辑 <br /><br /><head>
<style type="text/css">
#table_03{
width:720px;
height:1300px;
}
#table_03 td{
text-align:left;
font: normal 15px Georgia,serif;
font-family:微软雅黑;
vertical-align:top;
padding-top:10px;
padding: 10px 20px 0px 20px;
color:#000000;
}
#h1_03{
text-align:center;
font-size:35px;
}
.title_03{
font-size:20px;
}
#img_03{
text-align:center;
}
.font_03{
background-color:#acacac;
}
.table_04{
background: #fff;
width:655px;
border-collapse:collapse;
}
</style>
</head>
<body>
<tableid="table_03" background=http://img15.poco.cn/mypoco/myphoto/20131026/11/1741445762013102611115781THX.jpg align=center style="border:5px solid #000000" align=center>
<tr>
<td>
<h1 id="h1_03">第三课：css盒子模型、边距及边框属性</h1>
<p class="title_03">
目标：
</p>
<hr color=#008000 /><br/>
<p class="font_03"><ul>
<li>
熟悉CSS盒子模型概念
</li>
<li>
掌握padding/margin的使用方法
</li>
<li>
熟悉CSS控制边框样式
</li>
</ul></p><br/>
<p class="title_03">
CSS盒子模型：
</p>
<hr color=#008000 /><br/><br/>
<p id=img_03>
<img src="http://img15.poco.cn/mypoco/myphoto/20131111/09/17414457620131111091238023.jpg" />
</p><br/>
<p class="font_03">
W3C组织建议把所有网页上的对象都放在一个盒子中——盒子模型<br/>
设计师可以通过创建定义来控制这个盒子的属性，这些对象包括段落、列表、标题、图片以及层（div）<br/>
盒子模型主要定义四个区域：内容（content）、填充（padding）、边框（border）和边界（margin） <br/>
这里的边界我们也称之为：外边距、外部丁；填充也叫：内边距、内补丁<br/>
一个盒子的总宽度(高度)=margin+border+padding+内容设定的宽度(高度)<br/>
这里要注意的地方就是设定了margin或者padding等，都必须算入总和里。
</p><br/>
<p class="title_03">CSS 内外边距属性(Margin/padding)</p>
<hr color=#008000 /><br/>
<table class="table_04" border=1 bordercolor=#000>
<tr>
<td><b>功能</b></td> <td><b>语法</b></td>
</tr>
<tr>
<td>设置元素的宽度</td> <td>Width:100px</td>
</tr>
<tr>
<td>设置元素的高度</td> <td>Height:100px</td>
</tr>
<tr>
<td>设置元素的某一个方向外边距</td> <td>Margin-top/right/bottom/left:10px</td>
</tr>
<tr>
<td>通过参数个数不同来设置元素的外边距</td> <td>Margin:10px 上下左右4个方向<br />Margin:10px 20px 上下 左右<br />Margin:10px 20px 30px 上 左右 下<br/>Margin:10px 20px 30px 40px 上 下 左 右</td>
</tr>
<tr>
<td>设置元素的内边距</td> <td>Padding:上 右 下 左</td>
</tr>
</table><br/>
<p class="title_03">CSS控制边框属性(border)</p>
<hr color=#008000 /><br/>
<table class="table_04" border=1 bordercolor=#000>
<tr>
<td><b>功能</b></td> <td><b>语法<b></td>
</tr>
<tr>
<td>设置边框粗细</td> <td>Border-top-width:12px;</td>
</tr>
<tr>
<td>设置边框样式</td> <td>Border-top-style:solid、dashed</td>
</tr>
<tr>
<td>设置边框颜色</td> <td>Border-top-color:#000000</td>
</tr>
<tr>
<td>设置某一个边框属性的简洁方式</td> <td>Border-边框位置：线宽 线型 颜色</td>
</tr>
<tr>
<td>设置某一元素四条边框属性的间接方式<br/>【仅限于四条边框属性完全相同】</td> <td>Border:线宽 线型 颜色</td>
</tr>
</table><br/>
<p class="font_03">border-collapse 属性设置表格的边框是否被合并为一个单一的边框<br/>border-spacing 属性设置相邻单元格的边框间的距离(仅限于边框分离)<br/>PS：另外必须提及一点的是外边距合并，具体上课时说</p>
</td>
</tr>
</table><br/><br/>
</body>
</html>
看见字母我头疼啊‘不知道我能不能学会{:2_77:}
页:
[1]