HTML5+CSS3网页设计任务教程（第2版） 课件 单元3 CSS基本应用_第1页
HTML5+CSS3网页设计任务教程（第2版） 课件 单元3 CSS基本应用_第2页
HTML5+CSS3网页设计任务教程（第2版） 课件 单元3 CSS基本应用_第3页
HTML5+CSS3网页设计任务教程（第2版） 课件 单元3 CSS基本应用_第4页
HTML5+CSS3网页设计任务教程（第2版） 课件 单元3 CSS基本应用_第5页
已阅读5页，还剩44页未读， 继续免费阅读

下载本文档

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

文档简介

CSS基本应用单元3目录02CSS元素选择器的使用03内联式、嵌入式、外部式样式的使用01使用CSS设置body样式04测试样式优先级05创建盒子模型06CSS中float属性的使用07常用文本样式属性的使用08常用图片样式属性的使用09position的4种定位方式的使用10Chrome浏览器调试基本技巧3-1HTML5+CSS3网页设计任务教程（第二版）使用CSS设置body样式任务3-1使用CSS设置body样式任务3-1使用CSS设置body样式CSS是CascadingStyleSheets的缩写，即层叠样式表，在标准网页设计中，CSS负责网页内容在浏览器内的显示样式，如文字大小、字体颜色、元素位置等。CSS基本语法：selector{declaration1;declaration2;...declarationN}/*这里是注释*/body选择器是CSS中的基础选择器，用于对整个文档进行全局样式的设置。我们可以通过在CSS文件中为body元素添加样式来改变整个页面的风格。我们设置了背景颜色、字体、字号和字体颜色。这些样式将应用于整个文档的body元素。另外，我们也可以为body元素设置其他样式，如边距、边框和填充等。这些样式可以让网页的布局更加美观和整洁。CSS代码需要放在CSS文件或者<style>标签内，如果放在独立的CSS文件内，则页面需要调用：<linkrel="stylesheet"type="text/css"href="css/style.css"/>css/style.css为CSS文件存放的地址。任务3-1使用CSS设置body样式1、background-color:背景颜色，background-image:背景图像，background-repeat:背景重复，background-position:背景图像位置，background-attachment:如何设置固定的背景图像。2、margin:外边距，此处是指页边距，margin:20px（上、下、左、右各20px）;margin:20px40px（上、下20px；左、右40px）;margin:20px40px60px（上20px；左、右40px；下60px）;margin:20px40px60px80px（上20px；右40px；下60px；左80px）。3、font-size:字体大小。4、color:字体颜色，如果采用6位16进制数，前面需要加上”#”，注意字体颜色不是font-color。5、font-family:ComicSansMS,"微软雅黑";先写英文字体，再写中文字体，会优先匹配英文字体，但是在英文字体中找不到中文字符，这样中文就会自动使用后写的中文字体了。6、line-height:文本行高，一般采用em单位，1em代表一倍行距。3-2HTML5+CSS3网页设计任务教程（第二版）CSS元素选择器的使用1234CSS选择器标签选择器所谓标签选择器就是使用已有的HTML代码中的标签作为名称的选择器。例如：{font-size:12px;color:white;}类选择器为标签设置“class=CLASS名称”，类选择器定义时以“.”开头。格式为：.类选器名称{CSS样式代码；}通用选择器(通配选择器)

指的是当前页面上的所有标签都应用该样式

*{color:red;}

指所有元素,优先级非常低,

性能低

*{margin:0;padding:0}是指将所有元素的内外间距去除

ID选择器

即标记选择器，为标签设置“id=ID名称”，ID选择器定义时以“#”开头，ID选择器在一个HTML文件中只能使用一次。格式为：#ID选择器名称{CSS样式代码}任务3-2CSS元素选择器的使用〓

基础选择器1、组合选择器：也称为分组选择器，或并集选择器，用“,”将需要设置相同样式的多个选择器组合起来就构成了组合选择器。h1,p{background-color:yellow;}2、交集选择器：两个选择器构成，其中第一个为标签选择器，第二个为类选择器或ID选择器，两个选择器之间没有空格。p.hometown{background-color:yellow;}3、后代选择器：也称为包含选择器，即在选择器之间加入空格，用于选择指定选择器的后代元素，后面元素是前面元素的后代元素，是一种从属关系。divp{background-color:yellow;}任务3-2CSS元素选择器的使用〓

