今天是基础班的最后一天,本以为会老师讲的东西不会很多,没想到老师讲了许多的知识,虽说不常用,但是我觉得还是有用的,先总结如下:
一、属性选择器
语法:[属性名="属性值"] {} 一般用于表单标签 属于CSS2中的知识
例子:<style>
[class="box"] {
width: 100px;
height: 100px;
background-color: lightgreen;
}
input[class="text"] {}/*可以理解为是交集选择器*/
</style>
<body>
<div class="box"></div>
<input type="text">
</body>
二、伪类结构选择器
结构伪类选择器:在兄弟元素排名为第N的
注意:1、第一个和最后一个有特殊的写法 :first-child {} last-child {}
2、n运算 涉及到n运算的时候从0开始 如:nth-child(2n) :nth-child(3n+1) n从0开始
3、n运算的特殊值 :nth-child(even)偶数 :nth-child(odd)奇数
问题:如果还有其他标签怎么解决?
方法:使用nth-of-type() {}
两者之间的用法区别:如果不考虑类型的话,两者都可以
三、文字阴影
text-shadow: x轴偏移 y轴偏移 模糊的程度 阴影的颜色
注意可以有多个值 中间用逗号隔开
四、背景图片大小
background-size:用来设置背景图片大小的
取值:像素 百分比(参照的是盒子的宽高)contain(前提是不能超出) cover(前提是不能留白)
注意:contains和cover都是等比例缩放,但是contains可能会留白,cover不会留白但是超出的部分会被裁切掉 实际工作中cover用的多一点
五、背景渐变
引入:给一个元素设置background-image,通过URL设置一张图片作为背景图,还可以通过线性渐变和径向渐变设置颜色渐变的背景图
背景渐变:1、线性渐变 2、径向渐变
线性渐变:沿着一个方向颜色进行渐变
六、元素透明
两种方式:1、rgba 2、opacity
区别:第一种背景透明,内容不透明
第二种背景和内容都透明,即元素整体透明
七、通过phpstudy把静态页面部署到web服务器好
好了,今天就到这里了,Fighting!!!