css3基础重温

2019-09-10 郑州网站建设  

一、CSS权重CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。权重的等级可以把样式的应用方式分为几个等级,按照等级来计算权重1、!important,加在样式属性值后,权重值为 100002、内联样式,如:style=””,权重值为10003、ID选择器,如:#content,权重值为1004、类,伪类和属性选择器,如: content、:hover 权重值为105、标签选择器和伪元素选择器,如:div、p、:before 权重值为16、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0实例一<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>CSS权重</title><styletype="text/css">div{background-color: red!important;}</style></head><body><divstyle="background-color: blue">这是一个div</div></body></html> 两条样式同时作用一个div,上面的样式权重值为10000+1,下面的行间样式的权重值为1000, 所以文字的最终色彩为red 实例二<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>CSS权重</title><styletype="text/css">#content div.main_content h2{background-color: red;}#content .main_content h2{background-color: blue;}</style></head><body><divid="content"><divclass="main_content"><h2>这是一个div</h2></div></div></body></html> 第一条样式的权重计算: 100+1+10+1,结果为112; 第二条样式的权重计算: 100+10+1,结果为111; h2标题的最终色彩为red 二、CSS3新增选择器1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素<style type="text/css"> .list div:nth-child(2){ background-color:red; } </style> ...... <div> <h2>1</h2> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <!-- 第2个子元素div匹配 --> 2、E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)3、E:first-child:匹配元素类型为E且是父元素的第一个子元素4、E:last-child:匹配元素类型为E且是父元素的最后一个子元素5、E:only-child:匹配元素类型为E且是父元素中唯一的子元素6、E:nth-of-type(n):匹配父元素的第n个类型为E的子元素7、E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)8、E:first-of-type:匹配父元素的第一个类型为E的子元素9、E:last-of-type:匹配父元素的最后一个类型为E的子元素10、E:only-of-type:匹配父元素中唯一子元素是E的子元素11、E:empty 选择一个空的元素12、E:enabled 可用的表单控件13、E:disabled 失效的表单控件14、E:checked 选中的checkbox15、E:not(s) 不包含某元素<style type="text/css"> .list div:not(:nth-child(2)){ background-color:red; } </style> ...... <div> <h2>1</h2> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <!-- 第 3、4、5 子元素div匹配 --> 16、E:target 对应锚点的样式<style type="text/css"> h2:target{ color:red; } </style> ...... <a href="#tit01">标题一</a> ...... <h2 id="tit01">标题一</h2> <!-- 点击链接,h2标题变红 --> 17、E > F E元素下面第一层子集18、E ~ F E元素后面的兄弟元素19、E + F 紧挨着的兄弟元素属性选择器:1、E[data-attr] 含有data-attr属性的元素<style type="text/css"> div[data-attr='ok']{ color:red; } </style> ...... <div data-attr="ok">这是一个div元素</div> <!-- 点击链接,h2标题变红 --> 2、E[data-attr='ok'] 含有data-attr属性的元素且它的值为“ok”3、E[data-attr^='ok'] 含有data-attr属性的元素且它的值的开头含有“ok”4、E[data-attr$='ok'] 含有data-attr属性的元素且它的值的结尾含有“ok”5、E[data-attr*='ok'] 含有data-attr属性的元素且它的值中含有“ok”三、CSS3圆角、阴影、rgbaCSS3圆角设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px;同时分别设置四个角: border-radius:30px 60px 120px 150px;设置四个圆角相同:border-radius:50%;CSS3阴影box-shadow:h-shadow v-shadow blur spread color inset;分别设置阴影:水平偏移 垂直偏移 羽化大小 扩展大小 色彩 是否内阴影<style type="text/css"> .box{ width:200px; height:50px; background-color:gold; /* box-shadow:10px 10px 5px 2px pink inset; */ box-shadow:10px 10px 5px 2px pink; } </style> ...... <div></div> <!-- 给盒子加上了粉红色的阴影 --> rgba(新的色彩值表示法)1、盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(兼容IE);2、rgba(0,0,0,0.1) 前三个数值表示色彩,第四个数值表示色彩的透明度四、CSS3 transition动画1、transition-property 设置过渡的属性,比如:width height background-color2、transition-duration 设置过渡的时间,比如:1s 500ms3、transition-timing-function 设置过渡的运动方式

linear 匀速

ease 开始和结束慢速

ease-in 开始是慢速

ease-out 结束时慢速

ease-in-out 开始和结束时慢速

cubic-bezier(n,n,n,n)

比如:cubic-bezier(0.845, -0.375, 0.215, 1.335)

曲线设置网站:https://matthewlein.com/ceaser/


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1677.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • css
  • 权重