码迷,mamicode.com
首页 > Web开发 > 详细

CSS02

时间:2020-03-30 00:00:40      阅读:43      评论:0      收藏:0      [点我收藏+]

标签:元素选择器   元素   引号   isp   div   第一个   round   水平   交集   

这节课学了复合选择器,显示模式,CSS背景,以及CSS的三大特性。

复合选择器

  后代选择器:就是要选择某元素的“子孙后代”,用空格隔开

  子元素选择器:就是选择某元素的“亲儿子”,用“>”隔开

  交集选择器:是“即是。。。又是。。。”的关系,用“.”隔开

  并集选择器:就是标签之间具有相同的样式,用“,”隔开,表示“和”的意思

  链接伪类选择器:a:link 表示未访问链接的状态;a:visited 表示已经访问过的链接的状态;a:hover 表示鼠标经过链接时候的状态;a:active 表示已选定链接的状态(就是按住鼠标左键不动,所呈现的状态)

显示模式

  块级元素:比较霸道,独占一行,可以设置宽高 block

  行内元素:愿意和所有行内元素共享一行,不能设置宽高 inline

  行内块元素:和行内元素一样也愿意共享一行,可以设置宽高 inline-block

三种模式的转换

  display:block 表示其他元素可以转换为块级元素

  display:inline 表示其他元素可以转换为行内元素

  display:inline-block 表示其他元素可以转换为行内块元素

CSS背景

  背景图片 background-image:url();

  1、url()必须要有 2、url()里面可以用相对路径或绝对路径,不带引号

  背景平铺 background-repeat:repeat/no-repeat/repeat-x/repeat-y;

  repeat:横向和纵向平铺;no-repeat:不平铺;repeat-x:横向平铺;repeat-y:纵向平铺

  背景位置 background-position:x坐标 y坐标;(方位名词/数值)

  方位名词:前后顺序没有关系,不影响显示效果;如果只指定一个方位名词,则另一个默认居中,center center 表示水平垂直居中

  数值:第一个只能是x坐标,第二个只能是y坐标

  背景附着 background-attachment:fixed/scroll;

  fixed:背景固定;scroll:背景会跟随对象进行滚动

  背景简写 background:背景颜色 背景图片 背景平铺 背景附着 背景位置;

  背景透明 background:rgba(0,0,0,0-1);

  注意:最后一个数可以写0.2,也可以写.2 背景透明是指盒子透明与盒子里的内容无关

CSS的三大特性

  层叠性:遵循 “就近原则”,样式冲突则层叠,样式不冲突不层叠;

  继承性:简单的理解为“子承父业”,也就是子元素会继承父元素的样式;

  优先级:权重决定了标签样式优先级的问题 

      1.继承和全局* 权重为0,0,0,0 小组成员

      2.标签选择器  权重为0,0,0,1 小组长

      3.类选择器   权重为0,0,1,0 班长

      4.id选择器   权重为0,1,0,0 班主任

      5.行内样式   权重为1,0,0,0 校长

      6.!important 权重无穷 最大的 教育局局长

权重叠加:没有进制 

       div ul .nav 表示两个标签选择器的权重加上一个类选择器的权重 0,0,0,1+0,0,1,0=0,0,1,1

      0,0,0,5+0,0,0,5=0,0,0,10

      

 

 

 

 

 

          

CSS02

标签:元素选择器   元素   引号   isp   div   第一个   round   水平   交集   

原文地址:https://www.cnblogs.com/sunnysoul/p/12595965.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!