这篇是博主看中国大学MOOC上的视频所做的笔记
*CSS样式(1)文本
属性 描述 取值
color 文本颜色 red #f00 rgb(255,0,0)
letter-spacing 字符间距 2px -3px
line-height 行高 14px 120%
text-align 对齐 center left right justify
text-decoratiom 装饰线 none overline underline line-through
text-indent 首行缩进 2em
*font
font:斜体 粗体 字号/行高 字体
font:italic bold 16px/1.5em '宋体';
*CSS样式(2)背景与超链接
属性 描述 用法
background-color 背景颜色 背景图片会覆盖掉背景颜色
background-inage 背景图片 url("images/Weiixn.png")
background-repeat 背景填充 repeat-x(横向填充) no-repeat(全铺) repeat(棋盘格填充)
background 设置顺序:颜色+图片+填充
超链接
a:link -普通的,未被访问的链接
a:visited -用户已访问的链接
a:hover -鼠标指针位于链接上方悬停
a:active -链接被点击的时刻
之间是有顺序的
LOVE&HATE
*悬停放大字体
css: a{
font-size:22px;
}
a:hover{
font-size:120%;
}
html: <a href="#">web design</a>
列表与表格模块
*CSS样式 列表与表格
(1)列表
属性 描述
list-style 所有用于列表的属性设置于一个声明中
list-style-image 为列表标志设置图象
live-style-position 标志的位置
list-style-type 标志的类型
*list-style-type
值 描述
none 无标记
disc 默认。实心圆
circle 空心圆
square 实心方块
.....
*list-style-position
css:
<style type="text/css">
.inside{list-style-position:inside}
.outside{list-style-position:outside}
</style>
html:
<ul class="inside">
<li>HTML-----网页结构</li>
<li>CSS------网页样式</li>
<li>JS-------网页交互</li>
</ul>
<ul class="outside">
<li>HTML-----网页结构</li>
<li>CSS------网页样式</li>
<li>JS-------网页交互</li>
</ul>
*list-stle-image
url("images/bullet1.gif") //假设有图片 bullet.gif
*表格
表格大小:width(宽)、height(高)
表格边框:boder属性,border:1px(宽度) , solid(实线) , #eee(颜色);
border-collapse属性:可以将表格边框和单元格边框合并
//表格边框
table,th,td
{
border:1px solid black;
}
//表格大小
table{
width:500px;
height:200px;
}
//奇偶选择器:nth-child(oddleven)
tr:nth-child(odd){
background-color:#EAF2D3;
}