锐客网

  1. 首页 > 睿知 > it技术 > >

CSS第二小节第一天

HTML标记一般分为块标记和行内标记两种类型，它们也称块元素和行内元素。具体如下：
块元素
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
块级元素容器可以容纳多个嵌套的块级标签或者行内标签。
常见的块元素有-,,div,ul,ol,li等,其中
标记是最典型的块元素。

CSS第二小节第一天
文章图片
CSS的标签模式设置Display属性 display可以控制标签的显示模式。

display：none | inline | block | inline-block
【CSS第二小节第一天】继承性：无
display值的解释：
none ：此元素不被显示，在文档中被移除。
block ：此元素按块级元素显示：前后带换行符，自己占一行。内联元素 → 块元素
inline ：此元素按内联元素显示：1个挨着1个。块元素 → 内联元素
inline-block：按行内标签进行排版，但是可以设置宽高，而且高度可以影响行高（以后再详细讲）。


CSS第二小节第一天
文章图片
通过设置Display为none，那么可以让这整个标签在页面中移除掉

CSS第二小节第一天
文章图片
对比一下：

/*display: none; *//*直接把当前标签从页面中直接移除了，不影响页面的布局*/
visibility: hidden; /*这个只是不显示，但还是占用页面的空间*


CSS第二小节第一天
文章图片
行内不可以设置宽高,块级可以.行内元素只能通过内容来撑开.只有左右边距.如果你设置了宽高是不会影响行内元素的显示的。
CSS的颜色表示


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
尽量不要用上面的.
一般页面中：12px14px12cm
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()来得到
CSS第二小节第一天
文章图片
尽量用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-stylefont-weightfont-size/line-heightfont-family; }
使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
尽量用合写的方式.
CSS第二小节第一天
文章图片
淘宝的字体设置：font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;

    推荐阅读


    上一篇：六个头的孩子

    下一篇：2017-07-02