网页设计 第六讲 CSS基础知识
手把手教你学习HTML和CSS的基础知识
手把手教你学习HTML和CSS的基础知识第一章：HTML基础知识HTML，全名为超文本标记语言（HyperText Markup Language），是用于创建网页的标准标记语言。
学习HTML是学习网页开发的第一步。
本章将介绍HTML的基础知识。
1.1 HTML的起源与发展HTML最早由蒂姆·伯纳斯-李（Tim Berners-Lee）于1990年创造，并在1993年发布了HTML 2.0的第一个正式规范。
随着时间的推移，HTML不断发展，现在最新的版本是HTML5。
1.2 HTML文档的结构HTML文档由HTML标签组成，标签用于定义文档的结构和呈现内容。
一个HTML文档通常包含<head>、<body>和</html>等标签。
1.3 HTML标签的基本语法HTML标签由尖括号包围，并以起始标签和结束标签的形式出现。
例如，<p>是一个起始标签，</p>是一个结束标签。
还有一些标签是没有结束标签的，如<br>标签。
1.4 HTML元素与属性元素是指由起始标签、内容和结束标签组成的整体。
属性提供了关于元素的额外信息，如元素的样式、链接地址等。
HTML元素和属性中的内容是由标签和值组成的。
1.5 常用的HTML标签HTML有很多常用的标签，本章只介绍一些基础的标签。
如<h1>到<h6>标签用于定义标题；<p>标签用于定义段落；<a>标签用于创建超链接等。
第二章：CSS基础知识CSS，全名为层叠样式表（Cascading Style Sheets），是用于网页设计的样式表语言。
学习CSS可以为HTML文档添加样式和布局。
本章将介绍CSS的基础知识。
2.1 CSS的起源与发展CSS最早由赖耶斯博士（Håkon Wium Lie）和贝尔纳斯·卡尔（Bert Bos）于1996年创造，并在1997年发布了CSS1的第一个正式规范。
CSS超全笔记（适合新手入门）
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
六、CSS入门
六、CSS⼊门CSS核⼼基础CSS样式规则选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}CSS代码结构中的特点CSS样式中的选择器严格区分⼤⼩写，属性和值不区分⼤⼩写，按照书写习惯⼀般将“选择器、属性和值”都采⽤⼩写的⽅式。
多个属性之间必须⽤英⽂状态下的分号隔开，最后⼀个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英⽂状态下的引号。
在编写CSS代码时，为了提⾼代码的可读性，通常会加上CSS注释。
在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可⽆。
属性和属性值之间不允许出现空格，否则浏览器会报错引⼊CSS样式表优先级：如果三种样式同时控制我们的内容：⾏内优先级最⾼外部样式，内部样式：谁离着内容近，谁优先级⾼1、⾏内式⾏内式也称为内联样式，是通过标记的style属性来设置元素的样式<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>style是标记的属性，实际上任何HTML标记都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标记及嵌套在其中的⼦标记起作⽤。
2、内嵌式内嵌式是将CSS代码集中写在HTML⽂档的<head>头部标记中，并且⽤<style>标记定义<style>标记定义，其基本语法格式如下：<head><style type="text/css">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head><style>标记⼀般位于<head>标记中<title>标记之后，也可以把他放在HTML⽂档的任何地⽅。
网页设计制作知识点
网页设计制作知识点1. 基础知识1.1 HTML（Hypertext Markup Language）HTML是用于构建网页的标记语言，通过使用各种标签和属性，可以定义网页的结构和内容。
常见的HTML标签包括<head>、<body>、<div>、<p>等。
1.2 CSS（Cascading Style Sheets）CSS用于控制网页的样式和布局，通过将样式属性应用于HTML元素，可以改变它们的颜色、字体、大小等外观特性。
常见的CSS属性包括color、font-family、margin、padding等。
1.3 JavaScriptJavaScript是一种用于增加网页交互性的脚本语言，可以通过在网页中嵌入JavaScript代码来实现动态效果、表单验证等功能。
2. 响应式设计响应式设计是指根据设备的屏幕尺寸和分辨率，自动调整网页的布局和内容，以确保在不同设备上都能正常显示和使用。
常见的响应式设计技术包括媒体查询（Media Queries）、流体布局（Fluid Layout）和弹性图片（Flexible Images）等。
3. 网页导航3.1 导航栏导航栏用于展示网站的主要导航链接，通常位于页面的顶部或侧边。
可以使用HTML和CSS创建导航栏，并为每个链接添加交互效果。
3.2 面包屑导航面包屑导航用于显示当前页面在网站结构中的位置，让用户可以方便地进行导航和返回。
可以使用HTML和CSS创建面包屑导航，并为每个链接添加合适的指向。
4. 网页布局4.1 盒子模型盒子模型是用于布局和定位网页元素的基础概念，每个HTML 元素都可以看作是一个矩形的盒子。
通过设置盒子的宽度、高度、内边距（padding）和外边距（margin），可以精确控制元素在网页中的位置和间距。
4.2 栅格系统栅格系统是一种用于创建响应式网页布局的技术，将页面划分为多个均等的列。
CSS知识点总结
CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。
网页设计代码css知识点
网页设计代码css知识点在网页设计中，CSS是一种重要的编程语言，用于控制网页的样式和布局。
掌握CSS知识点，能够让我们更好地设计和优化网页，提升用户体验。
本文将介绍一些常见的CSS知识点，以帮助读者更好地理解和应用CSS。
一、CSS选择器CSS选择器用于选择HTML文档中的元素，并为其应用样式。
常见的CSS选择器包括：1. 元素选择器：通过元素名称选择元素。
例如，p选择所有的段落元素。
2. 类选择器：通过class属性选择元素。
例如，.intro选择所有class 为intro的元素。
3. ID选择器：通过id属性选择元素。
例如，#header选择id为header的元素。
4. 后代选择器：选择元素的后代元素。
例如，ul li选择所有ul元素中的li元素。
5. 伪类选择器：用于选择特定状态的元素。
例如，:hover选择鼠标悬停在元素上的状态。
二、盒模型在CSS中，每个元素都被看作是一个矩形的盒子，盒模型由四个部分组成：内容(content)、填充(padding)、边框(border)和外边距(margin)。
1. 内容：元素的实际内容，包括文本和图像等。
2. 填充：元素内容和边框之间的空白区域。
3. 边框：填充区域的边界。
4. 外边距：边框和相邻元素之间的空白区域。
通过CSS中的属性可以调整盒模型的大小、颜色和边框样式等。
三、尺寸和定位1. 宽度和高度：使用width和height属性设置元素的宽度和高度。
2. 相对定位：使用position属性设置元素的定位方式。
常见的定位方式有相对定位(relative)和绝对定位(absolute)。
3. 浮动：使用float属性将元素从正常的文档流中移动，并使其向左或向右浮动。
四、文本样式1. 字体样式：使用font-family属性设置字体样式。
例如，font-family: Arial, sans-serif;设置字体为Arial或者sans-serif。
网页设计期末知识点总结
网页设计期末知识点总结一、HTML基础知识1. HTML是什么，它的作用和用途2. HTML元素的基本语法和结构3. HTML标签的分类和用法4. HTML实体字符的表示和使用5. HTML的注释和注释的写法6. HTML文档的基本结构和布局7. HTML中常用的元素和属性二、CSS基础知识1. CSS是什么，它的作用和用途2. CSS的基本语法和结构3. CSS的选择器和选择器的种类4. CSS的样式和样式的应用5. CSS的盒模型和盒模型的属性6. CSS的浮动和定位7. CSS的布局和布局的种类8. CSS的颜色和背景9. CSS的文本和字体10. CSS的边框和边框的样式11. CSS的过渡和动画12. CSS的响应式设计三、JavaScript基础知识1. JavaScript是什么，它的作用和用途2. JavaScript的基本语法和结构3. JavaScript的变量和数据类型4. JavaScript的运算符和表达式5. JavaScript的流程控制和条件语句6. JavaScript的数组和对象7. JavaScript的函数和作用域8. JavaScript的事件和事件的处理9. JavaScript的DOM操作和DOM的结构10. JavaScript的定时器和动画四、响应式设计1. 什么是响应式设计，它的作用和用途2. 响应式设计的基本原理和实现方式3. 媒体查询和媒体查询的语法4. 移动端设计和移动端适配5. 响应式图片和响应式视频五、网页优化1. 什么是网页优化，它的作用和用途2. 网页加载速度的优化和优化的方法3. 图片和视频的优化和优化的技巧4. 脚本和样式的加载优化和优化的策略六、网页安全1. 网页安全的基本概念和作用2. XSS攻击和防范3. CSRF攻击和防范4. SQL注入和防范5. 网络劫持和防范以上就是网页设计期末考试的基本知识点总结，希望对大家有所帮助。
CSS基础语法
CSS基础语法1 CSS概述1.1 CSS的定义 全名：Cascading Style Sheets -> 层叠样式表 定义：CSS成为层叠样式表，它主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能（如字体、颜⾊、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。
(1) 层叠的概念 CSS—层叠样式表，层叠就是浏览器对多个样式来源进⾏叠加，最终确定结果的过程。
上图中有两个样式来源，第⼀个是引⽤的css1.css，第⼆个是⾃⼰在style中编写的样式。
“层叠”是个叠加的过程，可通过下图表⽰：层叠是CSS的核⼼机制，理解了它才能以最经济的⽅式写出最容易改动的CSS，让⽂档外观在达到设计要求的同时，也给⽤户留下⼀些空间，让他们根据需要更改⽂档的显⽰效果，例如调整字号。
(2) 层叠的规则 由于样式的来源不同，浏览器在加载样式时，需要计算出最终的样式值，这样才能显⽰出正确的界⾯效果——浏览器会通过叠加和覆盖这两种⽅式来⽣成最终的样式值。
如上图，不同来源的两个样式，第⼀个样式设置了font-weight，第⼆个没有，浏览器会把它叠加在⼀起，即浏览器会把各个零散的整合成⼀个整体。
第⼀个样式color:red，第⼆个样式color:blue，浏览器会让后者覆盖前者，最终结果还是color:blue。
覆盖的默认规则是后者覆盖前者，但是⼜⼀个特殊情况——!important。
如上图。
虽然color:blue是后来者，但是它没有居上，因为前者color:red跟着!important。
这就像得到⼀个尚⽅宝剑，有最⾼执⾏权，其他⼈统统让路，否则佛挡杀佛。
1.2 HTML、CSS与JS三者的关系 HTML：页⾯结构，负责从语义的⾓度搭建页⾯结构。
CSS：页⾯样式表现，负责从审美的⾓度美化页⾯。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
二、如何将样式表加入您的网页
如果在DreamWeaver中用 中用Styles来书写，以上一些代码会自动生成的。 来书写， 如果在 中用 来书写 以上一些代码会自动生成的。 这种方式的主要用处是，在一些方面统一样式的前提下， 这种方式的主要用处是，在一些方面统一样式的前提下，可针对具体页面 进行具体调整。这两种方式并不相排斥，而是相互结合。 进行具体调整。这两种方式并不相排斥，而是相互结合。 比如： 文件中定义了P标志的字体大小 比如：在CSS文件中定义了 标志的字体大小 文件中定义了 标志的字体大小font-size为10pt,而在内部文 为 而在内部文 档中可定义P标签字体颜色 标签字体颜色font-color为Red;而在另一个 而在另一个HTML文件头部 档中可定义 标签字体颜色 为 而在另一个 文件头部 中定义颜色为Green，你认为这两个 文件中的P标签的字体大小和 中定义颜色为 ，你认为这两个HTML文件中的 标签的字体大小和 文件中的 颜色是什么样的呢？动手做一下看看效果是什么样的。 颜色是什么样的呢？动手做一下看看效果是什么样的。 看到效果了吗？你能明白为什么风格样式表叫层叠样式表了吗？ 看到效果了吗？你能明白为什么风格样式表叫层叠样式表了吗？
二、如何将样式表加入您的网页
2.
内部文档头方式 (Embedding a Style Block)
这种方式与外部文件方式区别在于这种方式是将样式直接定义在文档头内部，而 不是形成文件。这种样式定义产生作用的范围也只局限于本HTML文件。 其格式如下： <Style Type="text/css"> <!-P{ font-family: '宋体 宋体'; 宋体 font-size: 9pt; color: blue; } H2{ font-family: '宋体 宋体'; 宋体 font-size: 13pt; color: red; } --> </style>
第六
1. 2. 3. 4. 5.
清晰理解样式表和HTML的关系。 掌握三种样式表的使用方法和实际中的应用。 掌握样式表的基本结构。 掌握网页中样式表的三种类型（类、标签、ID）的使用。 掌握CSS样式表的常用属性的使用。
课程重点和难点： 课程重点和难点：
.red { color: #FF0000; font-Family: Verdana; bgcolor: #CDCDCD; border-color: #00FF00; }
四、样式表的三种类型（类、标签、ID） 样式表的三种类型（ 标签、 ）
标签样式： 标签规则，重定义特定标签（ 标签样式：HTML 标签规则，重定义特定标签（如 P 或 H1）的格式。创 ）的格式。 规则时， 建或更改 P 或 H1 标签的 CSS 规则时，所有用 P或H1 标签包括着的文本 或 样式都会立即更新。 样式都会立即更新。 例如： 例如：
1. 2. 3. 4.
掌握三种样式表的使用方法和实际中的应用。 掌握网页中样式表的三种类型（类、标签、ID）的使用。 掌握CSS样式表的常用属性的使用。 在实际应用中能够灵活的应用CSS样式表控制网页内容显示。
一、什么是样式表
样式表（ 样式表（Style Sheets）技术延生于 ）技术延生于1996年，CSS是Cascading Style 年 是 Sheet 的缩写。译作「层叠样式表」。是用于（增强）控制网页样式并允 的缩写。译作「层叠样式表」。是用于（增强） 」。是用于 许将样式信息与网页内容分离的一种标记性语言。样式就是格式， 许将样式信息与网页内容分离的一种标记性语言。样式就是格式，对网页 来说，例如文字大小、颜色及图片位置等，都是网页信息显示的样式。 来说，例如文字大小、颜色及图片位置等，都是网页信息显示的样式。层 叠是当在HTML文件中引用多个定义样式文件（CSS文件）时，若多个样 文件中引用多个定义样式文件（ 文件） 叠是当在 文件中引用多个定义样式文件 文件 式文件中所定义的样式发生冲突，则将依据层次处理。 式文件中所定义的样式发生冲突，则将依据层次处理。 样式表CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。 样式表CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。 在网页中占着极重要的地位 CSS几乎可以定义所有的网页元素，CSS虽然功能强大，但平时我们用到 几乎可以定义所有的网页元素， 虽然功能强大， 几乎可以定义所有的网页元素 虽然功能强大 的是很少的，最常见的有：定义字体大小(用 的是很少的，最常见的有：定义字体大小 用CSS定义的字体大小不会因 定义的字体大小不会因 浏览器的字体设置而改变)、去掉超链下划线、超链接变颜色等等。 浏览器的字体设置而改变 、去掉超链下划线、超链接变颜色等等。
四、样式表的三种类型（类、标签、ID） 样式表的三种类型（ 标签、 ）
类样式： 规则， 类样式：自定义 CSS 规则，使您可以将样式属性应用到任何文本范围或 文本块。 开头。例如， 文本块。所有类样式均以句点 (.) 开头。例如，您可以创建称为 .red 的类 样式， 属性为红色，然后将该样式应用到一个P标签或 样式，设置规则的 color 属性为红色，然后将该样式应用到一个 标签或 一个H1标签上 标签上。 一个 标签上。 例如： 例如：
二、如何将样式表加入您的网页
你可以用以下三种方式将样式表加入您的网页。 你可以用以下三种方式将样式表加入您的网页。而最接近目标标签的样式 定义优先权越高。 定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖 重叠的定义。 重叠的定义。
1.
外部文件方式 (Linking to a Style Sheet)
三、样式表语法
样式表语法 (CSS Syntax) 格式
Selector { property: value; }
说明： 说明： Selector : 选择符 property : value -- 样式表属性的定义。属性和属性值之间用冒号 : 隔开。 样式表属性的定义。 隔开。 隔开。 每个定义之间用分号 ; 隔开。
这几种方式各有用途，在统一整个站点风格上，用第一种方式； 这几种方式各有用途，在统一整个站点风格上，用第一种方式；在整个页 面内的样式统一上，用第二种方式；而在页面内某个标签的具体微调上， 面内的样式统一上，用第二种方式；而在页面内某个标签的具体微调上， 第三种方式也有用武之地，所以各有千秋吧！前两种的目的： 第三种方式也有用武之地，所以各有千秋吧！前两种的目的：一是统一整 个网站、整个页面的样式，二是减少繁琐的标志属性设置， 个网站、整个页面的样式，二是减少繁琐的标志属性设置，真是功不可没 哟!
二、如何将样式表加入您的网页
如当前文件目录下有一CSS 文件名为myStyle.css，内容如下： P{ font-family: '宋体 宋体'; 宋体 font-size: 9pt; color: blue; } H2{ font-family: '宋体 宋体'; 宋体 font-size: 13pt; color: red; } 则在引用时，用下列语句: <Link Rel="StyleSheet" Href="myStyle.css" Type="text/css"> 如果你在DreamWeaver中用styles功能可直接连接(Link)一个CSS文件，这些语句 会自动生成。
先建立外部样式表文件（.css），然后使用HTML的link对象引入样式文件。 示例如下： <head> <title>title of article</title> <Link Rel="StyleSheet" Href="文件名 文件名.CSS" Type="text/css"> 文件名 </head>
五、CSS常用的属性 常用的属性
字体属性（ 字体属性（font-family） ） 语法： 语法： font-family : name; 参数： 参数： name : 字体名称。按使用优先顺序排列。以逗号隔开。如果字体名称包 字体名称。按使用优先顺序排列。以逗号隔开。 含空格或是中文名称，则应使用引号括起。 含空格或是中文名称，则应使用引号括起。 示例： 示例： p { font-family: “宋体”, "Courier New", Verdana; } 宋体” 宋体
二、如何将样式表加入您的网页
3.
直接插入式 (Inline Styles)
直接插入式很简单，只是在每个HTML标签中的Style属性中书写CSS属性就可以 了。这种方式很直接。 例如：想规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下： <Table style=“color:red;font-size:10pt”> 这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标签。
td { color: #FF0000; font-Family: Verdana; background-color: #CDCDCD; border-color: #00FF00; }
四、样式表的三种类型（类、标签、ID） 样式表的三种类型（ 标签、 ）
ID样式：CSS 选择器规则，重定义包含特定 ID 属性的标签的格式（例如， 样式： 选择器规则， 属性的标签的格式（例如， 样式 定义的样式可以应用到所有包含属性id=“myStyle” 的标 由 #myStyle 定义的样式可以应用到所有包含属性 签）。 例如把以下样式应用到一个文本框表单： 例如把以下样式应用到一个文本框表单：
五、CSS常用的属性 常用的属性
字体风格（ 字体风格（font-style） ） 语法： 语法： font-style : normal | italic | oblique 参数： 参数： normal : 正常的字体 italic : 斜体。对于没有斜体变量的特殊字体，将应用 斜体。对于没有斜体变量的特殊字体，将应用oblique oblique : 倾斜的字体 示例： 示例： p { font-style: normal; } p { font-style: italic; } p { font-style: oblique; }