项目一任务三 制作“剪纸”页面_第1页
项目一任务三 制作“剪纸”页面_第2页
项目一任务三 制作“剪纸”页面_第3页
项目一任务三 制作“剪纸”页面_第4页
项目一任务三 制作“剪纸”页面_第5页
已阅读5页，还剩49页未读， 继续免费阅读

下载本文档

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

文档简介

非遗文化长廊制作“剪纸”页面CONTENTS目录CSS概述第一部分CSS基础第二部分字体样式属性第三部分CONTENTS目录文本改观属性第四部分CSS概述第一部分CSS概述CSS（层叠样式表，CascadingStyleSheets）是一种用于定义HTML元素样式的计算机语言。它主要用于控制网页的外观和布局，使网页具有更好的视觉效果和用户体验。CSS基础第二部分CSS基础1.CSS样式规则CSS的样式规则为：选择器{属性1:属性值1;属性2:属性2值;...}属性属性值CSS基础1.CSS样式规则1.CSS样式中的选择器对大小写敏感。2.CSS样式中属性值与单位之间不要出现空格，否则会造成浏览器解析错误。CSS基础2.CSS样式表的引入方法行内式内嵌式外链式CSS基础2.CSS样式表的引入方法——行内式行内式也称为内联样式，行内式的基本语法格式如下：<标签名style=“属性1:属性值1;属性2:属性2值;...”>内容</标签名>CSS基础如在<h1>标记中通过行内式引入CSS样式，实现标题字号28px，2倍行高，居中对齐。2.CSS样式表的引入方法——行内式<h1style="font-size:28px;line-height:2em;text-align:center">山居秋暝</h1>CSS基础2.CSS样式表的引入方法——内嵌式内嵌式样式表（也称为内部样式表）是一种将CSS代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义的方式。内嵌式的基本语法格式如下：<styletype=“text/css”>选择器{属性1:属性值1;属性2:属性2值;...}</style>CSS基础如为<h1>标记中通过内嵌式引入CSS样式，实现标题字号28px，2倍行高，居中对齐。2.CSS样式表的引入方法——内嵌式1<styletype="text/css">2h1{3font-size:28px;4 line-height:2em;5 text-align:center;6}7</style>CSS基础2.CSS样式表的引入方法——外链式外链式样式表（ExternalCSSStyleSheets）是一种将CSS样式规则保存在单独的.css外部样式表文件中，并通过HTML文档中的<link>标签将其链接到网页的方法。外链式的基本语法格式如下：<head><linkhref=“CSS文件的路径”type=“text/css”rel=“stylesheet”/></head>CSS基础2.CSS样式表的引入方法——外链式href：定义链接的外部样式表文件的路径。type：指定链接文件的类型，属性值为“text/css”，表示链接的文件是CSS样式表。rel：属性值为stylesheet，表示当前HTML文件与被链接的CSS文件之间的关系。CSS基础2.CSS样式表的引入方法——外链式h1{font-size:28px;line-height:2em;text-align:center;}style.css文件<linkhref=“style.css”type=“text/css”rel=“stylesheet”/>example3-1.html文件CSS基础3.CSS基础选择器标签选择器类选择器id选择器通配符选择器CSS基础3.CSS基础选择器——标签选择器标签选择器（TagSelector）通过指定HTML标签名称来选择所有该类型的标签，语法格式如下：标签名{属性1:属性值1;属性2:属性2值;...}CSS基础3.CSS基础选择器——标签选择器如下面代码：p{font-size:16px;color:red;}这个选择器会选择文档中所有的<p>标签，并将它们的颜色设置为红色,字号设置为16px。CSS基础3.CSS基础选择器——类选择器类选择器（ClassSelector）通过类名来选择具有特定类名的元素。类选择器使用“.”（英文点号）进行标识，其后紧跟类名，语法格式如下。.类名{属性1:属性值1;属性2:属性2值;...}类名严格区分大小写，且不能以数字开头，一般采用小写的英文字符。CSS基础3.CSS基础选择器——类选择器如下面代码：17<pclass="one">空山新雨后，天气晚来秋。</p>18<pclass="two">明月松间照，清泉石上流。</p>19<pclass="two">竹喧归浣女，莲动下渔舟。</p>第17行使用class属性为<p>标签设置类名“one”，第18、19行分别使用class属性为<p>标签设置相同的类名“two”。CSS基础3.CSS基础选择器——id选择器id选择器（idSelector）用以通过唯一的ID来选择一个特定的元素。Id选择器使用“#”进行标示，其后紧跟id名，语法格式如下。#id名{属性1:属性值1;属性2:属性2值;...}CSS基础3.CSS基础选择器——id选择器如下面代码：#three{color:#0e81df;}将id选择器应用到正文中，设置字体的颜色。<pid="three">[唐]王维</p>添加id选择器CSS基础3.CSS基础选择器——通配符选择器通配符选择器（UniversalSelector）匹配文档中的所有元素。通配符选择器用“*”进行标示，语法格式如下。*{属性1:属性值1;属性2:属性2值;...}常用于清除样式字体样式属性第三部分字体样式属性文字是网页的重要元素，CSS提供了丰富的字体样式属性，使得开发者能够灵活地控制网页中的文本显示效果。通过合理使用这些属性，可以极大地提升网页的视觉效果和用户体验。字体样式属性1.font-family在CSS中，使用font-family设置文本的字体。网页中常用的字体包括宋体、微软雅黑、黑体等。h1{font-family:“黑体”;}p{font-family:Arial,“TimesNewRoman”,“微软雅黑黑体”;}以上语句声明了HTML页面中h1标题和文本段落标题的字体。在多种字体声明时，英文字体放在前面，中文字体放在后面，并且，如果字体名称中存在空格，如TimesNewRoman，则需要使用双引号将其引起来。字体样式属性2.font-size在CSS中，使用font-size设置文本的字体。其值可以是像素（px）、倍率（em）、百分比（%）等。h1{font-family:“黑体”;font-size:18px;}p{font-family:Arial,“TimesNewRoman”,“微软雅黑黑体”;font-size:14px;}字体样式属性3.font-weight在CSS中，可以使用font-weight精细设置文本的粗细，而且，CSS还可以将本身是粗体的文字变成正常粗细。标记显示效果normal默认值，文字以标准方式显示bold文字粗体显示bolder文字以比粗体更粗的方式显示lighter文字以比粗体更细的方式显示100-900共9个层次，400对应标准normal，700对应粗体bold，数字越大字体越粗。表1-3-1

