2 CSS基础.docx
《2 CSS基础.docx》由会员分享,可在线阅读,更多相关《2 CSS基础.docx(78页珍藏版)》请在冰豆网上搜索。
2CSS基础
CSS基础_DIV+CSS基础教程信息列表
∙•htmlcss认识与学习
∙•css10分钟入门
∙•认识CSS,了解CSS作用
∙•CSS代码是什么?
∙•什么是css文件?
∙•什么是css样式
∙•新建一个css样式
∙•div+css原理解剖
∙•学习DIV+CSS有什么用?
∙•DIVCSSdisplay(blocknoneinline)属性的用法教程
∙•采用DIV+CSS布局技术的好处与坏处
∙•DIV+CSS重构技术适合什么人学习?
∙•我不会程序也不懂程序,能学会DIV+CSS技术吗?
∙•学习DIV+CSS网页制作的流程及如何学习CSS?
∙•在制作Xhtml页面时是先写HTML代码还是先写CSS代码
∙•常用的CSS属性的英文单词总结及用法、解释
∙•div与span区别及用法
∙•CSS与浏览器关系
∙•DIVCSS布局
∙•DIVCSS书写格式
∙•DIV标签内的CSS样式
∙•什么是CSS选择器?
∙•DIVCSS缩写
∙•CSSid与CSSclass
∙•CSS继承
∙•CSS中的class与id区别及用法
∙•CSS高度(cssheight)
∙•css宽度(CSSwidth)
∙•CSS加粗(cssfont-weight)
∙•CSS背景(cssbackground)
∙•CSS颜色(CSScolor)
∙•CSS边框(cssborder)
∙•css字体颜色(csscolor)
∙•DIVCSS字体(font-family)
∙•CSS下划线(csstext-decoration)
∙•CSS外边距
∙•css注释_css注解
∙•div+css中float用法
∙•CSS父级子级
∙•CSS指针
∙•cssfont_css文字
∙•CSS文本
∙•css字间距离_css字体字符间距设置
∙•CSS合并共享之CSS优化
∙•引用CSS文件到html网页里方法
∙•可视的Xhtml网页(CSS)的二维CSS元素图解
∙•div+css入门在线教程-PDF在线版
∙•解析谷歌将网页加载速度快慢作为影响排名重要因素
∙•CSS3_CSS3.0技术介绍
htmlcss认识与学习
htmlcss这里可以看作html超文本和css样式表。
他们关系是html放置要在浏览器中显示的具体内容,而CSS则是控制html显示内容排版、颜色、宽度、高度、居左、居右、居中等属性。
CSS可以控制html内容显示各种样式,同样html可以实现css设置的布局样式。
这就是htmlcss的关系关联所在。
css10分钟入门
CSS对于刚刚接触的同学来说,不知道DIVCSS是什么,CSS工作原理又是怎么样的。
目录
1.认识CSS
2.原理
3.实例
4.实例说明
5.必须认知
这里DIVCSS5带刚刚接触CSS,而想学习CSS的同学开始入门。
1、认识CSS -
CSS是英文单词CascadingStyleSheets缩写,翻译为“样式表”,我们又称“CSS样式表”。
通俗讲CSS是控制网页中内容的颜色、字体、文字大小、宽度、边框、背景、浮动等样式来实现各式各样、花样百出的网页样式的统称(CSS手册了解更多控制样式属性)。
如大学是什么,大学里有计算机、教师、物理、化学、英语等专业系、院组成了一所大学,这就是大学。
2、CSS原理
认识了CSS原理,相当于我们找到CSS下手学习入口,进入CSS世界。
转入正题,CSS原理模型例子:
我们知道使用对讲机双方要通话,必须要在一定距离内(对讲机信号覆盖区),CSS一样,CSS要生效必须引入要正确(推荐style和link,内嵌CSS代码和引入CSS文件2种方式引入嵌入CSS);对讲机双方除了在信号范围内才能通话,还有最重要的就是双方频道频率(调频频率)要相同,CSS也是这样,要想CSS生效就需要在CSS代码的CSS选择器命名和HTML中class值或id的值的引用的CSS选择器命名相同。
这样CSS选择器命名与html应用CSS类(class)值名相同后,这个CSS选择器里写不同样式属性,html对应部分网页内容样式就跟着你在CSS选择器里设置不同CSS属性样式而变化。
HTML与CSS本身是一个整体缺一不可,CSS代码表达的样式要实现就需要html中使用class或ID的值与CSS选择器的命名的名称相同。
DIVCSS5例子-stylehtml中内嵌CSS代码法:
CSS代码(代码是放入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样式属性是固定的,如宽度对应width
注意“yangshi”与"abc",对应到HTML里一个用class一个用ID,我们就需要认识CLASS与ID区别与CLASSID用法。
从CSS原理我们主要是学习CSS与HTML关系,
下来你将接触到-必须学会与认识知识
CSS高度:
学会控制网页内容与布局高度
CSS宽度:
学会使用CSS控制网页与布局宽度
CSS注解:
学会在CSS中注解、注释
classid:
一定要搞清楚ID与CLASS
cssid:
一定搞清ID作用
cssclass:
一定搞清楚CLASS用法作用及与ID区别
CSS居中:
内容居中、布局居中、垂直居中、上下左右居中
CSS背景:
CSS控制背景方法与CSS背景深入运用
CSS字体:
学会对文字、字体控制
CSS工具:
学会和认识常见CSS工具
CSS手册:
一定要收藏的遇到CSS问题或单词可以提供在线CS手册速查
html基础:
学CSS前必备功课
css教程:
欢迎来到DIVCSS5、同时有什么问题可以通过网页顶部搜索工具搜索想要的知识与问题。
等...
认识CSS,了解CSS作用
通过首页和CSS样式介绍什么是CSS样式,相信大家对CSS也有一定认知和了解。
接下来,我们详细来介绍和解释下CSS样式表
1.CSS定义解释
2.基本语法与结构
3.达到效果与特点
4.解决问题
CSS定义与解释
CSS是CascadingStyleSheets(层叠样式表单)的简称。
CSS就是一种叫做样式表(stylesheet)的技术。
也有的人称之为“层叠样式表”(CascadingStylesheet)。
CSS基本语法与结构
实际上CSS代码都是由一些最基本的语句构成的。
它的基本语句语法的结构是这样的:
选择符{属性:
属性值}例子如:
#yangshi{width:
156px;height:
25px;}
在网页制作时采用CSS技术,可以有效地对全站页面有共同性质属性的布局、字体、颜色、背景和其它效果属性实现更加精确的控制。
只要对网页HTML里的相应的CSS代码做一些简单的修改,就可以改变同一页面或整站用到此“选择类”的网页的外观和格式样式。
CSS的作用可以达到效果及特点:
(1)在几乎所有的浏览器上都可以使用。
(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
(4)你可以轻松地控制页面的布局。
(5)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。
你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
想一想,没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的?
我们一般使用HTML标签来实现,代码非常烦琐。
很难想象,如果在一个页面里需要频繁地更替字体的颜色大小,最终生成的HTML代码的长度一定臃肿不堪。
说实话,CSS就是为了简化这样的工作诞生的,当然其功能决非这么简单。
结合DIVCSS是通过对页面结构的风格控制的思想,来控制整个页面的风格的属性。
浏览器通过CSS类解释来呈现CSS属性来表现样式里设置的样式。
CSS替我们解决什么问题-CSS作用?
通过前面我们知道CSS也只是一个技术或一个东西的代名词,那究竟CSS作用是什么,CSS能帮我们解决什么问题呢?
CSS配合DIV或div+css作用与解决问题:
1、CSS技术帮我们控制网页中的字体大小、页面宽度、页面内容靠左靠右、字体样式、某些网页里区域背景图片、背景颜色、超链接鼠标事件样式、图片居中、文字居中、网页中内容板块间隔等样式(花样)。
2、网页中一些标签元素样式控制,如:
标题
、span、列表等等网页元素设置控制,包括上面讲的文字图片大小、DIVCSS布局宽度颜色等属性。
CSS代码是什么?
CSS代码是什么,什么是CSS代码?
1.什么是CSS
2.css代码样子(图)
3.作用
4.相关扩展阅读
了解什么是css?
CSS全称为CascadingStyleSheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术统称。
Css代码是一些有意义的英文组成,包括css属性英文及值组成,如下图
分析上图:
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
接下来我们来了解下divcss中的css文件是什么这个基础问题。
首先我们这样理解,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文件里内容 TOP
Css文件里都放的是如上图一样的css代码。
新建一个css文件方法。
TOP
使用Dreamweaver新建CSS文件 TOP
1、使用Dreamweaver新建一个css文件-Dreamweavercss
首先打开Dreamweaver软件,然后点击最左上角的“文件”
然后选择“新建”,将弹出以下窗口
然后选择“页面类型”中的“css”,然后点击右下角的“创建”,即可新建一个css文件。
2、使用记事本方式新建css文件 TOP
首先要在新建一个css文件的文件夹里点击鼠标右键,然后选择新建“文本文档”。
即可新建一个扩展名为txt的记事本文件,然后将记事本的扩展名txt改为css即可新建一个css文件,并将中文字改为自己要新建的css名即可,这里为yanshi为例。
以上就是divcss网对css文件介绍及使用新建一体的介绍。
什么是css样式
1.定义
2.走进CSS样式
3.通俗认识
CSS样式定义 - TOP
简单地讲,CSS样式全称为CascadingStyleSheets,中文翻译为“层叠样式表”,简称样式表有被我们称为CSS样式或认知的divcss样式,而CSS就是CascadingStyleSheets英文单词开头字母缩写,CSS样式是一种制作网页样式的新技术也就是本DIVCSS5介绍主题。
走进CSS样式 - TOP
大家可以这样理解CSS样式只是一个名称而已,就像自己名字为什么叫张三李四一样,从“CSS样式”短语可以理解,去除“CSS”后,只剩“样式”两字,所以可以通俗理解“样式”就有花样、种类多样、多种多样、各式各样等意思。
顾名思义CSS样式就是通过"CSS"代名词后技术来制作开发多种多样不同样式、不同版面、版面区分、上下区分网页的一种CSS技术。
通俗认识 - TOP
所以对于刚学习DIV+CSS的我们不需要特别刻意知道CSS样式是什么,DIVCSS样式只是一种技术的代名词而已,与DIV+CSS相关,与网页相关的,在以后制作网页用到css的时候自然会对CSS样式更深层的认识。
css代码是什么
div+css布局
新建一个css样式
怎么定义1个DIV的CSS样式?
怎么新建一个css样式?
1.实例说明
2.定义样式
3.嵌入html
4.实例展示
5.小总结
实例说明 - TOP
新建css实例说明:
分别我们来定义2个id和两个class样式的类。
两个id的命名为aa和bb,两个class的命名为cc和dd
首先定义css样式 - TOP
1、直接定义到css文件方法
2个id为#aa{font-size:
12px;},#bb{font-size:
16px;};
2个class为.cc{font-size:
18px;},.dd{font-size:
22px;};
2、嵌入到html的css样式 - TOP
-了解更多css引用
#aa{font-size:
12px;}
#bb{font-size:
16px;}
.cc{font-size:
18px;}
.dd{font-size:
22px;}
以上为定义的css样式,接下来我们介绍css样式的css应用-案例展示 - TOP
我样式名为aa的id
我样式名为bb的id
我样式名为cc的class
我样式名为dd的class
测试结果如下图
总结 - TOP
总结定义id和class的区别在于,在定义css样式的时候css选择器定义前的“#”和“.”区别,这里注意的是“#”为id选择符,“.”为class的选择符,都需要用英文半角小写方式。
div+css原理解剖
1.思路与介绍
2.原理步骤
3.浏览器读取原理
思路分析 - TOP
在一般情况的div+css开发静态html网页时,我们把html和css是分开的,形成html页面如(index.html)和css文件如(divcss5.css),这里的index和divcss5是自己任意的命名。
而divcss中div则代表html页面(这里指index.html),因为在html页面里用到特别多的div标签所以我们通常是简写成div+css也被称为“web标准”。
原理步骤 - TOP
从css引入html到html调用css样式实例
第一步
首先我们要在html页面里引入css样式文件这里引入的是divcss5.css
基础知识:
CSS引入方法
第二步
1、在css文件里编写css样式如.yangshi{font-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伪类中的属性字体大小为16px赋予案例测试内,这样“案例测试”内容的文字大小将为16像素。
学习DIV+CSS有什么用?
对应新手及网页平面设计师来说这认识和了解DIVCSS后,可能会想我们学习DIV+CSS有什么用?
那好CSS网站就给大家介绍下学习DIV+CSS好处及用处。
1.有利于SEO
2.提供工作效率
3.接任务
4.有利于站长赚钱
学习DIV+CSS好处及用处:
1、有利于SEO:
- TOP
学习css技术有利于SEO(搜索引擎优化)-可参见css对SEO影响。
2、可以提高找工作的机率:
现在很多从事建站网络公司招聘技术人员都要求会DIV+CSS技术,可以看出DIV+CSS的页面越来越受大众重视与支持。
如果一般的程序员掌握了CSS能助你提高就业竞争力。
3、网上接单:
网上特别淘宝上开DIV+CSS制作店铺或威客类站接单赚钱-本站店铺。
4、建站自己当站长:
现在网上有很多开源的网站系统源码,有网店源码、CMS内容管理系统、博客、论坛源码等如DEDECMS、PHPCMS、动易等优秀功能强大的免费的网站程序源码,只要你会DIV+CSS技术就可以制作出html页面然后插入他们出用于他们用的标签的网站CSS模板(他们都有自己的标签模板制作教程-前题您会DIV+CSS技术制作页面),就建立出自己的网站从而自己当站长通过网站为自己增加收入。
以上只是总结了部分学习和掌握DIV+CSS技术的好处,当然不止这些好处。
希望大家在评论补充我们将共同分享给没有学习目的目标的DIV+CSS好友们。
DIVCSSdisplay(blocknoneinline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block、none、inline这三个值。
下面我们来分别来认识和学习什么时候用什么值。
这里通过CSSdisplay知识加实例、图演示讲解方法来学习和了解DIVCSSdisplay。
1.CSSdisplay使用
2.display的值有哪些
3.cssdisplayblock
4.cssdisplaynone
5.cssdisplayinline
1、CSSdisplay使用 - TOP
以下为DIVCSS运用dispaly,说明这里dispaly值任意
CSS代码:
.divcss5{display:
none}
Html对应运用:
我是测试内容
根据以上可以自己DIV+CSS下,看看使用结果
2、display的值有哪些 - TOP
Cssdisplay值与解释-(详细可见CSS手册的CSSdisplay手册)
参数:
block:
块对象的默认值。
用该值为对象之后添加新行
none:
隐藏对象。
与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline:
内联对象的默认值。
用该值将从对象中删除行
compact:
分配对象为块对象或基于内容之上的内联对象
marker:
指定内容在容器对象之前或之后。
要使用此参数,对象必须和:
after及:
before伪元素一起使用
inline-table:
将表格显示为无前后换行的内联对象或内联容器
list-item:
将块对象指定为列表项目。
并可以添加可选项目标志
run-in:
table:
将对象作为块元素级的表格显示
table-caption:
将对象作为表格标题显示
table-cell:
将对象作为表格单元格显示
table-column:
将对象作为表格列显示
table-column-group:
将对象作为表格列组显示
table-header-group:
将对象作为表格标题组显示
table-footer-group:
将对象作为表格脚注组显示
table-row:
将对象作为表格行显示
table-row-group:
将对象作为表格行组显示
3、cssdisplayblock - TOP
Display:
block是我们常用的,block也是Display默认的值。
解释:
该对象随后的内容自动换行。
cssdisplayblock实例
block}
Html对应运用代码:
我的后面文字会换行我是被前面的divcss5对应CSS属性换行。
不会被换行,因为我没有被设置display:
block
对应结果截图:
说明这里使用span作实例,一个被设置CSS样式,一个未设置,自己可以对比被设置DIVdisplay:
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1