黑马程序员技术交流社区

标题: 学习经历 [打印本页]

作者: shbb 时间: 2019-6-9 22:42
标题: 学习经历
4、Css选择器
Css选择器的分类
Css选择器分为两类：基础选择器和高级选择器（复合选择器）
基础选择器：标签选择器（html选择器）、类选择器、ID选择器
复合选择器：后代选择器、并集选择器、指定标签选择器
CSS选择器作用
选择标签的，把想要选择的元素标签选择出来。
标签选择器：
以标签名称命名的选择器，可以把将页面中所有的同类元素全部选中，所以实际工作中标签选择器不推荐大家使用；

类选择器（重点）
类选择器定义
类选择器使用有一个过程：
01 定义：在css里面用点“  .  ” +  类名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
类选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
但是可以用数字结束。
类选择器特殊用法（多类名）
一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
例如：<div class=“red  font100”>一个元素调用多个类名</div>
ID选择器（了解）
id选择器的定义使用
id选择器使用有一个过程：
01 定义：在css里面用 “  #  ” +  id名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用；
id选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
通配符选择器*
一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
*{
margin:0;
padding:0;
}
以上代码表示清空所有的默认边距；
5、文字控制属性（死记硬背）
文字颜色 color
Color取值
a、直接写英文单词yellow，red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
常用测试颜色16进制：
黑色系列：#000； #333；  #666； #999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
文字大小 font-size
文字字体 font-family
取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字要用引文状态的引号引起来；

Unicode字体

字体加粗  font-weight
如果要用数字来表示加粗或者不加粗，千万不能书写单位px；

字体样式(风格) font-style
实际开发中我们很少让文字倾斜，但是我们会让倾斜的i和em不倾斜；

文本水平居中 text-align: center;
text-align文本居中控制，取值：left、right、center；
text-align让文字在父级盒子里面居中显示；
文本的行高  line-height
line-height取值为数字+px单位，可以设置文字行与行之间的距离；
如何量取设计稿的行高？
从第一行文字的开始到第二行文字的开始就是行高

文本首行缩进 text-indent
text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小；
text-indent:2em;  首行缩进2个字；
6、字体的综合写法 font复合属性

注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；
实际工作中一般只用：font:文字大小字体；
7、文本线条装饰  text-decoration  （死记硬背）
text-decoration:none;没有线
text-decoration：underline；下划线
text-decoration:line-through; 中  划线/删除线
text-decoration:overline; 上划线
8、chrome调试工具（重点）
01、捷键F12调出调试工具，如果直接按F12不生效我们就+FN
02、在页面的空白处右键 ---- 检查

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

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