知识点:
一、 div 、span、 ul、 ol、 li 标记
二 、css概述
三、css的调用方式
四、css的选择器
五、css中具体的样式
六、 demo 当当网页
一、 div、span、ul、ol、li 标记
常用的web2.0思想中的标记
1、div
注意:div独占一行
2、span
3、ul、ol 一组
<ul type="square 正方形 circle圆圈 disc实心点"> 无序列表
<li>今天天气不错</li>
<li>明天天气也不错</li>
<li>后天天气仍然不错</li>
</ul>
<ol type="1 a i I"> 有序列表
<li>今天天气不错</li>
<li>明天天气也不错</li>
<li>后天天气仍然不错</li>
</ol>
二 css概述1>什么是css
css层叠样式表 替代属性的 不用写在标记中
实现 表现与结构分离, 便于管理,使页面整洁
2->web2.0
table 架构页面
web2.0 div+css架构页面****
html5 css3 在web2.0思想上 添加了一些内容
三 css的调用方式
1》css格式
{样式名称: 样式值;样式名称: 样式值;样式名称: 样式值;样式名称: 样式值;............}
2》html页面中如何调用css 表现和结构分离
A标记上直接使用style属性来调用样式
<标记 style="样式名称:样式值;样式名称:样式值;样式名称:样式值;样式名称:样式值;.......">
style属性所有标记都有
B html页面中的内嵌样式
</head>
<style type="text/css">
</style>
<body>
C 外部调用样式
index.html----->index.css 样式文件
<link href="index2.css" rel="stylesheet" type="text/css">
</head>之前
四、css选择器 在页面中找到元素
1、使用选择器的格式
选择器{样式名称:样式值;样式名称:样式值;样式名称:样式值;样式名称:样式值;...............}
2、css中的六种选择器
1》 通配选择器 选择页面上的所有元素
*{ }
2》标记选择器
标记名称{ } 具有相同标记名称的元素
3》 class 选择器 选中具有相同class 属性的元素
.className{ } 选择同类的不同名的元素
4》 id选择器
#id{ } 选择具有相同id的元素
5》 群组选择器:
#id, .className ,标记名称............{ }
6》 派生选择器
父选择器 子选择器
五、css中的具体样式
1》 boder width height
border: 粗细 solid(实线) 颜色 元素边框
width: 像素值
height: 像素值
2》布局属性
padding:上 右 下 左 内边距 注意:padding会改变元素的内外宽度
padding-top: 像素
padding-right:像素
padding-bottom:像素
padding-left:像素
注意:padding : val; 表示上 右 下 左都是五十 。以 上和左 为主的位置。
margin:外边距 上 右 下 左 注意:margin不会改变 外边元素的大小的
margin-top:像素
margin-right:像素
margin-bottom:像素
margin-left:像素
margin: 50px; 以上边 和 左边为主
margin: auto 水平居中****
float: left,right 浮动元素的。独占一行的特性消除掉(div具有独占一行的特性)
clear: both; 消除前后元素浮动所带来的影响的
display: none 或block 控制显示隐藏元素的
3》背景属性 :
background-color: 背景色
background-image:url(img/1.png); 背景图 :如果背景图的宽高小于元素的宽高 背景图横向和纵向平铺
background-repeat: no-repeat不平铺 repeat-x 横向平铺 repeat-y 纵向平铺
background-position: x(正 向右 负 向左), y(正 向下 负 向上): 调整背景图的位置
background: color image repeat 附着方式 位置
4》 字体属性:
font-size: 像素值 :大小
color:颜色
font-style: normal italic斜体
font-weight: 100------900 900==bold 字体的粗细
font-family: 文本书法体
text-align : left center right 水平位置
line-height: 行高
font: style weight size line-height famliy
5》边框属性:
border:1px solid #ff0000;
单独指定哪个位置的边框:
border-top: 粗细 线体 颜色
border-right:粗细 线体 颜色
border-bottom: 粗细 线体 颜色
border-left: 粗细 线体 颜色
6》列表
list-style:none;//消除列表前面的小黑点
list-style-image:url(img/1.png); 列表中的标识 ,可以是图片。
7》其他的常用样式
text-decoration:文本修饰线 line-through underline
四种状态: 超链接样式 伪类
刷新状态 :link{}-->不太支持 a #id .className{样式}
鼠标移动上去的状态 :hover{}
鼠标单击的状态 :active{}
单击过后的状态 :visited{}