网页设计与制作 课件 项目四 CSS基础_第1页
网页设计与制作 课件 项目四 CSS基础_第2页
网页设计与制作 课件 项目四 CSS基础_第3页
网页设计与制作 课件 项目四 CSS基础_第4页
网页设计与制作 课件 项目四 CSS基础_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

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

文档简介

1

第三章CSS基础3.1什么是CSSCSS基础CSS（CascadingStyleSheet，层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。<html><head><title>使用html方式</title></head><body><h1align="center"><u>一级标题</u></h1><p>…其他正文…</p><h1align="center"><u>一级标题</u></h1></body></html><html><head><title>使用css方式</title><style>

h1{text-align:center;border-bottom:1pxsolidblack;}</style></head><body><h1>一级标题</h1><p>…其他正文…</p><h1>一级标题</h1></body></html>3.2CSS样式定义CSS样式格式3.3CSS的使用行内样式内部样式外部样式=本节提纲行内样式将样式定义在具体HTML标签的style属性中，只适用于当前元素，在设定某个元素样式时比较常用。例：<h1style=”text-align:center;color:red;”>标题1文字</h1>内部样式定义在head标签中的style标签中<html><head><style>body{color:red;}h1{text-align:center;color:black;}</style></head><body>...</body></html>外部样式定义在外部样式CSS文件夹内，再在HTML中引入外部CSS文件，引入标签定义在head标签内引入标签：<linkrel="stylesheet“type="text/css“href="CSS文件的路径"/>Rel:当前文件引入文件之间的关系Stylesheet：样式表Type:类型3.4CSS选择器通用选择器标记符选择器类选择器=本节提纲伪类选择器ID选择器组合选择器通用选择器选择范围：选择所有元素格式:*{属性：属性值；属性：属性值；}例：*{color：red;}标签选择器选择范围：选择指定的标记符格式:h1{属性：属性值；属性：属性值；}例：h1{color：red;}类选择器选择范围:选择设置指定class属性值的元素格式:.class属性值{属性：属性值；属性：属性值；}例：.top{color:red;}<body><pclass=“top”>class属性样式</p></body>ID选择器选择设置指定ID属性值的元素格式:#id属性值{属性：属性值；属性：属性值；}例：#top{color:red;}<body><pid=“top”>class属性样式</p></body>伪类选择器选择设置被访问的元素的不同显示样式，常与超链接标签格式:a:link当超链接没被访问过时，所设置的样式应用于超链接a:visited当超链接已被访问过时，所设置的样式应用于超链接a:hover当鼠标指针移到超链接上时，所设置的样式应用于超链接a:active当超链接当前为被选中状态时，所设置的样式应用于超链接群组选择器选择指定选择器选中的元素格式:选择器1,选择器2,选择器3{属性:属性值；属性:属性值；}例：h1,h2,h3,h4{color:red;}选择器优先级行内样式优先级最高iD选择器>class选择器>标记符选择器>通用选择器3.5CSS基础属性颜色与背景属性Color：用于控制HTML元素内文本的颜色取值：具体颜色Background：组合背景属性Background-color：用于设置HTML元素的背景颜色取值：具体颜色，默认值：transparent,表示没有任何颜色background-image：用于设置HTML元素的背景图案background-attachment：控制背景图像是否随内容一起滚动取值及默认值：scroll，背景图案随内容一起滚动fixed：表示背景图案静止，内容可以滚动backgroud-repeat：属性表示当使用背景图案时，背景图案是否重复显示。background-size

设置背景图片尺寸字体属性字体属性：用于控制网页中的文本的字符显示方式，如文字大小、粗细、使用字体等font：设置整体字体属性font-family：用于设置字体名称，取值为字体名称或者字体族名称font-size：用于设置字体大小取值：长度值：16px

百分比：相对当前默认字体的大小的百分比font-style：字体字形

取值：normal普通字形italic或oblique斜体font-weight：设置字体粗细

加粗取值：700

不加粗取值：400文本属性文本属性：用于控制文本的段落格式Text-align：设置文本对齐方式Text-indent：设置文本首行缩进Text-decoration：用于特定文本设置文本修饰默认值：none无文本修饰（取消超链接下划线）

underli

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

温馨提示

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

最新文档

评论

0/150

提交评论