项目4 CSS样式基础_第1页
项目4 CSS样式基础_第2页
项目4 CSS样式基础_第3页
项目4 CSS样式基础_第4页
项目4 CSS样式基础_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

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

文档简介

项目四CSS3基础了解CSS3，认识CSS常用属性及使用，学会CSS的引用学习目标Contents目录任务1任务2任务3CSS3简介CSS选择器CSS3的引用任务4CSS3常用属性任务5CSS3盒子模型1CSS发展历程2任务1CSS3简介什么是CSSCSS语法3任务2CSS选择器标签选择器：标记名称{属性:属性值;属性:属性值;···}例：p{text-align:center;color:red;font-size:18px;background:gray;}2.id选择器：

#id名称{属性：属性值；属性：属性值；……}例：#firstname{background-color:yellow;}3.class选择器：.class名称{属性：属性值；属性：属性值；……}例：.bingdd{font-family:黑体;font-size:30px;text-align:center;}任务2CSS选择器4.伪类选择器a:link当超链接没被访问过时,所设置的样式应用于超链接。a:visited当超链接已被访问过时,所设置的样式应用于超链接。a:hover当鼠标指针移动到超链接之上时,所设置的样式应用于超链接。a:active当超链接被点击未释放时,所设置的样式应用于超链接。例：a:link{color:blue;text-decoration:none}a:visited{color:gray;text-decoration:none}a:hover{color:red;text-decoration:underline}a:active{color:purple;text-decoration:none}任务2CSS选择器5.组选择器

组选择器就是多个选择器使用同一个样式或者同一组样式，多个选择器之间用逗号（,）隔开，其语法形式如下。<选择器1>,<选择器2>，<选择器3>{定义样式}例h1,h3,p{color:red;font-family:”微软雅黑”}其表示h1,h2,p选择器的字体颜色均为红色，字体为“微软雅黑”。6.层级选择器(后代择器)根据层级关系选择后代标签，以选择器1

选择器2开头，主要应用在标签嵌套的结构中减少命名。后代选择器用于控制容器对象中的子对象，使其他容器对象中的同名子对象不受影响。书写后代选择器时将容器对象写在前面,子对象写在后面，中间用空格分隔。若容器对象有多层，则分层依次书写。.d1.green{color:green}#son.text{color:blue;font-size:25px;}.green{color:red;}7.通配符选择器：*{属性:属性值;属性:属性值;……}例：*{margin:0;padding:0}任务3CSS的引用3.1内部引用内部引用只适用于对单个网页的页面进行设置。也叫作内嵌式引用。是在head部分的<style>元素中进行定义。其语法格式如下。……<head><styletype="text/css">选择器1{属性:属性值;属性:属性值;……}/*注释内容*/选择器2{[属性:属性值;属性:属性值;……}……</style></head> ……任务3CSS的引用3.2外部引用语法格式:……<head><linkhref="外部样式表文件路径"rel="stylesheet"type="text/css"></head>……任务3CSS的引用3.3行内引用行内引用也叫作内联样式，就是将样式信息直接定义在HTML标签的style属性中，由于内联样式定义在标签内部，所以它只对所在的标签有效任务四CSS3常用属性4.1背景属性

网页可以通过设置背景属性使网页变得丰富多彩，设置背景属性主要包括设置背景颜色、设置背景图像、设置背景图像平铺、设置背景图像位置等。1.设置背景颜色利用background-color属性设置一个元素的背景颜色。格式：background-color:颜色值颜色值可以使用以下几种方式定义：十六进制

-如:"#ff0000"rgba-如:“rgb(255,45,35,1.00)”(r:表示红色;g表示绿色;b:表示蓝色；a:表示透明度取[0-1],例：1表示透明，0.5表示半透明，0表示透明)。颜色名称

