网页设计(二) |
您所在的位置:网站首页 › 网页设计中float用法 › 网页设计(二) |
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者。最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿,有关HTML+CSS框架的编程,比较基础。当时为了给入门的同学更多感性认识,提供了很多小实例,这里也都给出来了。 目录 DIV+CSS布局 DIV+CSS布局概念 DIV标签 DIV标签——盒子模型 CSS概念 CSS的优先次序 使用CSS CSS选择器 CSS选择器——元素选择器 CSS选择器——元素选择器——实例3 CSS选择器——类选择器 CSS选择器—— ID选择器 CSS选择器——派生(后代)选择器 CSS选择器——实例4 DIV+CSS布局DIV+CSS布局概念 DIV+CSS布局方式并不是一种新的语言或者体系,它就是html语言中的一部分。 简单来说就是把标签中的样式和部分属性,放到另外一个文件中,通过一定语法将它们联系起来,浏览器通过CSS中的语句来决定html中的DIV(之前提到过,div为html中的一种标签)如何在页面中显示。 这种布局中,div承载的是内容,而css承载的是样式。 具体什么是CSS将在后面讲到。 DIV标签标签的使用方法和其他标签的使用方法完全一样,在网页中它的性质和是一样的,均为块级元素。 DIV本身就是容器性质的,它的主要作用就是承载内容,让css有一个作用的对象,当然其他标签也可以作为css的作用对象,但div有着一些其他标签不具有的优势,例如div之间可以任意嵌套, 标签之间是不可以嵌套的。 一般我们利用盒子模型来理解div。 DIV标签——盒子模型每个div都可看做是一个装了东西的盒子,盒子具有宽度(width)和高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。尽管这些边距都是空白的,但它们在布局中却能够发挥意向不到的作用,往往只要通过设置边距的大小就可以实现定位。 下图中的border为夸张版,但可以帮助大家认清border的地位: CSS概念在了解div之后,我们可以开始学习CSS了。 CSS 指层叠样式表 (Cascading Style Sheets),它的作用主要是提供对文档外观的更好更全面的控制,而且不干扰文档的内容。 CSS能够很好地解决内容与表现分离的问题 ,极大地提高了工作效率。 CSS的优先次序 样式表有四种,它们的优先次序从 小 到 大 依次为 :浏览器缺省设置(默认设置) 外部样式表 内部样式表(位于标签内部) 内联样式(在HTML元素内部设置) 了解样式表的优先级非常重要,因为有时候无论怎么修改自己的样式表都无法达到预期的效果,那么你可以尝试去找找是否有其他样式表覆盖了你要的效果。 使用CSS 前面的例子中其实已经使用过CSS了,如实例2.5中的: Love 这里使用的就是之前说的CSS的内联样式 不过这里要讲的是如何使用外部样式表,建立起html文档和css文档之间的联系需要用到标签。 具体的联系操作为:在html文档的头部,即标签中写入,就可以建立起两者之间的联系,浏览器在阅读html文档的时候会自动地到相应的CSS文件中读取样式。 内部样式表将在后面提到(一般情况下均使用外部样式表)
CSS的基础语法是选择器+一条或多条声明,即: 选择器名 {声明1;声明2; ... ;声明} 如: CSS选择器 CSS中有很多选择器,下面几种选择器是最常用的: 元素选择器 类选择器 ID 选择器 后代选择器(派生选择器) 下面分别介绍。 CSS选择器——元素选择器 元素即html标签,如p、img、title、h1、div等。 下面一句为在css中对 标签进行设置的实例: p{color:red;font-size:66px;} 如果多个标签同时需要用到同一种样式,可以这样: h1,p,strong{color:blue;} 后面我们会讲到更加简便的方法来实现对多个标签的设置 CSS选择器——元素选择器——实例3
HTML文档中的代码片段,其创建、打开方式可参见《网页设计(一)——HTML基础概念》的实例2(https://blog.csdn.net/csyzcyj/article/details/107283767): 元素选择器示例1 I love CSUchinadxscy.csu.edu.cn 元素选择器示例2 I love CSUchinadxscy.csu.edu.cn CSS文件(注意上面的html中已规定CSS文件名为"simple3.css")代码: div,p{color:blue;}说明一下,CSS文件的创建与HTML类似,即打开记事本,在里面键入上方的CSS代码,而后保存,将后缀名改为css。注意,在本例中,由于html中已规定CSS文件名为"simple3.css",故CSS文件名需设置为"simple3.css"。 打开html的效果如下: 另外,注意两点: ①:选择器优先次序,这里体现了内联样式高于外部样式表; ②:CSS文件中每写一条需要以分号结束。 CSS选择器——类选择器 使用类选择器时,我们要给div或者标签加上一个class属性,如: HTML片段: I love CSU 对应CSS中: .im{font-size:35px;color:red;} 前面说到的多个标签使用同种样式的时候可以这么写: h1,p,strong{color:blue;} 其实可以给每个标签都加上一个相同的class属性之后,只要写成 .类名{样式} 即可。 ps:h1、strong等标签都是内部已经设定了一定格式的标签,实际运用中我们可以通过自行调整css样式来实现,不一定要用内定了格式的标签 效果可参见实例4。 CSS选择器—— ID选择器 ID选择器与类选择器类似,使用前也需要给标签加上一个ID属性,如: HTML片段: I love CSU CSS对应片段: #st{font-size:35px;color:blue;}
不过两者最大的区别在于,类选择器的类名可以是多个标签公用的,而ID选择器则是唯一的。(尽管你在测试时发现可能可以用,但是这是错误的写法!在将来用到更高级的内嵌编程段时会出现问题) 错误示例: I love CSU chinadxscy.csu.edu.cn 效果可参见实例4。 CSS选择器——派生(后代)选择器 这种选择器主要是用于设置内嵌的标签样式 如: HTML片段: 中国大学生创业网 CSS样式对应片段: p strong{color:red;font-size:60px;} 上面的语句只会使得 标签中的创字样色改变,而不会对其它字起作用。 效果可参见实例4。 CSS选择器——实例4 HTML代码如下: 类选择器示例 I love CSUchinadxscy.csu.edu.cn ID选择器示例 I love CSUchinadxscy.csu.edu.cn 派生选择器示例中国大学生创业网 CSS文件代码如下: /*类选择器*/ .im{font-size:35px;color:red;} /*ID选择器*/ #st{font-size:35px;color:blue;} /*派生选择器*/ p strong{color:red;font-size:60px;}打开HTML文件后效果如下:
下一篇DIV+CSS布局将介绍CSS样式。
附网页设计系列的文章链接: 网页设计(一)——HTML基础概念:https://blog.csdn.net/csyzcyj/article/details/107283767 网页设计(二)——DIV+CSS布局1:https://blog.csdn.net/csyzcyj/article/details/107284087 网页设计(三)——DIV+CSS布局2:https://blog.csdn.net/csyzcyj/article/details/107284655 网页设计(四)——DIV+CSS布局3:https://blog.csdn.net/csyzcyj/article/details/107285198 网页设计(五)——marquee标签:https://blog.csdn.net/csyzcyj/article/details/107285901 网页设计(六)——基于HTML+CSS框架的网页设计实例:https://blog.csdn.net/csyzcyj/article/details/107286067
转载注明出处:https://blog.csdn.net/csyzcyj/ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |