笔记代码网页公开课_第1页
笔记代码网页公开课_第2页
笔记代码网页公开课_第3页
笔记代码网页公开课_第4页
笔记代码网页公开课_第5页
已阅读5页，还剩59页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

北京传智播客教育网页技术css讲师：孙书华

邮箱：网页技术css学习目标(一)理解CSS的基本概念掌握CSS各种选择器掌握文字属性掌握段落属性掌握背景属性掌握列表属性网页技术csscss应用赏析(颜色、背景)网页技术css什么是css全拼：cascadingstylesheet，层叠样式表一般我们在网页上看到的颜色、背景、字体的大小等样式内容都是通过css实现出来的网页技术csscss优点使网页代码更少，网页下载更快实现了内容与样式的分离，使网站维护更快捷使网页与浏览器的兼容性更好css思想对象属性值网页技术csscss语法结构每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束在css的三个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）<bodystyle=“color:red;font-size:25px;”>网页技术css引入css的4种方式1.行内样式<pstyle="color:#ff0000;font-size:20px;text-decoration:underline;">正文内容1</p>2.内部样式<styletype="text/css">p{ color:#0000ff; text-decoration:underline; }</style>网页技术css引入css的4种方式3.外部样式<linkhref="07-07.css"type="text/css"rel="stylesheet">4.样式嵌套样式@importurl(“被引用的css文件”);网页技术css选择器分类标签选择器ID(identify)选择器类别选择器通用选择器

*{margin:0;padding:0;}包含(派生)选择器divp{background:red;}分组选择器div,span,h1{color:blue;}网页技术css选择器分类--伪类选择器:link定义超链接默认样式:visited定义访问过的样式:hover定义鼠标经过的样式:active定义鼠标按下的样式a:link{color:#ff0000;}/*默认样式，超链接文字为红色*/a:visited{color:#00ff00;}/*访问过后，超链接文字为绿色*/a:hover{color:#0000ff;}/*鼠标经过，超链接文字为蓝色*/a:active{color:#ffff00;}/*鼠标按下时，超链接文字为黄色*/网页技术css选择器优先级行内样式>id选择器>类选择器>标签选择器>通用选择器

<styletype="text/css">#show1{color:gold;}.show{color:pink;}h1{color:red;}*{color:green;}</style></head><body> <h1id="show1"class="show"style="color:gray;">这是选择器优先级测试</h1></body>网页技术css设置范围属性Width、height width:200px;height:150px; width:60%; height:50%;网页技术css背景样式背景颜色background-color背景图像background-image

background-image：url（图像地址）;背景位置background-position水平：leftrightcenter垂直：topcenterbottom数字：100px200px背景重复background-repeat Repeat(默认)背景图像平铺排满整个网页 repeat-x背景图像只在水平方向上平铺； repeat-y背景图像只在垂直方向上平铺。 no-repeat背景图像不平铺网页技术css背景样式背景附着background-attachment

scroll：表示背景图像随对象滚动而滚动，是默认选项； fixed：表示背景图像固定在页面上不动，只有其他的内容随滚动条滚动。背景复合属性background

颜色(color) 背景图片(url(***.jpg)) 是否平铺(repeat) 水平位置(x轴位置) 垂直位置(y轴位置)

background:redurl(hsvip.gif)no-repeat10px30px;网页技术css文本样式文字线修饰：text-decoration none：表示不修饰，是默认值；

underline：表示对文字添加下划线；

overline：表示对文字添加上划线；

line-through：表示对文字添加删除线；

blink：表示文字闪烁效果。文本缩进：text-indent text-indent:10px;文本行高：line-height

line-height：行高值(像素)网页技术css文本样式水平对齐text-alignleft：左对齐；right：右对齐center：居中对齐；字号：font-size文字颜色：color

color:#292378; //6个十六进制数获得颜色

color:#A64; //#AA6644的缩写 color:red; //颜色关键字定义颜色 color:rgb(100,159,170);//rgb定义颜色CSS中文完全参考手册.chm---->附录----->html颜色表

颜色名称全集网页技术css文本样式文字加粗：font-weight

normal：正常 bold：加粗文字倾斜：font-style

normal：正常字体 italic：以斜体显示字体；网页技术css文本样式字体：font-family font-family：“字体1”，”字体2“，…分类： 有衬线(serif) 无衬线(sansserif)西文： 有衬线TimesNewRoman 无衬线Arial、helvetica中文： 有衬线宋体 无衬线黑体网页技术css文本样式--字体：font-family注意点：1.英文字体比中文字体多开发者设计的字体使用没有问题，访问者的电脑不见得会有全部字体，这时候我们要有措施（备份字体）。文字里边既有中文还有英文，需要分开来设置（先英文字体，后中文字体）font-family:”TimesNewRoman”,simhei;先特殊字体,再默认字体要正确选择字体(tahoma) 举例子(英文信息，字母对齐)网页技术css列表符号ul样式列表符号list-style-type： list-style-type:disc; 实心圆（默认值） list-style-type:circle; 空心圆 list-style-type:square; 实心方块 list-style-type:none; 无符号图像符号list-style-image

list-style-image:url(图片地址)网页技术css项目案例练习引导分析：这个案例相对来说比较简单，只要用到了CSS中文字和段落以及背景属性，首先案例分为上下两部分，“全才魔法师”放到h标签中，并设置其颜色为红色，字体大小14px，并设置其下划线。接下来的内容放到段落P标签中，给p宽度并设置其字体12px。网页技术cssdiv+css布局什么是div+css布局打个比方，现在北京发展非常快，各个地方都在盖高楼大厦，大楼盖好了就要搞装修，这样整体看上去才会非常漂亮。div装修之前是一个红砖白墙的整体布局Css就是负责给大楼进行的精装修专业术语讲

div是内容的容器

css设置容器内容的外观和位置网页技术css页面布局发展的三个阶段table网页设计

内容和样式(外观和布局)混合table+css网页设计

table布局,css指定外观div+css网页设计 div放内容,css指定样式(外观和布局), 内容和样式彻底分离网页技术cssDiv+css优势符合W3C标准。微软等公司均为W3C支持者。搜索引擎更加友好样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在主流门户网站均使用div+css布局，像sohu，163，sina等CSS代码非常简洁，极大节省带宽表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。网页技术cssdiv+css学习目标(二)了解布局标签DIV和SPAN的含义及使用掌握使用DIV布局的原理——盒子模型盒子margin、padding和border属性熟练使用浮动属性内联元素与块状元素熟练使用清除属性掌握网页简单布局网页技术css学习重点盒模型外边距、边框、内边距float属性的应用网页技术css盒模型展示我们使用的div、p、li、h1等标签都可称之为是盒子模型网页技术css盒模型拆分网页技术css盒子的范围一个盒子实际占据的宽度和高度由内容+内边距+边框+外边距组成即内容width+padding+border+margin网页技术css下面效果图的实现主要用到了边框、边距和填充属性代码如下网页技术cssborder边框样式属性border-stylesolid实线dashed虚线dotted点线边框double双线none无边框border-style:样式值或border-top-style：样式值border-bottom-style：样式值border-left-style：样式值border-right-style：样式值网页技术cssborder边框宽度属性border-widththin细medium中Thick粗数值2pxborder-width：宽度值或border-top-width：宽度值border-bottom-width：宽度值border-left-width：宽度值border-right-width：宽度值网页技术cssborder边框颜色border-colorborder-color:颜色值或border-top-color：颜色值border-right-color：颜色值border-bottom-color：颜色值border-left-color：颜色值网页技术cssborder边框复合属性border：粗细样式颜色;或border-top：粗细样式颜色;border-bottom：粗细样式颜色;border-right：粗细样式颜色;border-left：粗细样式颜色;网页技术cssmargin外边距填充属性margin是对外元素的距离，用来控制元素本身的浮动位置

四边距margin

上边距margin-top

下边距margin-bottom

左边距margin-left

右边距margin-rightmargin10px20px30px40px;提供一个，用于的四边；提供两个，第一个用于上－下，第二个用于左－右；如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；提供四个参数值，将按上－右－下－左的顺序作用于四边；margin-topmargin-left网页技术csspadding内边距填充属性padding是对内元素，用来控制内容与边框的距离位置四边填充padding上填充

padding-top下填充padding-bottom左填充

padding-left右填充

padding-rightpadding10px20px30px40px;提供一个，用于的四边；提供两个，第一个用于上－下，第二个用于左－右；如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；提供四个参数值，将按上－右－下－左的顺序作用于四边；divpadding-toppadding-left我是内容区，距离边框有距离网页技术css外边距、内边距、边框paddingmarginmargin-toppadding-topborder我是内容区域border-top网页技术css外边距、内边距、边框案例分析网页技术css样式初始化浏览器会为特定标签添加边框、边距样式如p段落标签上下有空白利用图片做超链接，图片会有边框div盒子模型元素会和浏览器左边沿和上边沿有距离ul的左边沿和上边沿也有距离等等网页技术css样式初始化*{margin:0;padding:0;border:0;}网页技术css布局属性(float和clear)clear

该属性的值指出了不允许有浮动对象的边 clear:none|left|right|both；float 该属性的值指出了对象是否及如何浮动 float:none|left|right;网页技术cssfloat浮动布局属性与生活常识网页技术css浮动效果网页技术css浮动3个div正常显示如下浮动后：网页技术css浮动效果如下是设置第1个向左浮动float:left;第2个div向右浮动float:right;第三个清除浮动网页技术css浮动效果以下有若干个div，它们都向左浮动，则它们会像流水一样，依次排开网页技术css浮动效果如果其中某个元素的高度超出了其他元素的正常高度，则会将其他元素挤走.网页技术cssclear清除浮动两个div正常显示第一个div左浮有何异常，淡蓝色盒子哪去了网页技术cssclear清除浮动现在就正常了，此时是设置第2个盒子有清除左浮动属性。clear:left;网页技术cssclear清除浮动现在又是什么情况呢，明明蓝色盒子在下边，现在怎么又跑上边来了呢?是橘色右浮动，蓝色盒子顺势就跑上来了(float:right;)。如何让蓝色盒子保持原来的位置呢。(请看下页)网页技术cssclear清除浮动如何让现在是让蓝色盒子保持原地不动。这时需要设置清除右浮动元素，clear:right;如果这样写麻烦，一会左一会右的，可以这样clear:both; 两边同时清除。网页技术cssclear clear:none; 默认值 clear:left; 左边不允许有浮动元素 clear:right; 右边不允许有浮动元素 clear:both; 两边都不允许有浮动元素网页技术css案例练习网页技术css内联元素和块级元素行内元素就好像一个单词；块级元素就好像一个段落。每个块级元素都是从一个新行开始显示。行内元素相当一个小容器，块级元素是大容器，<div>相当于一个大容器，。<span>就是小容器，大容器可以放一个小容器。块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去常用的块元素（div、dl、form、h1-6标题、hr、ol和li、p、table、ul和li）常用的行内元素(a、br、img、input、select、span-常用内联容器，textarea）网页技术css内联元素和块级元素区别：内联元素与块状并不是完全无关的东西,可以相互转换display:block;display:inline;超链接设置宽和高，可以转化bloc

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论