-如:“blue”、“red”、“orange”等。任务四CSS3常用属性2.设置背景图像除了可以用背景颜色设置背景属性外，我们还可以利用background-image属性设置背景图像。格式：background-image:url(图像路径)*技巧提示：一个文档中可以同时设置背景图像和背景颜色，但优先显示背景图像，只有当背景图像没有铺满文档时，才会用背景颜色补上。3.设置背景图像平铺默认情况下，背景图像会自动沿着水平和竖直两个方向平铺。通过background-repeat属性可以控制平铺的方向以及平铺或者不平铺。该属性的取值如下。repeat：默认值，设置背景图像在垂直方向和水平方向平铺(完全平铺)。repeat-x：设置背景图像在水平方向平铺。repeat-y：设置背景图像在垂直方向平铺。no-repeat：设置背景图像不平铺（图像位于元素的左上角，仅显示一次）。利用background-position属性控制背景图片的位置，background-position属性设置两个属性值，两个属性值之间用空格隔开，用于定义背景图像在页面的水平方向和垂直方向的位置。例如，“leftbottom”表示背景图像水平方向位于左侧，垂直方向位于下方。background-position属性接受三种值：关键词：水平方向关键词为left、center、right;垂直方向关键词为top、center、bottom。两个关键词的顺序任意。若只有一个关键词，缺省的另一个关键词默认是center。例如“background-position:bottom”等价于“background-position:centerbottom”长度值：如px。百分值：%。通过百分比数值将背景图像与元素的指定点对齐。其中，“0%0%”表示图像的左上角与元素的左上角对齐；“100%100%”表示图像的右下角与元素的右下角对齐；“50%50%”表示图像的50%50%与元素的50%50%对齐。4.设置背景图像的位置固定背景图像，就是当我们在页面输入任何内容时或者移动鼠标，背景图像都不会发生变动。利用background-attachment属性可以设置背景图像的固定。其值有两个：scroll和fixed。scroll(默认值):图像随页面一起滚动。fixed:图像固定在屏幕上，不随页面滚动。4.设置背景图像的固定任务四CSS3常用属性4.2文本属性text-align属性text-decoration属性text-indent属性line-height属性text-shadow属性任务四CSS3常用属性4.3字体属性font-family属性font-size属性.font-style属性font-variant属性font-weight属性font属性4.4多媒体对象除了文本和图片以外，在网页中还可以插入音频、视频、动画等多媒体对象，以获得丰富的视觉体验，给观众带来全新的感受。任务四CSS3常用属性1.使用<video>标签为页面添加视频属性值功能srcurl指定视频播放的地址autoplayautoplay用于设置视频是否自动播放,有autoplay属性，表示自动播放，去掉autoplay属性表示不自动播放controlscontrols出现该属性，则需要浏览器启动播放控制栏，播放控制栏包括播放、暂停、音量控制等looploop用于指定视频是否循环播放，出现该属性，表示循环播放；不出现，则不循环播放posterurl用于指定一张图片，在当前视频数据正在加载,或者是视频地址错误等等时显示这张图片（也叫作预览图）preloadnone、metadata、auto定义视频是否预加载。None:表示不加载；metadata:表示部分预加载；auto(默认值):全部加载mutedmuted设置视频的音频输出应该被静音widthpx设置视频的宽度heightpx设置视频的高度任务四CSS3常用属性4.3字体属性font-family属性font-size属性.font-style属性font-variant属性font-weight属性font属性4.4多媒体对象除了文本和图片以外，在网页中还可以插入音频、视频、动画等多媒体对象，以获得丰富的视觉体验，给观众带来全新的感受。任务四CSS3常用属性1.使用<video>标签为页面添加视频属性值功能srcurl指定视频播放的地址autoplayautoplay用于设置视频是否自动播放,有autoplay属性，表示自动播放，去掉autoplay属性表示不自动播放controlscontrols出现该属性，则需要浏览器启动播放控制栏，播放控制栏包括播放、暂停、音量控制等looploop用于指定视频是否循环播放，出现该属性，表示循环播放；不出现，则不循环播放posterurl用于指定一张图片，在当前视频数据正在加载,或者是视频地址错误等等时显示这张图片（也叫作预览图）preloadnone、metadata、auto定义视频是否预加载。None:表示不加载；metadata:表示部分预加载；auto(默认值):全部加载mutedmuted设置视频的音频输出应该被静音widthpx设置视频的宽度heightpx设置视频的高度语法格式<videosrc=“视频文件路径”controls=“controls”></video>4.4多媒体对象任务四CSS3常用属性2.使用audio标记符插入音频属性值功能srcurl指定音频播放的地址autoplayautoplay用于设置音频是否自动播放,有autoplay属性，表示自动播放，去掉autoplay属性表示不自动播放controlscontrols出现该属性

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

温馨提示

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

最新文档

评论

0/150

提交评论