2 CSS基础.docx

1、2 CSS基础CSS基础_DIV+CSS基础教程信息列表 html css认识与学习 css 10分钟入门 认识CSS，了解CSS作用 CSS 代码是什么? 什么是css文件? 什么是css样式 新建一个css样式 div+css原理解剖 学习DIV+CSS有什么用？ DIV CSS display (block none inline)属性的用法教程 采用DIV+CSS布局技术的好处与坏处 DIV+CSS重构技术适合什么人学习？ 我不会程序也不懂程序，能学会DIV+CSS技术吗？ 学习DIV+CSS网页制作的流程及如何学习CSS？ 在制作Xhtml页面时是先写HTML代码还是先写CSS代码

2、常用的CSS属性的英文单词总结及用法、解释 div与span区别及用法 CSS与浏览器关系 DIV CSS布局 DIV CSS书写格式 DIV标签内的CSS样式 什么是CSS选择器? DIV CSS 缩写 CSS id与CSS class CSS 继承 CSS中的class与id区别及用法 CSS 高度(css height) css 宽度(CSS width) CSS 加粗(css font-weight) CSS 背景(css background) CSS 颜色(CSS color) CSS 边框(css border) css 字体颜色(css color) DIV CSS字体（fon

3、t-family） CSS 下划线（css text-decoration） CSS 外边距 css 注释_css注解 div+css中float用法 CSS 父级子级 CSS 指针 css font _ css 文字 CSS 文本 css 字间距离_css 字体字符间距设置 CSS合并共享之CSS优化 引用CSS文件到html网页里方法 可视的Xhtml网页(CSS)的二维CSS元素图解 div+css入门在线教程-PDF在线版 解析谷歌将网页加载速度快慢作为影响排名重要因素 CSS3_CSS 3.0技术介绍 html css认识与学习html css这里可以看作html超文本和css样式表

4、。他们关系是html放置要在浏览器中显示的具体内容，而CSS则是控制html显示内容排版、颜色、宽度、高度、居左、居右、居中等属性。CSS可以控制html内容显示各种样式，同样html可以实现css设置的布局样式。这就是html css的关系关联所在。css 10分钟入门CSS对于刚刚接触的同学来说，不知道DIV CSS是什么,CSS工作原理又是怎么样的。目录1. 认识CSS 2. 原理 3. 实例 4. 实例说明 5. 必须认知 这里DIVCSS5带刚刚接触CSS，而想学习CSS的同学开始入门。1、认识CSS - CSS是英文单词Cascading Style Sheets缩写，翻译为“样式

5、表”，我们又称“CSS样式表”。通俗讲CSS是控制网页中内容的颜色、字体、文字大小、宽度、边框、背景、浮动等样式来实现各式各样、花样百出的网页样式的统称（CSS手册了解更多控制样式属性）。如大学是什么，大学里有计算机、教师、物理、化学、英语等专业系、院组成了一所大学，这就是大学。2、CSS原理 认识了CSS原理，相当于我们找到CSS下手学习入口，进入CSS世界。转入正题，CSS原理模型例子：我们知道使用对讲机双方要通话，必须要在一定距离内（对讲机信号覆盖区），CSS一样，CSS要生效必须引入要正确（推荐style 和 link，内嵌CSS代码和引入CSS文件2种方式引入嵌入CSS）；对讲机双方

6、除了在信号范围内才能通话，还有最重要的就是双方频道频率（调频频率）要相同，CSS也是这样，要想CSS生效就需要在CSS代码的CSS选择器命名和HTML中class值或id的值的引用的CSS选择器命名相同。这样CSS选择器命名与html应用CSS类（class）值名相同后，这个CSS选择器里写不同样式属性，html对应部分网页内容样式就跟着你在CSS选择器里设置不同CSS属性样式而变化。HTML与CSS本身是一个整体缺一不可，CSS代码表达的样式要实现就需要html中使用class或ID的值与CSS选择器的命名的名称相同。DIVCSS5例子-style html中内嵌CSS代码法： CSS代码（

7、代码是放入html的head开始与结束标签内）：.yangshi color:#F00;/* 定义内容为红色 */#abc color:#0F0;/* 定义内容为绿色 */对应在html调用（此代码是放入body区内）：我是红色我是绿色CSS原理与CSS实例说明： 1、css属性选择器与html中DIV标签内使用CLASS或ID引入CSS的命名的名称要相同。（如上例，CSS中.yangshi.对应HTML）2、CSS代码写到什么地方（上例：使用style在html中内嵌CSS代码，当然可以使用LINK外部引入CSS文件）3、CSS属性选择器命名自己可以取，而CSS样式属性是固定的，如宽度对应w