font-weight属性值字体样式属性4.font-style在CSS中，还可以使用定义文本风格，如斜体、倾斜等。可能的值包括normal（默认）、italic和oblique。表1-3-2

font-style属性值标记显示效果normal默认值，文字以标准方式显示italic浏览器显示斜体的样式oblique浏览器显示倾斜的字体样式字体样式属性5.font在CSS中，使用font属性可以综合定义字体样式，其基本语法格式如下：选择器{font:font-stylefont-weightfont-size/line-heightfont-family}使用font属性时，需按语法格式中顺序依次书写各属性值，且以空格隔开。字体样式属性5.fontp{font-family:Arial,“TimesNew Roman”,“微软雅黑黑体”;font-size:14px;font-style:italic;font-weight:bold;font-variant:small-caps;line-height:30px;}p{font:italicsmall-capsbold 14px/30pxArial,“Times New Roman”,“微软雅 黑”;}字体样式属性5.font在使用font设置文本样式时，不需要设置的属性可以忽略，这时会采取默认值，但必须保留font-size属性和font-family属性，否则font属性将不起作用。字体外观属性第四部分字体外观属性CSS的文本外观属性是一组用于控制HTML和CSS中文字样式的属性，包括但不限于字体、大小、颜色、对齐方式、装饰效果和大小写变换等。文本外观属性共同作用，使开发者能够精确地控制网页中的文本样式，可以帮助开发者更好地设计和美化网页内容。字体外观属性1.text-align在CSS中，使用text-align设置文本的水平对齐方式。可以是左对齐（left）、右对齐（right）、居中对齐（center）或两端对齐（justify）。默认值取决于文本的方向：如果方向是左到右，则默认为左对齐；如果方向是右到左，则默认为右对齐。字体外观属性1.text-alignh1{font:18px/30px“黑体”;text-align:center;}p{font:14px/30pxArial,“TimesNew Roman”,“微软雅黑”;text-align:center;}字体外观属性1.text-aligntext-align属性仅适用于块元素，对行内元素无效。如果需要设置图像居中对齐，可以为图像添加一个父标签，然后对父标签设置text-align属性。字体外观属性2.color在CSS中，使用color属性设置文本颜色时，可以使用颜色的英文名称、十六进制值或者RGB值。h1{color:red;}h1{color:#FF0000;}h1{color:rgb(255,0,0);}左侧代码均可以将标题颜色设置为红色字体外观属性3.text-indent在CSS中，使用text-indent设置文本的首行缩进，其值可以是不同单位的数值，如px、em、或%为单位的数值，通常使用em为单位的数值。.one{text-indent:2em;}.two{text-indent:50px;}段落1首行缩进2字符，段落2首行缩进50px,随着段落2字号发生变化，相对位置也会发生变化。字体外观属性3.text-indenttext-indent属性仅适用于块元素，对行内元素无效。字体外观属性4.text-decoration在CSS中，text-decoration属性用于设置文本的下划线、上划线、删除线等装饰效果。标记显示效果none默认值，无文本装饰效果underline文本加下划线overline文本加上划线Line-through文本加删除线表1-3-4

text-decoration属性值字体外观属性5.letter-spacing在CSS中，可以使用letter-spacing设置字间距，其值可以是不同单位的数值，如px、em为单位的数值。当设置负数时，表示缩小间距。该属性的默认值是normal。h1{letter-spacing:1.5em;}左侧代码将案例中的标题字间距增大字体外观属性5.letter-spacingletter-spacing属性作用于英文时，设置的是字母间距。字体外观属性6.word-spacingword-spacing属性仅对英文有效，对中文无效。与letter-spacing属性相似，可以设置负数，可以使用不同单位的数值作为属性值，用来设置单词间距。字体外观属性7.line-heightline-height属性用于设置行间距，即字符的垂直间距，其值可以是不同单位的数值，如px、em、或%为单位的数值。.one{text-indent:2em;line-height:1.5em;}.two{text-indent:50px;Line-height:18px;}段落1和段落2设置了行高字体外观属性8.text-transform在CSS中，text-transform属性用于设置英文字母的大小写转换。标记显示效果none默认值，原样显示capitalize首字母大写显示uppercase所有字母大写显示lowercase所有字母小写显示表1-3-5

text-transform属性值字体外观属性9.text-shadowCSS3新增了文本阴影效果属性text-shadow，使用该属性可以为页面中添加阴影效果。基本语法格式如下：选择器{text-shadow:h-shadowv-shadowblurcolor;}text-shadow属性需要同时设置4个属性，其中，h-shadow代表阴影的水平偏移距离，正值表示向右偏移，负值表示向左偏移，0表示水平不偏移；v-shadow代表阴影的垂直偏移距离，正值表示向下偏移，负值表示向上偏移，0表示垂直不偏移；blur代表偏移半径；color表示阴影颜色。字体外观属性9.text-shadowtext-shadow属性还可以设置多重阴影，每组属性直接使用逗号隔开即可。字

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

温馨提示

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

最新文档

评论

0/150

提交评论