字体
在HTML语言中,文字的字体是通过<font face="字体的名称">来设置,而CSS中字体则是通过font-family属性来设置
字体大小
css对于文字大小是通过font-size属性来控制,该属性可以是相对大小也可以是绝对大小inch(in) 英寸
cm 厘米
mm 毫米
pt 点(印刷的点数,在一般的显示器中1PT相当于1/72英寸)
pc 1pc=12pt px 像素,实际显示的大小与分辨率有关,这也是最常用的方式em 在父标记的基础上乘以一个数值
文字的颜色
CSS的文字颜色是通过color来设置的
color:blue;
:#00f;
:#0000ff;
:rgb(0,0,255);
:rgb(0%,0%,100%);
文字的粗细
css中是通过font-weight来设置文字粗细的
lighter 不加粗
bold 加粗
normal 默认效果
100~900的数值 控制粗细的大小
斜体
css中斜体是通过font-style来设置
italic 斜体
normal 标准风格
oblique 偏斜体
文字的下划线、顶划线和删除线
CSS中利用text-decoration来设置文字的下划线、顶划线和删除线
underline 下划线
overline 顶划线
line-through 删除线
blink 闪烁
闪烁在IE中不支持这个效果,在firefox(火狐)中支持此效果*{text-decoration:underline overline line-through;}
英文字母大小写
用text-transform来设置
capitalize 单词首字大写
uppercase 全部大写
lowercase 全部小写
css段落文字 在css中是通过text-align来控制段落的水平对齐,它的值可以设置为左,中,右和两端
text-align:left; 左
: right; 右
:center; 中
:justify; 两端对齐
段落的垂直对齐方式
在css中是通过vertical-align来控制段落的垂直对齐的。该属性对于块级元素并不起作用,如<p>和<div>等标记。但对于表格,这个属性则很重要
top 顶端
bottom 底部
middle 居中对齐vertical-align:10px; 正数向上
vertical-align:-10px; 负数向下
行间距
在css中line-height的值表示的是两行文字之间基线的距离 而在动态页面当中如:论坛、博客,这些可以由用户自定义字体大小的页面,通常设定为相对值
字间距
字间距是通过letter-spacing属性来设置调整字间距的,同样也可以设置相对值和绝对值
首字放大
font-size 改变文字大小
float 浮动
CSS设置图片效果 在HTML中可以直接通过给<img>标记加border属性为图片添加边框
在css中可以通过border-style属性为图片定义各种边框的样式
图片缩放
width 宽
height 高
与HTML不同,CSS可以使用更多的值如相对值和绝对值
图片的对齐 对齐与文字对齐基本一样,不同的是通过父元素的属性来实现的,在img中设置是达不到效果的
纵向对齐
是通过vertical-align来实现的
当vertical-align的值为bottom或者sub时。IE与Ficefox(火狐)的显示效果是不同的,建议尽量少使用浏览器显示效果不一样的属性值
纵向对齐也可以使用正数和负数值
CSS的背景属性background-color所有html元素的背景色基本上都可以通过它来设置,因此很多网页通过各种背景色来实现分块的目的
背景图片
使用background-image属性来实现
背景图的重复
使用background-repeat属性来设置背景图的重复效果
repeat-y 垂直方向重复
repeat-x 水平方向重复
no-repeat 不重复
背景图片的位置
在默认情况下背景图片都是从设置background属性的标记左上角开始
css中可以通过background-position来调整背景图片的位置
position不仅可以设置上中下、左中右的模式。还可以设置具体数值或百分比,来实现精确定位
固定背景图片 可以通过background-attachment的值为fixed来固定图片
css中一个标记只能使用一次background属性,因此只有给多个标记添加不同的背景来实现。
竖排文字转换
writing-mode:tb-rl; 竖排版文字
用CSS设置表格和表单的样式
summary 表格注释和摘要,主要用于搜索引擎搜索,在IE中不会显示
<caption>是表格的大标题,该标记可以出现在<table>与</table>之间的任意位置,通常放在表格的第一行(<table>后面)
<th>标记在表格中用于行或列的名称,<th>中scope属性就是专门用于区分行名称和列名称,分别设置为row(行)和col(列)
如:<th scope="row"> &< th scope="col">
表格的颜色
与文字颜色设置一样,通过color设置表格中的文字颜色,通过background属性设置表格的背景颜色
表格的边框
border是最常用的属性之一,<table>标记中的border-color设置边框颜色
css设置表格的边框跟图片一样,不过在表格中需要特别注意单元格之间的关系
如:.aa{border:1px solid #00ff00;} 此种设置效果只是表格外部有边框样式而对里面的单元格没有效果
因此采用css设置表格边框,也需要为单元格单独设置相应的边框
如: .aa td{ border:1px solid #00ff00;}
此种方法设置好后边框之间有空隙,这是需要给整个表格的边框设置border-collapse边框重叠
如:.aa{border:1px solid #00ff00;
border-collapse:collapse;
}
表单
表单的标签主要包括<form>、<input>、<textarea>、<select>和<option>
设置透明文字按钮
background-color:transparent;
border:0px;
七彩下拉菜单.blue{background-color:#7598FB; color: #000000;}
.red{background-color:#E20A0A;color: #ffffff;}< select name="color" id="color">
< option value="blue" class="blue">blue</option>
< option value="red" class="red">red</option>
< /select>