CSS样式快速入门培训
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS常见问题
指定了CSS样式，元素却不听话！ 原因可能有： 1. 拼写有误，标签未封死或者加入了中文字符。 2. 该元素本身无此样式，如行级元素与块级元素。 3. 继承错误，如多次指定样式，将按优先级选用。 4. 浏览器兼容问题。采用css hack解决
谢谢观看
类别选择器
类选择器根据类名来选择，前面以”. ”来标志。 例如： .demoDiv { color:#FF0000; } .wangxiangyi { height:45px; width: 230px; }
类别选择器
<html> <head> <style type="text/css"> .important {color:yellow;} </style> </head> <body> <h1 class=“important”>好好学习</h1> <p class=“important”>天天向上</p> <p>学习雷锋好榜样</p> </body> </html>
ID选择器
根据元素ID来选择元素，具有唯一性。 前面以”#”号来标志。 例如： #demoDiv { color:#FF0000; }
#wangxiangyi { height:45px; width: 230px; }
ID选择器
<html> <head> <style type="text/css"> #important {color:yellow;} </style> </head> <body> <h1 id=“important”>好好学习</h1> <p id=“important”>天天向上</p> <p>学习雷锋好榜样</p> </body> </html>
一段最基础的HTML
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body>
<html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </h1> 之间的文本被显示为标题 <p> 与 </p> 之间的文本被显示为段落 例子解释
</body>
</html>
内联样式
<html> <head> </head> <body style=“background-color: green”;>
</body>
</html>
层叠次序
当同一个HTML元素被不止一个样式定义时引用次序如下
1.外部样式表 2.内部样式表（位于 <head> 标签内部） 3.内联样式（在 HTML 元素内部，最高优先权）
颜色：背景色、边线色、文字色…
大小：文字大小、各种容器大小… 图片：控制切片（元素），使其与效果图一致。 风格：为元素设置诸如阴影、模糊和透明等效果。 位置：可调整各个元素间的间距与位置。
效果：基础交互动态，也可与脚本语言组合，产生各种高级动态效果。
1CSS添加方式
添加CSS方式
CSS样式有 种添加方法 1.外部样式表 – 最佳方式，便于查找与修改。 2.内部样式表 – 可针对当前独立页面使用。 3.内联样式 – 后期的小修补。
font-family
border margin / pading float & clear
容器基础模型
浮动
相对定位
#box_relative { position: relative; left: 30px; top: 20px; }
绝对定位
#box_relative { position: absolute; left: 30px; top: 20px; }
2
选择器介绍
选择器种类
1 类别选择器 2 标签选择器 3 ID选择器 4 后代选择器 5 子选择器 6 伪类选择器 7 通用选择器 8 群组选择器 9 相邻同胞选择器 10 属性选择器
标签选择器
一个完整的HTML页面是有很多不同的标签组成，如 <div> <p><h1>… 标签选择器不加任何前缀 例如： p{ color:#FF0000; }
HTML+CSS基础知识分享
ቤተ መጻሕፍቲ ባይዱ
1
基本介绍
Html是什么？
HTML 是用来描述网页的一种语言。
HTML 标签
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签
伪类选择器
用于文档以外的其他条件来应用元素的样式 常用于按键、链接等
Link 表示链接在没有被点击时的样式。 Visited 表示链接已经被访问时的样式。 Hover 表示当鼠标悬停在链接上面时的样式。
Active 表示鼠标点住时一刹那样式。
伪类选择器
<html> <head> <style type="text/css"> a{ margin:0 200px;} a:link{ background-color:#CCCCCC;} a:visited{ background-color:#CC00CC;} a:hover{ background-color:#FF0000;} a:active{ background-color:green;} </style> </head> <body> <a href=“#”>我是一个按键</a> </body> </html>
<html> <head> <style type="text/css"> p{ color:blue; } .demo1 { color:yellow; } #demo2{color:red;} </style> </head> <body> <p>好好学习</p> <div class=“demo1”>天天向上</div> <div id=“demo2”>天天向上</div> </body> </html>
搭配&继承
3
常用样式与属性
常用样式与属性
1 CSS 背景 2 CSS 链接 3 CSS 文本 background-color / img … link active hover visited font-style/size/weight/color…
4 CSS 字体
5 CSS 边框 6 CSS 边距 7 CSS 浮动与清理
</html>
Html常用标签
<a> <div> <p> 链接 最常用的块级元素 文字段落
<span>
<ul><li> <img>
把一个行级元素拆分，给与块级结构。
无序列表 图片
<table><tr><td> 表格 <iframe> 内联框架
CSS是什么？能做什么？
控制网页中元素的颜色、大小、位置、风格及效果。
分别使用一下
<html> <head> <style type="text/css"> .all {color:#666666;} .all h1 { color:red;} .demo .word {color:yellow; } #demo2{color:green; font-size:24px;} .demo , #demo2{ margin-left:300px;} </style> </head> <body> <div class="all"> <h1>第1句话</h1> <h2>第2句话</h2> <div class="demo"> <h2 class="word">第3句话</h2> </div> <div id="demo2">第4句话</div> </div> </body> <html>
h1{ line-height:45px; }
标签选择器
<html> <head> <style type="text/css"> p {color:yellow;} </style> </head> <body> <h1>标题</h1> <p >为人民服务</p> </body> </html>
3
外部样式表
<html> <head> <link type="text/css" rel="stylesheet" href=" basic.css "> </head>
<body>
… </body> </html>
内部样式表
<html>
<head> <style type="text/css"> body { background-color:#ff8008;} </style> </head> <body>