css项目经验二

引用外部样式表

a.链接式引用外部样式表:
<link type="text/css" rel="stylesheet" href="css/style.css"/>

b.导入式引用外部样式表:
<style type="text/css">
  @import url("css/stype.css");
</typle>

浏览器兼容前缀

-moz-      火狐等使用 Mozilla内核的浏览器
-webkit-   谷歌、Safari等使用 Webkit内核的浏览器
-o-        Opera浏览器,使用Blink内核
-ms-       IE,使用 Trident内核

css选择器

常用于激活样式变更


.wrap{
	display:none
}
//中间没有空格   表示当存在wrap以及active两个类时,样式才生效
.wrap.active{
	display:block;
}
//中间有空格   表示wrap 下的所有active
.wrap .active{
	
}
//子选择器
.wrap >.active{
	
}

CSS3的高级选择器

1.层次选择器:
(1)后代选择器A B{ }:中间用空格隔开,只要是A的后代元素都会被选中。
(2)子选择器A>B{ }:只能选择A的子元素。
(3)相邻兄弟选择器A+B{ }:只用于A后面一个同级元素
(4)通用兄弟选择器A~B{ }:用于A后面所有的同级元素

2.结构伪类选择器:根据文档对象模型DOM的节点(元素级别)来操作。
(1)B:first-child	作为父元素的第一个子元素B,作用和(3)相似
(2)B:last-child	作为父元素的最后一个子元素B
(3)A B:nth-child(n)	在父级中查第n个子元素是不是B,不分类型
(4)B:first-of-type 	选择父元素内B类型的第一个元素B
(5)B:last-of-type	选择父元素内B类型的最后一个元素B
(6)A B:nth-of-type(n) 在父级里先是不是B类型,再看位置n

3.属性选择器:
(1)A[arrt]  选择包含属性arrt的A标签(也可写多个属性,但要同时存在)
(2)A[arrt = val]  选择包含属性arrt,且属性值=val(区分大小写)的A标签
(3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串
(4)A[arrt $= val] 选择包含属性arrt,且属性值以val结尾的任意字符串
(5)A[arrt *= val] 选择包含属性arrt,且属性值包含val字符串的A标签

更改input里placeholder的字的颜色

input::-webkit-input-placeholder{
 color:#bfbfbf;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#bfbfbf;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#bfbfbf;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
    color:#bfbfbf;
}

阴影样式设置

box-shadow: h-shadow v-shadow blur spread color inset;
在这里插入图片描述
形如:

box-shadow: 2px 0px 4px 2px #000;
2px  盒子阴影沿水平轴偏移2px,即向右偏移,出现明显的右阴影

box-shadow: -2px 0px 4px 2px #000;
-2px  盒子阴影沿水平轴偏移-2px,即向左偏移,出现明显的左阴影

box-shadow: 0px 2px 4px 2px #000;
2px  盒子阴影沿垂直轴偏移2px,即向下偏移,出现明显的下阴影

box-shadow: 0px -2px 4px 2px #000;
-2px  盒子阴影沿垂直轴偏移-2px,即向上偏移,出现明显的上阴影

水平阴影可以理解为偏左右哪个方向,如果加入inset,正数偏左,负数偏右,如果没有inset,正数偏右,负数偏左;
垂直阴影可以理解为偏上下哪个方向,如果加入inset,正数偏上,负数偏下,,如果没有inset,正数偏下,负数偏上;

总之,inset属性让水平、垂直阴影的方向与没有inset时相反。

如果只要实现单侧阴影,直接通过修改box-shadow做不到,需要特殊处理。

背景图片样式设置

两个方式
第一种,给div设置背景图片

background: url(test.png) no-repeat center;
background-size: cover;

第二种,设置img标签的宽度和高度,利用object-fit:cover实现,即直接操作img标签

img{
    width: 200px;
    height: 200px;
    object-fit: cover;
}

参考资料

文字溢出隐藏变省略号

单行文字超出显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文字超出显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
//表示显示3行
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
发布了44 篇原创文章 · 获赞 0 · 访问量 4202
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览