8、idth注意“yangshi”与abc,对应到HTML里一个用class一个用ID，我们就需要认识CLASS与ID区别与CLASS ID用法。从CSS原理我们主要是学习CSS与HTML关系，下来你将接触到-必须学会与认识知识 CSS 高度：学会控制网页内容与布局高度CSS 宽度：学会使用CSS控制网页与布局宽度CSS 注解：学会在CSS中注解、注释class id：一定要搞清楚ID与CLASScss id：一定搞清ID作用css class：一定搞清楚CLASS用法作用及与ID区别CSS 居中：内容居中、布局居中、垂直居中、上下左右居中CSS 背景：CSS控制背景方法与CSS背景深入运用CSS

9、 字体：学会对文字、字体控制CSS 工具：学会和认识常见CSS工具CSS 手册：一定要收藏的遇到CSS问题或单词可以提供在线CS手册速查html 基础：学CSS前必备功课css教程：欢迎来到DIVCSS5、同时有什么问题可以通过网页顶部搜索工具搜索想要的知识与问题。等.认识CSS，了解CSS作用通过首页和CSS样式介绍什么是CSS样式，相信大家对CSS也有一定认知和了解。接下来，我们详细来介绍和解释下CSS样式表目录1. CSS定义解释 2. 基本语法与结构 3. 达到效果与特点 4. 解决问题 CSS定义与解释 CSS是Cascading Style Sheets（层叠样式表单）的简称。CS

10、S就是一种叫做样式表（stylesheet）的技术。也有的人称之为“层叠样式表”（Cascading Stylesheet）。CSS基本语法与结构 实际上CSS 代码都是由一些最基本的语句构成的。它的基本语句语法的结构是这样的：选择符属性：属性值 例子 如： #yangshiwidth: 156px;height:25px; 在网页制作时采用CSS技术，可以有效地对全站页面有共同性质属性的布局、字体、颜色、背景和其它效果属性实现更加精确的控制。只要对网页HTML里的相应的CSS代码做一些简单的修改，就可以改变同一页面或整站用到此“选择类”的网页的外观和格式样式。CSS的作用可以达到效果及特点：

11、 （1）在几乎所有的浏览器上都可以使用。（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。（4）你可以轻松地控制页面的布局 。（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？我们一般使用HTML标签来实现，代码非常烦琐。很难想象，如果在一个页面里需要频繁地更替字体的颜色

12、大小，最终生成的HTML代码的长度一定臃肿不堪。说实话，CSS就是为了简化这样的工作诞生的，当然其功能决非这么简单。结合DIV CSS是通过对页面结构的风格控制的思想，来控制整个页面的风格的属性。 浏览器通过CSS类解释来呈现CSS属性来表现样式里设置的样式。CSS替我们解决什么问题-CSS作用？ 通过前面我们知道CSS也只是一个技术或一个东西的代名词，那究竟CSS作用是什么，CSS能帮我们解决什么问题呢？CSS配合DIV或div+css作用与解决问题：1、CSS技术帮我们控制网页中的字体大小、页面宽度、页面内容靠左靠右、字体样式、某些网页里区域背景图片、背景颜色、超链接鼠标事件样式、图片居中

13、、文字居中、网页中内容板块间隔等样式（花样）。2、网页中一些标签元素样式控制，如：标题、段落、span、列表等等网页元素设置控制，包括上面讲的文字图片大小、DIV CSS布局宽度颜色等属性。CSS 代码是什么?CSS 代码是什么，什么是CSS代码？目录1. 什么是CSS 2. css代码样子(图) 3. 作用 4. 相关扩展阅读 了解什么是css?CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。Css代码是一些有意义的英文组成，包括css属性英文及值组成，如下图分析

14、上图：css代码由css命名加、“”、加css属性、加属性值最后以“”结束组成css属性选择器。Css代码作用 Css 代码是控制网页显示样式。你可能需要了解一下相关内容 css文件是什么css样式是什么？ DIV+CSS有什么用？ CSS引入网页方法、css应用class与id区别及用法 创建css样式,编写css代码方法什么是css文件?目录1. CSS文件定义 2. css文件样子 3. CSS文件里面内容 4. 新建一个CSS文件 5. 使用DW新建CSS文件 6. 使用记事本新建CSS文件 CSS文件定义 TOP接下来我们来了解下div css中的css文件是什么这个基础问题。首先我