复合选择器4、子元素选择器：用来选择元素的子元素，父级标签写前面，子级标签写后面，中间跟一个“>”进行连接，符号左右两侧各保留一个空格。div>p{background-color:yellow;}5、兄弟选择器：是CSS3.0新增的一个选择器，分别使用“~”或者“+”连接两个元素，其中“~”表示某元素后所有同级的指定元素，强调所有的。“+”表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。div+p{background-color:yellow;}6、属性选择器：是选取标签带有某些特殊属性的选择器，使用[]括起来，一般用于<form>标签中的<input>标签。如input[type=”text”]表示type属性值为text的<input>标签。a[target=_blank]{background-color:yellow;}任务3-2CSS元素选择器的使用〓

复合选择器伪类选择器：用于向某些选择器添加特殊的效果。以“:”开头，分为链接伪类、结构伪类等。a:link{color:#FF0000;}/*未访问的链接*/a:visited{color:#00FF00;}/*已访问的链接*/a:hover{color:#FF00FF;}/*鼠标划过链接*/a:active{color:#0000FF;}/*已选中的链接*/任务3-2CSS元素选择器的使用〓

伪类选择器3-3HTML5+CSS3网页设计任务教程（第二版）内联式、嵌入式、外部式样式的使用任务3-3内联式、嵌入式、外部式样式的使用内联式：把CSS代码直接作为标签的style属性的内容写在现有的HTML标签

（如p,span...）中，如：<pstyle="color:red;font-size:12px;">表示这个段落中的文字大小是12像素，字体颜色是红色。嵌入式：也称作内部样式表，把CSS样式写在标签<styletype="text/css"></style>之间，并且一般情况下嵌入式CSS样式写在<head></head>之间。外部式：把CSS代码写在一个单独的外部文件中存放在根目录的CSS文件夹下面，这个CSS样式文件以“.css”为扩展名，在<head>标签内使用<link>标签将CSS样式文件链接到HTML文件内：

<linkhref="style.css"rel="stylesheet"type="text/css"/>一般外部式的样式文件名字为style.css。.任务3-3内联式、嵌入式、外部式样式的使用CSS三种使用方法40%15%15%20%20%3-4HTML5+CSS3网页设计任务教程（第二版）测试样式优先级任务3-4测试样式优先级任务3-4测试样式优先级通常我们可以将CSS的优先级由高到低分为六组：1、无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。2、第二高位的优先属性是在HTML中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。3、第三级优先的属性是由一个或多个id选择器来定义的。例如#id{margin:0;}会覆盖.classname{margin:3px;}。4、第四级的属性由一个或多个类选择器、属性选择器、伪类选择器定义。例如.classname{margin:3px;}会覆盖div{margin:6px;}5、第五级由一个或多个类型选择器定义。例如div{margin:6px;}覆盖*{margin:10px;}。6、最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。CSS优先级的优先顺序!important>内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器>通配选择器。3-5HTML5+CSS3网页设计任务教程（第二版）创建盒子模型任务3-5创建盒子模型1、内容（content）：内容包括了文本，块状盒子，图片，内容盒子的盒模型等等。2、内边距（padding）：内边距规定了内容与边框之间的填充距离。3、边框（border）：border默认为0；可以设置边框样式。4、外边距（margin）：外边距规定了盒子与盒子之间的距离，因此它不会被计算到盒子的总体宽度和高度之中，盒子内的盒子的外边距则会影响父级元素的宽度和高度。5、元素框的总宽度=内容（content）的width+padding的左边距和右边距的值+margin的左边距和右边距的值+border的左右宽度。6、元素框的总高度=内容（content）的height+padding的上下边距的值+margin的上下边距的值＋border的上下宽度。3-6HTML5+CSS3网页设计任务教程（第二版）CSS中float属性的使用任务3-6CSS中float属性的使用任务3-6CSS中float属性的使用我们可以给<div>设置float属性，让块元素转变为行元素，实现两个块元素并排显示。float是CSS属性，它可以让元素“浮动”到其容器的左侧或右侧。当一个元素设置了float属性后，它就会向左或向右移动，直到碰到父容器或另一个浮动元素的边缘为止。float属性的值有：1.none：元素将保持其原始位置，不会受到影响。2.left：元素将向左移动，直到达到其最近的无边边距元素或文档流中的其他元素。3.right：元素将向右移动，直到达到其最近的无边边距元素或文档流中的其他元素。4.top：元素将向上移动，直到达到其最近的无边边距元素或文档流中的其他元素。5.bottom：元素将向下移动，直到达到其最近的无边边距元素或文档流中的其他元素。6.inline-block：元素将转换为一个内联块元素，其宽度将根据其宽度值自动调整。7.inline：元素将保持其原始位置，但将被视为一个内联行元素。8.float：元素将浮起来，直到达到其最近的无边边距元素或文档流中的其他元素。3-7HTML5+CSS3网页设计任务教程（第二版）常用文本样式属性的使用任务3-7常用文本样式属性的使用〓<div>居中margin-left:auto;margin-right:auto;设置div左右居中任务3-7常用文本样式属性的使用〓

文字左右居中text-align:center;设置文字左右居中任务3-7常用文本样式属性的使用〓

文字上下居中如果只有一行文字，可通过设置块状元素的高度属性height与文本的行高属性line-height的属性值相等实现任务3-7常用文本样式属性的使用〓CSS3文本阴影文本设置阴影使用text-shadow属性，其使用格式为：text-shadow:h-shadowv-shadowblurcolor;h-shadow表示水平阴影的位置，允许负值；v-shadow表示垂直阴影的位置，允许负值；blur表示阴影模糊的距离；color表示阴影的颜色。任务3-7常用文本样式属性的使用〓

自定义字体在CSS3之前，WEB设计师必须使用已在用户计算机上安装好的字体。通过CSS3WEB设计师可将喜欢的字体文件存放到WEB服务器上，它会在需要时被自动下载到用户的计算机上。这种字体我们称之为自定义字体，是在CSS3@font-face规则中定义的。其使用的语法格式为：@font-face{font-family:<YourWebFontName>;src:<source>[<format>][,<source>[<format>]]*;[font-weight:<weight>];[font-style:<style>];}任务3-7常用文本样式属性的使用〓

远程调用字体引入<linkhref="/css?family=Condiment"rel="stylesheet"type="text/css">代表远程调用Condiment字体3-8HTML5+CSS3网页设计任务教程（第二版）常用图片样式属性的使用任务3-8常用图片样式属性的使用〓border-radius属性CSS3border-radius指定每个圆角如果你在border-radius属性中只指定一个值，那么将生成4个圆角。但是，如果你要在四个角上一一指定，可以使用以下规则：四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。三个值：第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角。两个值：第一个值为左上角与右下角，第二个值为右上角与左下角。一个值：四个圆角值相同。任务3-8常用图片样式属性的使用〓border-radius属性任务3-8常用图片样式属性的使用〓border-radius属性渐变属性是实现渐变效果的重要方式，其中包括线性渐变、径向渐变和重复渐变。线性渐变：在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。基本语法为bacground-image：linear-gradient（渐变角度，起始颜色，结束颜色）。径向渐变：在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。基本语法为：background-image：radial-gradient（渐变形状圆心位置，起始颜色，结束颜色）。任务3-8常用图片样式属性的使用〓CSS3渐变任务3-8常用图片样式属性的使用〓border-radius属性CSS滤镜（CSSfilters）是一种CSS属性，它可以应用于元素的可视呈现，用于实现各种视觉效果和图像处理效果。滤镜属性允许你修改元素的外观，如调整亮度、对比度、模糊度等。以下是一些常用的CSS滤镜属性：1、blur()：给元素添加模糊效果。2、brightness()：调整元素的亮度。3、contrast()：调整元素的对比度。4、grayscale()：将元素转换为灰度图像。5、sepia()：给元素添加复古色调。6、saturate()：调整元素的饱和度。7、hue-rotate()：旋转元素的色相。8、invert()：反转元素的颜色。这些是一些常用的CSS滤镜属性，你可以根据需要使用其中的一个或多个属性来实现特定的视觉效果。请注意，滤镜属性在不同浏览器中的兼容性可能会有所不同，因此在使用时需要进行相应的浏览器兼容性检查。任务3-8常用图片样式属性的使用〓CSS3Filter（滤镜）属性在计算机查找网页文档时，计算机需要明确该网页文档所在位置。我们把网页文档所在的位置称为路径。网页中的路径分为绝对路径和相对路径两种，具体介绍如下：1、绝对路径绝对路径就是网页上的文档或目录在盘符(即C盘、D盘等)中的真正路径，例如“D：\案例源码\chapter02limagesbannerl.jpg”就是一个盘符中的绝对路径。再如完整的网络地址“/images/logo.gif”。2、相对路径相对路径就是相对于当前文档的路径。相对路径没有盘符，通常是以HTML网页文档为起点，通过层级关系描述目标图像的位置。3、相对路径使用的特殊符号以下为建立路径所使用的几个特殊符号，及其所代表的意义。"./"：代表目前所在的目录。"../"：代表上一层目录。以"/"开头：代表根目录。任务3-8常用图片样式属性的使用〓相对路径和绝对路径3-9HTML5+CSS3网页设计任务教程（第二版）position的4种定位方式的使用任务3-9position的4种定位方式的使用〓staticstatic：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。任务3-9position的4种定位方式的使用〓relativerelative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。任务3-9position的4种定位方式的使用〓absoluteabsolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。

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

温馨提示

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

最新文档

评论

0/150

提交评论