CSS第二小节第一天

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;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,721评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 如果您觉得这篇文章还...
    MR_LIXP阅读 7,868评论 1 9
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 6,185评论 1 4
  • 一.CSS描述 CSS全称为“层叠样式表(Cascading Style Sheets)”,它主要是用于定义HTM...
    snowy_sunny阅读 4,756评论 0 4