软件测试必备-前端知识点之css基础及ps的用法

时间:2023-03-08 21:56:05

CSS

软件测试必备-前端知识点之css基础及ps的用法

一、 css定义

css样式表、层叠样式表,级联样式表

二、 css基础语法

1、 写style标签,放在head标签里面的最后位置

2、 自己写的css代码,放在style标签里面

三、 css常用属性

1、color: red;   设置文字颜色

2、font-size: 50px; 设置文字大小

3、font-family: “黑体”; 设置字体(如果设置的是中文字体,要加双引号!)

4、width: 100px;  设置宽度

5、height: 100px;  设置高度

6、background: red; 设置背景色

四、 标签选择器

在css语法中使用标签名字来选择元素的语法就叫标签选择器;

div标签代表大盒子、容器、放内容的(独占一行)

span标签代表小盒子、容器、放内容的(多个小盒子,在浏览器宽度够用的前提下,可以同一行显示)

五、 id选择器

给html指定标签设置id属性,再从css语法中使用#指定id的名字,实现的id选择器;

例:

#div01{}

<div id=”div01”></div>

命名细节:

1、 不能使用数字开头

2、 不能使用中文

3、 不能使用特殊字符(除了下划线_和中划线-)

4、 可以使用驼峰命名法:首单词小写,后面的单词首字母都大写

例:  myDivRed

注意:此种命名方式是程序员之间约定俗成的,首单词大写不是错误!

注意:id选择器必须是唯一的!一个标签不能设置多个id名;id的名字也不能出现重复的清空

六、 类选择器

在html中设置class属性,在css中使用.class的名字

例:

.div01{ xxx}

<div class=”div01”>xx</div>

注意:类名可以重复使用,同一个标签可以设置多个类名属性,中间使用空格分隔

七、 ps吸取颜色

1、 模拟拥有了一个设计稿(按键盘的print screen 或prtsc)可以实现截屏效果

2、 打开ps,在菜单栏点击“文件-新建”

软件测试必备-前端知识点之css基础及ps的用法

3、 弹出窗口直接点击确定,ctrl+v即可把之前截屏的图放入ps中

4、 Alt+鼠标滚轮可以放大缩小

5、 点击左下角的图标,鼠标就会变为吸管,点击鼠标左键即可吸取颜色;

6、 复制数值,放在代码中,别忘了自己添加井号!

软件测试必备-前端知识点之css基础及ps的用法软件测试必备-前端知识点之css基础及ps的用法

软件测试必备-前端知识点之css基础及ps的用法

八、图片格式

1、.png 可以有透明效果的图

2、.jpg 普通的图片

3、.gif  动图

4、.psd  ps软件生成出来的图(ui设计师制作的)

九、ps常用操作

1、英文状态下按键盘t,可以让ps指针变为文字工具,此时我们点击想要查看的文字即可在ps菜单栏上看到所有样式属性。

软件测试必备-前端知识点之css基础及ps的用法

2、测量工具(先要改变ps的默认显示单位);

软件测试必备-前端知识点之css基础及ps的用法

软件测试必备-前端知识点之css基础及ps的用法

软件测试必备-前端知识点之css基础及ps的用法此工具就是测量间距用的,点击之后,按住鼠标左键拖拽,即可看到宽、高属性

十、css的书写位置

1、style标签写在html文件中,叫内嵌式css;(电商网站的首页,必须使用此种方式,因为加载速度最快)

2、link标签引入外部的css文件到html文件中,叫外链式(除了电商首页外的页面,都要使用此种形式,因为实现了代码的分离,方便修改)

软件测试必备-前端知识点之css基础及ps的用法

3、 写在标签里面的css样式,叫行内css(千万不要使用,修改起来非常困难)

软件测试必备-前端知识点之css基础及ps的用法