15、们这样理解，css文件应该想到是文件之类的什么东西，那就没错，css文件是指css代码放到一个单独的文件里，并以css扩展名命名如yangshi.css，这样就是css文件。div+css文件与css文件区别。div+css文件是指的html网页文本文件和css文件两个部分组成。如index.html+yangshi.css还有css文件是引入到html网页里的，你可以了解css引入，css引用知识。具体了解css文件什么样子的 TOP以上就是css文件样式，都是以.css为扩展名的文件。了解css文件里内容TOPCss文件里都放的是如上图一样的css代码。新建一个css文件方法。TOP使用D

16、reamweaver新建CSS文件TOP1、使用Dreamweaver新建一个css文件-Dreamweaver css 首先打开Dreamweaver软件，然后点击最左上角的“文件”然后选择“新建”，将弹出以下窗口然后选择“页面类型”中的“css”，然后点击右下角的“创建”，即可新建一个css文件。2、使用记事本方式新建css文件TOP首先要在新建一个css文件的文件夹里点击鼠标右键，然后选择新建“文本文档”。即可新建一个扩展名为txt的记事本文件，然后将记事本的扩展名txt改为css即可新建一个css文件，并将中文字改为自己要新建的css名即可，这里为yanshi为例。以上就是div cs

17、s网对css文件介绍及使用新建一体的介绍。什么是css样式目录1. 定义 2. 走进CSS样式 3. 通俗认识 CSS样式定义 - TOP简单地讲，CSS样式全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表有被我们称为CSS样式或认知的div css样式，而CSS就是Cascading Style Sheets英文单词开头字母缩写，CSS样式是一种制作网页样式的新技术也就是本DIVCSS5介绍主题。走进CSS样式 - TOP大家可以这样理解CSS样式只是一个名称而已，就像自己名字为什么叫张三李四一样，从“CSS样式”短语可以理解，去除“CSS”后，只剩“

18、样式”两字，所以可以通俗理解“样式”就有花样、种类多样、多种多样、各式各样等意思。顾名思义CSS样式就是通过CSS代名词后技术来制作开发多种多样不同样式、不同版面、版面区分、上下区分网页的一种CSS技术。通俗认识 - TOP所以对于刚学习DIV+CSS的我们不需要特别刻意知道CSS样式是什么，DIV CSS样式只是一种技术的代名词而已，与DIV+CSS相关，与网页相关的，在以后制作网页用到css的时候自然会对CSS样式更深层的认识。css代码是什么css文件是什么div+css布局新建一个css样式新建一个css样式怎么定义1个DIV的CSS样式？怎么新建一个css样式？目录1. 实例说明 2

19、. 定义样式 3. 嵌入html 4. 实例展示 5. 小总结 实例说明 - TOP新建css实例说明：分别我们来定义2个id和两个class样式的类。两个id的命名为aa和bb，两个class的命名为cc和dd首先定义css样式 - TOP1、直接定义到css文件方法2个id为#aafont-size:12px;，#bbfont-size:16px;2个class为.ccfont-size:18px;，.ddfont-size:22px;2、嵌入到html的css样式 - TOP-了解更多css 引用#aafont-size:12px;#bbfont-size:16px;.ccfont-si

20、ze:18px;.ddfont-size:22px;以上为定义的css样式，接下来我们介绍css样式的css应用-案例展示 - TOP我样式名为aa的id我样式名为bb的id我样式名为cc的class我样式名为dd的class测试结果如下图总结 - TOP总结定义id和class的区别在于，在定义css样式的时候css选择器定义前的“#”和“.”区别，这里注意的是“#”为id选择符,“.”为class的选择符，都需要用英文半角小写方式。div+css原理解剖div+css原理解剖目录1. 思路与介绍 2. 原理步骤 3. 浏览器读取原理 思路分析 - TOP在一般情况的div+css开发静态h

21、tml网页时，我们把html和css是分开的，形成html页面如（index.html）和css文件如（divcss5.css）,这里的index和divcss5是自己任意的命名。而div css中div则代表html页面（这里指index.html），因为在html页面里用到特别多的div标签所以我们通常是简写成div+css也被称为“web标准” 。原理步骤 - TOP从css引入html到html调用css样式实例第一步首先我们要在html页面里引入css样式文件这里引入的是divcss5.css基础知识：CSS引入方法第二步1、在css文件里编写css样式如.yangshi font-

