web前端复习系列[2]——CSS基础
1.文字排版
|---- 字体 font-family:"Microsoft Yahei"
|---- 字号、颜色 font-size:12px;color:#666
|---- 粗体 font-weight:bold
|---- 斜体 font-style:italic
|---- 下划线 text-decoration:underline;
|---- 删除线 text-decoration:line-through;
-----------------------------------------
【应用】中文网站常见缩写代码：
body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
代码缩写之前为：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
注意点：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
2.段落排版
|---- 缩进 p{text-indent:2em;}
|---- 行间距（行高）p{line-height:2em;}
|---- 中文字间距、英文字母间距 h1{letter-spacing:50px;}
|---- 英文单词间距 h1{word-spacing:50px;}
|---- 居中对齐 text-align:center/left/right;
-----------------------------------------
3.CSS中的标签元素
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>
、<form>
内联元素、内联块元素 → 块级元素：display:block。
块级元素特点：
|---- 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
|---- 2、元素的高度、宽度、行高以及顶和底边距都可设置。
|---- 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块状元素 → 内联元素： display:inline
内联元素特点：
|---- 1、和其他元素都在一行上；
|---- 2、元素的高度、宽度及顶部和底部边距不可设置；
|---- 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
常用的内联块状元素有：<img>、<input>
元素 → 内联块状元素： display:inline-block(css2.1新增)
inline-block 元素特点：
|---- 1、和其他元素都在一行上；
|---- 2、元素的高度、宽度、行高以及顶和底边距都可设置。
应用：仿分页页码设计 ---->
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>内联块状元素</title> <style type="text/css"> a{ display:inline-block; /*将a标签转换为内联块状元素后设置的高度、宽度等就起作用了*/ width:20px;/*在默认情况下宽度不起作用*/ height:20px;/*在默认情况下高度不起作用*/ background:pink;/*设置背景颜色为粉色*/ text-align:center; /*设置文本居中显示*/ } </style> </head> <body> <a>1</a> <a>2</a> <a>3</a> <a>4</a> </body> </html>
浙公网安备 33010602011771号