黑马程序员技术交流社区

标题: 学习笔记——第2节CSS的性质 [打印本页]

作者: Zy_阿匠 时间: 2017-1-3 15:57
标题: 学习笔记——第2节CSS的性质
本帖最后由 Zy_阿匠于 2017-1-3 15:59 编辑

第一部分
第1课时
1、行内标签有：<strong>、<span>、<s>等
2、块级标签有：<p>、<h>系列、<div>等
3、前端学习笔记第九天display属性可以设置块级标签为行内标签显示，也可以设置行内标签为块级标签显示
   基本设置为：display:none、inline及block等
第2课时
1、display的属性有4个，分别是：
   None,设置标签不显示，及把标签所占的空间也移除
   Inline,设置标签为行内显示，标签不可以设置宽高，并且没有上下边距，只有左右边距，
            只能通过标签的内容来撑起宽高
   Block,设置标签为块级显示，标签有宽高和边距，并且独占一行显示
   Inline-block,行内块级标签，标签可以设置宽高，也只有左右边距，不独占行
2、visibility设置属性值为hidden时，标签只是隐藏，但所占空间依然存在
第3课时
颜色的3种表示方法：
1、rgb表示法：rgb{255,255,255};
2、16进制表示方法：#0347b2
3、颜色名字表示法： red、green
第4课时
1、字体长度单位分绝对长度和相对长度，像cm、mm等为绝对长度，但不常用；px、em为相对
   长度，一般常用此
2、1px为显示器上显示的1个点，1em为当前设置的内容长度px，例如，当前字体为12px,1em=12px
3、字体格式设置：font-size,设置字体大小
                           font-family设置字体族；设置字体族时要考虑到各版本系统及浏览器兼容的问题
                           可以用escape方法转换字体为编码形式
4、字体系列更安全的设置为利用“sans-serif”设置字体族类，例如：
   Font-family:”微软雅黑”,“黑体” ,sans-serif，在字体族类设置后加一个“sans-serif”，是为了当浏览器中
   全部没有前面设置的字体时，就找一个默认的非衬线字体进行设置
第5课时
1、设置字体粗细用属性font-weight设置，该属性值包括：normal、blod、bolder、lighter、整数(100-900)
   一般情况下常用设置用数字设置就可以，400对应normal，700-900对应bolder，100-400对应lighter;
   特别注意：设置字体粗细时，数字后面不加任何单位！例如：font-weight: 700;
2、设置字体样式用属性font-style设置，属性值包括：normal(默认)、italic字体倾斜、obliue使字体倾斜
第二部分
第1课时
1、字体合写的基本语法为：

[CSS] 纯文本查看 复制代码

 {font: 

                                                   font-style font-weight font-size/line-height font-family;

}

2、按照此顺序设置，不要弄混；一般设置时，前2个属性都是默认值，直接从第3个属性开始设置
3、设置合写属性时，一定要设置font-size与font-family，否则合写不起作用
第2课时
1、letter-spacing，设置字符之间的间距，中文是一个字代表一个字符，英文是一个字母代表一个字符
2、wording-spacing,设置单词之间的间距，只对英文单词之间有影响，对中文的字与字之间没有影响
但是如果中文字之间有空格的话，会把空格设置成属性值
第3课时
案例：

[CSS] 纯文本查看 复制代码

<style>

           a{

               Background-color: silver;

               font: 700 12px “黑体”;

               Display: inline-block;

               Width: 200px;

               Height: 50px;

               Line-height: 50;

               Text-align: center;

               Text-doceration: none;

               Letter-spacing: 30px;

               

}

</style>

<body>

<a href=“#”> 按钮</a>

</body>

第4课时
1、文本修饰属性，text-decoration
2、其一共有4个属性值，分别为：
   None,文本无修饰样式
   Line-through,文本设置删除线
   Underline,文本设置下划线
   Overline,设置文本顶线
第5课时
1、文本样式属性text-align，其有3个属性值，分别为：
   Left，默认属性值，左对齐
   Right，右对齐
   Center，居中显示
2、文本样式属性text-indent，为段落文本设置首行缩进
第6课时
1、空白符的处理属性设置为，white-space
2、其属性值如下：
   Normal,常规默认值，空格空行无效，如文本长度超过区域宽度，折行处理
   Nowrap,空格空行无效，文本长度超过区域宽度，强制文本不换行，除非遇到换行符
   Pre，预格式化，按文档的格式保留
第7课时
1、单词换行设置属性为word-break
2、其属性值如下：
   Normal,默认属性值，按浏览器默认换行规则进行换行
   Break-all,设置单词内可以换行，如果单词长度超过容器长度，可以允许即使一个单词
                  不完整，也可以进行换行
   Keep-all,保留单词的完整性，即使单词长度超过容器长度，也不能换行，除非碰到换行符

作者: 方传奇 时间: 2017-1-3 21:12
好帖，谢谢分享

作者: 浮世散人 时间: 2017-1-10 00:08
总结的会让你不错，加油

作者: 姚永东 时间: 2017-1-10 00:13
谢谢分享

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2