22、size:16px;这里编写css命名为yangshi然后选择器里属性为文字大小为16像素。2、在html中调用yangshi，代码如案例测试基础知识：css命名规范、css属性选择器浏览器读取css原理 - TOP浏览器呈现一个网页到用户眼前（html纯静态网页）时，首先浏览器是先加载html页面，如果网页是div+css开发的，浏览器将读取加载引入到html页面css样式文件代码，然后通过浏览器解释翻译将css文件里代码样式赋予到html中设置各个不同伪类标签，最终将网页和css样式中各式各样的样式完美的呈现给浏览者。从css引入html到html调用css样式实例，浏览器将yangshi

23、伪类中的属性字体大小为16px赋予案例测试内，这样“案例测试”内容的文字大小将为16像素。学习DIV+CSS有什么用？对应新手及网页平面设计师来说这认识和了解DIV CSS后，可能会想我们学习DIV+CSS有什么用?那好CSS网站就给大家介绍下学习DIV+CSS好处及用处。目录1. 有利于SEO 2. 提供工作效率 3. 接任务 4. 有利于站长赚钱 学习DIV+CSS好处及用处：1、有利于SEO: - TOP学习css技术有利于SEO（搜索引擎优化）-可参见css对SEO影响。2、可以提高找工作的机率: - TOP现在很多从事建站网络公司招聘技术人员都要求会DIV+CSS技术，可以看出DIV

24、+CSS的页面越来越受大众重视与支持。如果一般的程序员掌握了CSS能助你提高就业竞争力。3、网上接单: - TOP网上特别淘宝上开DIV+CSS制作店铺或威客类站接单赚钱-本站店铺 。4、建站自己当站长: - TOP现在网上有很多开源的网站系统源码，有网店源码、CMS内容管理系统、博客、论坛源码等如DEDECMS、PHPCMS、动易等优秀功能强大的免费的网站程序源码，只要你会DIV+CSS技术就可以制作出html页面然后插入他们出用于他们用的标签的网站CSS模板（他们都有自己的标签模板制作教程-前题您会DIV+CSS技术制作页面），就建立出自己的网站从而自己当站长通过网站为自己增加收入。以上只

25、是总结了部分学习和掌握DIV+CSS技术的好处，当然不止这些好处。希望大家在评论补充我们将共同分享给没有学习目的目标的DIV+CSS好友们。 DIV CSS display (block none inline)属性的用法教程在一般的CSS布局制作时候，我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例、图演示讲解方法来学习和了解DIV CSS display。目录1. CSS display使用 2. display的值有哪些 3. css display block 4. cs

26、s display none 5. css display inline 1、CSS display使用 - TOP以下为DIV CSS运用dispaly，说明这里dispaly值任意CSS代码：.divcss5display:noneHtml对应运用：我是测试内容根据以上可以自己DIV+CSS下，看看使用结果2、display的值有哪些 - TOPCss display值与解释-（详细可见CSS手册的CSS display手册）参数：block :块对象的默认值。用该值为对象之后添加新行none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间in

27、line :内联对象的默认值。用该值将从对象中删除行compact :分配对象为块对象或基于内容之上的内联对象marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用inline-table :将表格显示为无前后换行的内联对象或内联容器list-item :将块对象指定为列表项目。并可以添加可选项目标志run-in :分配对象为块对象或基于内容之上的内联对象table :将对象作为块元素级的表格显示table-caption :将对象作为表格标题显示table-cell :将对象作为表格单元格显示table-column :将对象作为表

28、格列显示table-column-group :将对象作为表格列组显示table-header-group :将对象作为表格标题组显示table-footer-group :将对象作为表格脚注组显示table-row :将对象作为表格行显示table-row-group :将对象作为表格行组显示3、css display block - TOPDisplay:block是我们常用的，block也是Display默认的值。解释：该对象随后的内容自动换行。css display block实例CSS代码：.divcss5display:blockHtml对应运用代码：我的后面文字会换行我是被前面的divcss5对应CSS属性换行。不会被换行,因为我没有被设置display:block对应结果截图:说明这里使用span作实例，一个被设置CSS样式，一个未设置，自己可以对比被设置DIV display:block