HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素。具体如下:
块元素
每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
块级元素容器可以容纳多个嵌套的块级标签或者行内标签。
常见的块元素有<h1>-<h6>,<p>,div,ul,ol,li等,其中
<div>标记是最典型的块元素。
CSS的标签模式设置Display属性
display可以控制标签的显示模式。
display:none | inline | block | inline-block
继承性:无
display值的解释:
none :此元素不被显示,在文档中被移除。
block :此元素按块级元素显示:前后带换行符,自己占一行。内联元素 → 块元素
inline :此元素按内联元素显示:1个挨着1个。块元素 → 内联元素
inline-block:按行内标签进行排版,但是可以设置宽高,而且高度可以影响行高(以后再详细讲)。
通过设置Display为none,那么可以让这整个标签在页面中移除掉
对比一下:
/*display: none;*/ /*直接把当前标签从页面中直接移除了,不影响页面的布局*/
visibility: hidden; /*这个只是不显示,但还是占用页面的空间*
行内不可以设置宽高,块级可以.行内元素只能通过内容来撑开.只有左右边距.如果你设置了宽高是不会影响行内元素的显示的。
CSS的颜色表示
尽量用16进制表示.
CSS的长度单位
绝对长度单位:
cm:厘米,mm:毫米,in:英寸,pc:派卡(Picas),相当于我国新四号铅字的尺寸。都不常用,了解即可。
相对长度单位:
px:像素点,像素就是显示器显示的一个点。
em:1em 等于当前的字体大小,例如:当前元素的字体大小为16px,那么1em = 16px。
单位之间的关系:1in = 2.54cm = 25.4 mm = = 96px
p { width: 1in; height:20px; }
在PC时代主要以px为主。在移动web时代主要以: em、rem、pw、ph、百分比等来做布局的设置。
相对单位解释:像素是相对单位。不同平面尺寸可以是相同的分辨率,也就相同的像素大小,对应的实际的尺寸可能不同。
文字排版
CSS字体样式属性
1、font-size:字号大小
font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。
其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
可选参数值:xx-small | x-small | small | medium | large | x-large | xx-large|smaller | larger
尽量不要用上面的.
一般页面中:12px 14px 12cm
1em
例如:
p { font-size: 32px; }
font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。如果字体名称包含空格或中文,则应使用引号括起
例如:font-family:Verdana, Arial, '宋体';
使用font-family设置字体时,需要注意以下几点:
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。
尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
使用font-family设置字体时,需要注意以下几点:
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。
为此,在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。
font-family: "\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。
可以通过escape() 来得到
尽量用unicode或者英文名
字体系列
西方国家字母体系分为两类:serif以及sans serif。
serif是有衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。相反的,sans serif就没有这些额外的装饰,而且笔画的粗细差不多。
为了更安全的设置:
font-famliy: tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
前面的字体都查找失败后,在系统中找一种sans-serif字体作为默认字体。
注意顺序,如果把sans-serif放前面去,后面的都失效了。
font-weight:字体粗细
font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍),有继承性。
400 : Normal
700:bold
建议使用数字
字体的加粗跟字体有关,比如:一种字体只有两种粗细程度的变化,那么normal 到bold 和到bolder都是一样的效果。
font-style:字体风格
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会使用斜体的字体样式显示,如果字体没有斜体,那么正常显示字体。
oblique:浏览器会让文字倾斜显示。。
font:综合设置字体样式
font属性用于对字体样式进行综合设置,其基本语法格式如下:
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性时,必须按上面语法格式中的顺序书写,各个属性以空格隔开。
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
尽量用合写的方式.
淘宝的字体设置:font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;