day04前端-CSDN博客

本文链接：https://blog.csdn.net/qq_44718740/article/details/118787228

一、伪类hover的使用

hover,当鼠标移动到对应位置时，实现变化()

1.hover 可以给自身改变状态自身的选择器:hover{声明}

2.hover 可以通过父级改变子级父级的选择器:hover 子级选择器{声明}

3.不可以给父级改变状态

css代码如下:

div:hover{
    color: rebeccapurple
}

<!-- 通过父级改变子级 -->
div:hover p{
    color: greenyellow
}

二、其他的伪类

a:link{
    color:green;/*未访问的链接状态*/
}

a:visited{
    color:blue;/*已访问的链接状态*/
}

a:hover{
    color:pink;/*鼠标滑过的状态*/
}

a:active{
    color:red;/*鼠标按下去的状态*/
}

三、权重的计算表达方式

用四位数字表示 0 0 0 0

行内样式表 1000

id选择器 0100

class选择器 0010

伪类选择器 0010

标签选择器 0001

包含选择器相加 ul li

群组选择器各自计算

通配符 0000

拓展：属性:属性值 !important

四、ps的基础使用

1.火狐和360浏览器支持保存网页为图片；

2.切图：（左侧操作栏里面第五个工具，右键单击，选取切片工具）

3.矩形选择框:量取整选中图片的大小（左侧第二个按钮）

信息提示： F8或者Fn+F8

ps中的辅助线: 快捷键ctrl + r

ps设置单位默认是cm 快捷键ctrl + k --> 单元与标尺 --> 像素

放大和缩小设计图的快捷键：ctrl + +/-

长按alt + 鼠标滚轮

移动图片: 按住键盘上的空格键鼠标指针会变成手型；

4保存切片：

- 点击左上角文件选择存储为web和设备所用格式

- 弹窗 - 文件后缀名(根据需求)

-png一般用来当背景图，

- 需要修改图片的名字/ps切图保存会自动生成一个images文件夹

- 切片需要选择到的是"所有的用户切片"

5 视图：

清除参考线

清除辅助线

6做一个表情包

两个图片拖入ps中

橡皮擦工具抹除表情

套索工具选择表情 ctrl + c/v

选到相应的图层 ctrl + t(shift等比例缩放) 右键翻转回车

图像 - 模式 - rgb- ->灰度（扔掉-不拼合）

图像 - 调整 - 色阶。

五、浮动属性

类比气球

标签{
	float：left/*right(共三种，但none不要求)*/
}

浮动属性会让元素脱离文档流（正常的网页布局：从上到下从左到右）初始位置不在了

浮动元素碰到-父级元素边框-或者前面一个含有浮动属性的元素也会停止浮动

当最后一个子级元素的宽度大于父级元素宽度的时候会往下进行移动直到找到足够的控件停止浮动

六、盒子里面常用的属性（css文件里面）

1.盒模型的概念

css布局的基石

规定了网页元素如何显示以及元素间相互关系。

css定义了所有的元素都可以拥有像盒子一样的外形和平面空间。

即margin,border,padding,content;(外边距、边框、内边距、内容区)

p{
	text-align: center;/* 文本在盒子里面水平居中 */
	line-height: 40px;/* 设置列高为盒子的高度来实现文字垂直居中 */   
}

img{
    display:block;/* 1.margin:0 auto;使用的前提是块级2.元素行内元素设置成块级元素后也可以对其宽高进行设置*/
    width:333px;
    height: 350px;
    margin:0 auto;/*使图片在盒子里面水平居中*/
}