A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

shbb

初级黑马

  • 黑马币:17

  • 帖子:6

  • 精华:0

© shbb 初级黑马   /  2019-6-9 22:42  /  564 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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、在页面的空白处右键 ---- 检查

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马