下载提示
- 1.该资料是网友上传的，本站提供全文预览，预览什么样，下载就什么样。
- 2.下载该文档所得收入归上传者、原创者。
- 3.下载的文档，不会出现我们的网址水印。
文档列表
文档介绍
第三章
CSS基础
内容
01
CSS简介
02
CSS样式表引用方法
03
CSS选择器
04
常用CSS样式属性
05
CSS定位
06
利用CSS实现
常见功能
第一节 CSS简介
一、概述
CSS是Cascading Style Sheets的缩写,译为层叠样式表或则级联样式表,使用样式表可以修饰美化网页内容。
CSS样式
CSS样式表的优点
丰富的修饰样式
各种修饰属性,实现所想即所得
内容与修饰分离,利于团队开发
标签组织内容,CSS修饰元素内容
实现样式复用,提高开发效率
CSS样式可以同时作用于多个元素
实现页面的精确控制
使用选择器对页面元素进行控制与修饰
二、CSS属性单位
CSS长度单位
像素(px)是相对于显示器屏幕分辨率而言的;点(pt)是印刷业中一个标准的长度单位
em指字体高,任意浏览器的默认字体高都是16px。em指字体高,任意浏览器的默认字体高都是16px。
CSS颜色表示
颜色名,比如“red”、“yellow”、pink”等。
#RRGGBB,比如“#FF0000”。
#RGB,比如“#00F”。
rgb(rrr, ggg, bbb),比如“rgb(0,255,0)”。
rgb(rrr%, ggg%, bbb%),比如“rgb(30%,40%,30%)”。
三、CSS基本语法
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
……
}
</style>
选择器
属性值
属性名
<head>
<style type="text/css">
li {
color:red;
font-size:30px;
font-family:微软雅黑;
}
</style>
</head>
四、CSS盒子模型
发在HTML中的所有元素均可看作盒子
盒子由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成
边框(border)
元素的边框是围绕元素内容和内边距的一条或多条线。border属性可以设置元素边框的样式、宽度和颜色。
<style type="text/css">
/*设置层的样式*/
#top {
border-style:dashed; /*设置层边框样式为虚线*/
border-color:#CCC; /*设置层的边框的颜色为灰色*/
border-width:3px; /*设置层的边框的宽度为3px*/
}
/*设置搜索输入框的样式*/
.SearchBox {
width:300px;
height:23px;
/*同时设置上、右、下、左边框的宽度、样式、颜色*/
border:1px solid black;
}
</style>
……
<div id="top">
宝贝搜索:<input type="text" name="search" class="SearchBox"/>
<input type="button" value="搜索" />
</div>
<div>边框为虚线,灰色,宽度为3px
文本输入框宽度为300px,高度为23px,边框为黑色的实线
填充(padding)
元素的填充也称为内空、内边距,指元素内容与边框的距离。填充分为上、下、左、右四个方向。
<style type="text/css">
/*设置层的样式*/
#top {
border-style:dashed;
border-color:#CCC;
border-width:3px;
padding-top:50px; /*设置层的上边距为50px*/
padding-left:200px; /*设置层的左边距为200px*/
}
/*设置搜索输入框的样式*/
.SearchBox {
width:300px;
height:23px;
/*同时设置上、右、下、左边框的宽度、样式、颜色*/
border:1px solid black;
}
</style>
<div>边框为虚线,灰色,宽度为3px
文本输入框宽度为300px,高度为23px,边框为黑色的实线
上边距为50px
左边距为200px
CSS基础
内容
01
CSS简介
02
CSS样式表引用方法
03
CSS选择器
04
常用CSS样式属性
05
CSS定位
06
利用CSS实现
常见功能
第一节 CSS简介
一、概述
CSS是Cascading Style Sheets的缩写,译为层叠样式表或则级联样式表,使用样式表可以修饰美化网页内容。
CSS样式
CSS样式表的优点
丰富的修饰样式
各种修饰属性,实现所想即所得
内容与修饰分离,利于团队开发
标签组织内容,CSS修饰元素内容
实现样式复用,提高开发效率
CSS样式可以同时作用于多个元素
实现页面的精确控制
使用选择器对页面元素进行控制与修饰
二、CSS属性单位
CSS长度单位
像素(px)是相对于显示器屏幕分辨率而言的;点(pt)是印刷业中一个标准的长度单位
em指字体高,任意浏览器的默认字体高都是16px。em指字体高,任意浏览器的默认字体高都是16px。
CSS颜色表示
颜色名,比如“red”、“yellow”、pink”等。
#RRGGBB,比如“#FF0000”。
#RGB,比如“#00F”。
rgb(rrr, ggg, bbb),比如“rgb(0,255,0)”。
rgb(rrr%, ggg%, bbb%),比如“rgb(30%,40%,30%)”。
三、CSS基本语法
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
……
}
</style>
选择器
属性值
属性名
<head>
<style type="text/css">
li {
color:red;
font-size:30px;
font-family:微软雅黑;
}
</style>
</head>
四、CSS盒子模型
发在HTML中的所有元素均可看作盒子
盒子由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成
边框(border)
元素的边框是围绕元素内容和内边距的一条或多条线。border属性可以设置元素边框的样式、宽度和颜色。
<style type="text/css">
/*设置层的样式*/
#top {
border-style:dashed; /*设置层边框样式为虚线*/
border-color:#CCC; /*设置层的边框的颜色为灰色*/
border-width:3px; /*设置层的边框的宽度为3px*/
}
/*设置搜索输入框的样式*/
.SearchBox {
width:300px;
height:23px;
/*同时设置上、右、下、左边框的宽度、样式、颜色*/
border:1px solid black;
}
</style>
……
<div id="top">
宝贝搜索:<input type="text" name="search" class="SearchBox"/>
<input type="button" value="搜索" />
</div>
<div>边框为虚线,灰色,宽度为3px
文本输入框宽度为300px,高度为23px,边框为黑色的实线
填充(padding)
元素的填充也称为内空、内边距,指元素内容与边框的距离。填充分为上、下、左、右四个方向。
<style type="text/css">
/*设置层的样式*/
#top {
border-style:dashed;
border-color:#CCC;
border-width:3px;
padding-top:50px; /*设置层的上边距为50px*/
padding-left:200px; /*设置层的左边距为200px*/
}
/*设置搜索输入框的样式*/
.SearchBox {
width:300px;
height:23px;
/*同时设置上、右、下、左边框的宽度、样式、颜色*/
border:1px solid black;
}
</style>
<div>边框为虚线,灰色,宽度为3px
文本输入框宽度为300px,高度为23px,边框为黑色的实线
上边距为50px
左边距为200px
《Web技术原理与应用》课件第3章CSS基础 来自淘豆网www.taodocs.com转载请标明出处.
猜你喜欢
- 2024年写给清洁工的表扬信8篇 9页
- 2024届浙江省嘉兴中考生物模试卷含解析 13页
- 川西坳陷中段地层水地球化学特征及油气保存条.. 2页
- 2024年写给客户的慰问信8篇 9页
- 2024年写给女朋友的道歉信（汇编15篇） 25页
- 嵌入式渔业基站电台底层驱动的研究与实现的综.. 2页
- 2024年写第一次的作文（通用47篇） 48页
- 2024年写父亲作文 6页
- 2024年写小学的作文4篇(合集) 5页
- 2024年写军训的作文汇总九篇 15页
- 山西省省级青少年体育赛事融资现状与发展策略.. 2页
- 山西省大同市业余自行车运动开展现状及研究的.. 2页
- 第二学期一年级语文第六单元检测题 2页
- 2024年内科实习生的实习鉴定15篇 20页
- 2024年养生馆合作的协议书 36页
相关文档 更多>>
非法内容举报中心
相关标签
最近更新
- 通知书董事会会议通知
- 2024年前台文员个人工作计划集锦11篇
- 迎新年作文400字9篇
- 过敏性休克紧急处理方法
- 2024年前台个人工作总结[精华15篇]
- 2024年制药企业员工年终总结
- 辞退通知书
- 渡槽模板专项施工方案培训资料
- 2024年初二新学期的学习计划15篇
- 车间安全心得体会
- 车辆挂名协议书1
- 2024年初中英语教研组工作计划汇编15篇
- 2024年初中的周记(15篇)
- 表（粤水）水情3 翻斗式雨量计安装单元评定..
- 医保统计信息的管理制度
- 工程签证单-基础超挖
- 园林绿化工程施工进度计划(共9页)
- 密斯凡德罗作品赏析
- 表（粤水）水情4 水利水电工程太阳能供电系..
- 表（粤水）水情2 雷达式水位计安装单元工程..
- 表（粤水）水情1 浮子水位计安装单元评定表..
- 环卫、市政工程技术标
- 莲师会供和上师成就修诵仪轨