第1章 CSS样式设计基础 CSS+DIV网页样式与布局从入门到精通
- 格式:ppt
- 大小:966.00 KB
- 文档页数:39
DIVCSS入门教程一、DIV的基本用法```html<div><!--这里可以放入其他HTML元素--></div>```二、DIV的布局和样式1.宽度和高度可以使用CSS样式属性来设置DIV的宽度和高度,如下所示:```cssdivwidth: 200px; /* 设置DIV的宽度为200像素 */height: 100px; /* 设置DIV的高度为100像素 */```2.背景颜色和背景图片可以使用CSS样式属性来设置DIV的背景颜色和背景图片,如下所示:```cssdivbackground-color: red; /* 设置DIV的背景颜色为红色 */ background-image: url("bg.jpg"); /* 设置DIV的背景图片为bg.jpg */```3.边框和边框样式可以使用CSS样式属性来设置DIV的边框和边框样式,如下所示:```cssdivborder: 1px solid black; /* 设置DIV的边框为1像素的实线黑色边框 */border-radius: 5px; /* 设置DIV的边框圆角为5像素*/```4.文本样式可以使用CSS样式属性来设置DIV内文本的样式,如下所示:```cssdivcolor: white; /* 设置DIV内文本的颜色为白色 */ font-size: 16px; /* 设置DIV内文本的字体大小为16像素 */text-align: center; /* 设置DIV内文本的水平居中对齐*/line-height: 30px; /* 设置DIV内文本的行高为30像素*/```5.浮动布局可以使用CSS样式属性来设置DIV的浮动布局,如下所示:```cssdivfloat: left; /* 设置DIV的浮动为左浮动 */clear: both; /* 设置DIV下方没有浮动元素,用于清除浮动影响 */```6.盒模型可以使用CSS样式属性来设置DIV的盒模型,如下所示:```cssdivmargin: 10px; /* 设置DIV的外边距为10像素 */ padding: 10px; /* 设置DIV的内边距为10像素 */box-sizing: border-box; /* 设置DIV的盒模型为border-box,包含边框在内的宽度不变 */```以上是DIV的基本用法和常见的CSS样式属性。
网站建设培训教程CSS从入门到精通第一章 CSS简介 (4)第一节:什么是CSS? (4)什么是CSS (4)参见 (4)第二节:使用CSS的优势 (4)第二章 CSS入门例子 (4)示例 (4)第三章 CSS语法 (5)第一节:外部引用CSS (5)使用 link 标签引用CSS (5)使用 @import 引用CSS (5)第二节:内部引用CSS (6)第三节:内联引用CSS (7)第四节:CSS 选择符 -- CSS的名字 (7)选择符语法 (7)选择符取名规则 (7)常用的三种选择符 (8)选择符用法总结 (8)第五节:CSS 声明 (9)语法 (9)介绍两个常用的技巧 (9)第六节:CSS 注释 (9)语法 (10)示例 (10)第四章 CSS颜色 (10)CSS颜色表示方法 (10)注意: (11)第五章CSS背景 (11)第一节:CSS background-color 属性 (11)background-color -- 背景色,定义背景的颜色 (11)示例 (11)第二节:CSS background-image 属性 (12)background-image -- 定义背景图片 (12)示例 (12)第三节:CSS background-repeat 属性 (12)background-repeat -- 定义背景图片的重复方式 (12)示例 (13)第四节:CSS background-position 属性 (13)background-position -- 定义背景图片的位置 (13)示例 (13)第五节: CSS background-attachment 属性 (14)background-attachment -- 定义背景图片随滚动轴的移动方式 (14)示例 (14)第六节:CSS background 属性 (14)background -- 五个背景属性可以全部在此定义 (14)示例 (15)第六章 CSS文本 (16)第一节: CSS text-decoration 属性 (16)text-decoration -- 定义文本是否有划线以及划线的方式 (16)示例 (16)第二节: CSS white-space 属性 (17)white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 (17)示例 (17)第七章 CSS字体 (18)第八章 CSS边框 (18)第九章 CSS边外补白 (18)第一节: CSS margin 属性 (18)margin-top -- 定义上边外补白 (19)margin-right -- 定义右边外补白 (19)margin-bottom -- 定义下边外补白 (19)margin-left -- 定义左边外补白 (19)第十章 CSS边内补白 (19)padding -- 定义边内补白 (19)padding-top -- 定义上边内补白 (20)padding-bottom -- 定义下边内补白 (20)padding-left -- 定义左边内补白 (20)padding-right -- 定义右边内补白 (20)第十一章 CSS属性索引 (20)第一节:CSS2.1属性按功能索引 (20)CSS盒模式 (20)CSS视觉格式模型 (21)CSS视觉效果 (21)CSS列表 (21)CSS背景 (22)CSS字体 (22)CSS文本 (22)CSS颜色 (22)第一章 CSS简介第一节:什么是CSS?什么是CSS➢CSS是Cascading Style Sheets(层叠样式表)的简称.➢CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).➢在标准网页设计中CSS负责网页内容(XHTML)的表现.➢CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.➢可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.➢CSS是由W3C的CSS工作组产生和维护的.参见➢W3C的CSS主页/Style/CSS/➢在w3c网站上校验CSS的正确性/css-validator/第二节:使用CSS的优势➢内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.➢使用CSS可以减少网页的代码量,增加网页的浏览速度第二章 CSS入门例子示例➢定义文字的颜色<html><style type="text/css" media="all">p {color:red;}p1 { color:blue;}</style><body><p>color就代表颜色,我们使用红色 red 为文字颜色.</p><p1>你可以修改代码使用 blue 蓝色, yellow 黄色等.学习文字的颜色</p1> </body></html>这段代码显示的结果如下:第三章 CSS语法➢CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性.➢每个CSS选择符由1个或多个CSS属性组成.➢CSS是大小写敏感的,在CSS语法中推荐使用小写.第一节:外部引用CSSCSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).使用 link 标签引用CSS示例<head><link rel="stylesheet" type="text/css" href="/style.css" /></head>➢href -- 指定需要加载的资源(CSS文件)的地址URI➢rel -- 指定链接类型➢type -- 包含内容的类型,一般使用type="text/css"使用 @import 引用CSS➢示例<head><style type="text/css">@import url(/style.css);</style></head>相对路径与绝对路径加载文件的时候可以使用相对路径或者绝对路径.绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径./html/default.html就是绝对路径,/html/default.html也是绝对路径,C:winntsystem.sys也是绝对路径相对路径:相对于我们查看文档的路径.../default.html或者default.html或者../../default.html都是相对路径➢小结外部引用CSS中 link与@import的区别差别1:老祖宗的差别。
本文由xjt1024贡献doc文档可能在WAP端浏览体验不佳。
建议您优先选择TXT,或下载源文件到本机查看。
第一章:第一章:应知道1.1 DIV+CSS 的叫法是不准确的我想凡是来到 "这个专题" 的同学,很大部分是冲着DIV+CSS 来的,目的就是学习 DIV+CSS 的,说的再直接一些就是学习如何用 DIV+CSS 布局页面,如何从一张图片制作成标准的 DIV+CSS 页面。
如果你看完第一段还没有发现错误的话,那你就很有必要,接着往下看。
DIV+CSS 这种叫法其实是一种很错误的叫法,这是国人一厢情愿的叫法,而标准的叫法是什么呢?呵呵,没错,是 xHTML+CSS,不理解吧,我来细细给你说,如果下面的你能理解,保证面试的时候会有很大的帮助,同时也可以让你后面的学习更轻松。
为什么国人将这种页面布局的方法叫做 DIV+CSS?因为过去布局页面基本上都是用 Table 布局,也可以说是 Table+CSS,而现在布局页面呢,用 DIV,所以叫DIV+CSS,听起来也挺合理,认为这样布局出来的页面也就是标准页面,甚至有些人走了个极端,看到其他网站用到 Table,就会嘲笑页面做的不够标准,好似用不用 Table 成为了页面是否标准的一个标尺。
现在我可以告诉大家,凡是有着这种行为的,都学得不咋样,很皮毛!用了 Table 页面就不标准了?!纯粹无稽之谈,那什么才是标准页面呢?先看一个专业概念,WEB 标准,然后我会问三个问题,你来回答: WEB 标准不是某一个标准,而是一系列标准的集合。
网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。
对应的标准也分三方面:结构化标准语言主要包括 XHTML 和 XML,表现标准语言主要包括 CSS,行为标准主要包括对象模型(如 W3C DOM)、ECMAScript 等。
这些标准大部分由 W3C 起草和发布,也有一些是其他标准组织制订的标准,比如 ECMA(European Computer Manufacturers Association)的 ECMAScript 标准。
CSS网页设计标准教程课程设计简介随着互联网的普及,越来越多的人学习网页设计。
但是,许多人对CSS的理解都不够深入,只能做出简单的网页,并不能做出恰当的效果。
因此,在本课程设计中,我们将重点讲授CSS的使用,让学生们对CSS 有深入和全面的理解,掌握制作一流网页的技能。
学习目标本课程设计的学习目标如下:1.理解CSS的基本概念,掌握CSS的语法和基本知识点。
2.熟悉盒模型和文本属性等CSS层叠样式的基本属性。
3.掌握定位和浮动等CSS布局的基本方法和技巧。
4.练习使用CSS实现不同的网页设计效果。
5.学习常用的CSS框架和工具,提高工作效率。
课程安排本课程设计共分为7个章节,具体内容如下:第一章:CSS基础•CSS概述•CSS语法和选择器•三种CSS样式表:行内样式、嵌入式样式和外部样式表•CSS样式表的优先级和继承第二章:CSS样式属性•盒模型和文本属性•背景、边框、文本、字体、颜色等CSS属性•overflow、display、visibility、z-index等CSS属性第三章:CSS布局•浮动和清除浮动•定位和层级•相对定位、绝对定位、固定定位•弹性布局和栅格布局第四章:CSS选择器•常用选择器:ID选择器、类选择器、标签选择器、伪类选择器•层次选择器、属性选择器、通用选择器、伪元素选择器•选择器组合和选择器优先级第五章:CSS动画和过渡•CSS过渡的基本使用方法•CSS动画的基本使用方法•CSS动画的关键帧动画第六章:CSS预处理器•Less、Sass、Stylus等CSS预处理器的基本语法•CSS预处理器的变量、嵌套、混合等功能•使用CSS预处理器提高工作效率第七章:CSS框架和工具•Bootstrap框架的使用•jQuery库的基本使用方法•Webpack等前端构建工具的基本使用方法教学方法本课程设计采用“讲授+实践”相结合的教学方法,通过灵活的授课方式帮助学生深度理解CSS知识点的实现。
第一天XHTML CSS基础知识欢迎大家学习《十天学会web标准》,也就是我们常说的DIV+CSS。
不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准。
学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局。
如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂。
由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教程的目的。
本教程多以实例形式循序渐进讲解,实例涉及到哪些关键点或难点就讲解什么,较少讲解概念。
因为概念这些东西很难说明白,或者说明白你也不一定能听懂,听懂了也不一定能理解。
所以把概念留给大家以后再深入研究。
由于章节关系,没有把css和css hack单独分出,只是在用到的时候穿插入讲解了。
html基础和css基础只在第一节中介绍了几点重要的。
下面我们开始第一天的学习一、xhtml css基础知识首先说一下我们这节课的知识点1.文档类型2.语言编码3.html标签4.css样式5.css优先级6.css盒模型组成1)文档类型当我们用dreamweaver新建一下html格式文档时,查看源代码,会发现代码最上部有如下这句话:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句话标明本文档是过渡类型,另外还有框架和严格类型,目前一般都采用过渡类型,因为浏览器对XHTML的解析比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML的语法。
许多朋友在制作页面时,往往喜欢把这句删除掉,在这里建议大家一定要保留这句话,删除它后可能引起某些样式表失效或其它意想不到的问题。