2024年-CSS样式快速入门培训_第1页
2024年-CSS样式快速入门培训_第2页
2024年-CSS样式快速入门培训_第3页
2024年-CSS样式快速入门培训_第4页
2024年-CSS样式快速入门培训_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

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

文档简介

HTML+CSS基础知识分享12024/5/13基本介绍122024/5/13Html是什么？HTML是用来描述网页的一种语言。HTML标签

HTML标签是由尖括号包围的关键词，比如<html>HTML标签通常是成对出现的，比如<b>和</b>

标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签32024/5/13一段最基础的HTML<html><body><h1>MyFirstHeading</h1><p>Myfirstparagraph.</p></body></html>例子解释<html>与</html>之间的文本描述网页<body>与</body>之间的文本是可见的页面内容<h1>与</h1>之间的文本被显示为标题<p>与</p>之间的文本被显示为段落42024/5/13Html常用标签<a>链接<div>最常用的块级元素<p>文字段落

<span>把一个行级元素拆分，给与块级结构。<ul><li>无序列表<img>图片<table><tr><td>表格<iframe>内联框架

52024/5/13CSS是什么？能做什么？控制网页中元素的颜色、大小、位置、风格及效果。颜色：背景色、边线色、文字色…大小：文字大小、各种容器大小…图片：控制切片（元素），使其与效果图一致。风格：为元素设置诸如阴影、模糊和透明等效果。位置：可调整各个元素间的间距与位置。效果：基础交互动态，也可与脚本语言组合，产生各种高级动态效果。62024/5/13CSS添加方式172024/5/13添加CSS方式CSS样式有3种添加方法1.外部样式表–最佳方式，便于查找与修改。2.内部样式表–可针对当前独立页面使用。3.内联样式

–后期的小修补。82024/5/13外部样式表<html><head><linktype="text/css"rel="stylesheet"href="basic.css"></head><body>…</body></html>92024/5/13内部样式表<html><head><styletype="text/css">body{background-color:#ff8008;}</style></head><body></body></html>102024/5/13内联样式<html><head></head><bodystyle=“background-color:green”;></body></html>112024/5/13层叠次序当同一个HTML元素被不止一个样式定义时引用次序如下1.外部样式表2.内部样式表（位于<head>标签内部）3.内联样式（在HTML元素内部，最高优先权）122024/5/13选择器介绍2132024/5/13选择器种类1类别选择器2标签选择器3ID选择器4后代选择器5子选择器6伪类选择器7通用选择器8群组选择器9相邻同胞选择器10属性选择器142024/5/13标签选择器一个完整的HTML页面是有很多不同的标签组成，如<div><p><h1>…标签选择器不加任何前缀例如：p{color:#FF0000;}h1{line-height:45px;}152024/5/13标签选择器<html><head><styletype="text/css">p{color:yellow;}</style></head><body><h1>标题</h1><p>为人民服务</p></body></html>162024/5/13类别选择器类选择器根据类名来选择，前面以”.”来标志。例如：.demoDiv{color:#FF0000;}.wangxiangyi{height:45px;width:230px;}172024/5/13类别选择器<html><head><styletype="text/css">.important{color:yellow;}</style></head><body><h1class=“important”>好好学习</h1><pclass=“important”>天天向上</p><p>学习雷锋好榜样</p></body></html>182024/5/13ID选择器根据元素ID来选择元素，具有唯一性。前面以”#”号来标志。例如：#demoDiv{color:#FF0000;}#wangxiangyi{height:45px;width:230px;}192024/5/13ID选择器<html><head><styletype="text/css">#important{color:yellow;}</style></head><body><h1id=“important”>好好学习</h1><pid=“important”>天天向上</p><p>学习雷锋好榜样</p></body></html>202024/5/13伪类选择器用于文档以外的其他条件来应用元素的样式常用于按键、链接等Link

表示链接在没有被点击时的样式。Visited

表示链接已经被访问时的样式。Hover

表示当鼠标悬停在链接上面时的样式。Active

表示鼠标点住时一刹那样式。212024/5/13伪类选择器<html><head><styletype="text/css"> a{margin:0200px;}

a:link{background-color:#CCCCCC;} a:visited{background-color:#CC00CC;} a:hover{background-color:#FF0000;} a:active{background-color:green;}</style></head><body>

<ahref=“#”>我是一个按键</a></body></html>222024/5/13分别使用一下<html><head><styletype="text/css">p{color:blue;}.demo1{color:yellow;}#demo2{color:red;}</style></head><body><p>好好学习</p><divclass=“demo1”>天天向上</div><divid=“demo2”>天天向上</div></body></html>232024/5/13搭配&继承<html> <head><styletype="text/css">.all{color:#666666;}.allh1{color:red;}.demo.word{color:yellow;}#demo2{color:green;font-size:24px;}.demo,#demo2{margin-left:300px;}</style></head><body><divclass="all"><h1>第1句话</h1><h2>第2句话</h2><divclass="demo"><h2class="word">第3句话</h2></div><divid="demo2">第4句话</div></div></body><html>242024/5/13常用样式与属性3252024/5/13常用样式与属性1CSS背景 background-color/img…2CSS链接 linkactivehovervisited

3CSS文本 font-style/size/weight/color…4CSS字体 font-family5CSS边框 border6CSS边距 margin/pading7CSS浮动与清理float&clear262024/5/13容器基础模型272024/5/13浮动282024/5/13相对定位#box_relative{position:relative;left:30px;top:20px;}292024/5/13绝对定位#box_relative{position:absolute;

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

温馨提示

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

最新文档

评论

0/150

提交评论