选择器进阶

【复合选择器】:后代选择器:空格    语法:选择器1 选择器2 {css}

        子代选择器:>    语法:选择器1>选择器2 {css}

【并集选择器】:, 语法:选择器1 , 选择器2{css}

【交集选择器】:紧挨着    语法:选择器1选择器2{css}

【hover伪类选择器】:(鼠标悬停在元素的状态)语法:选择器:hover{css}

任何标签都能够使用hover

背景颜色:属性名background-color(bgc)取值颜色(不添加就是透明的)

背景图片:属性名background-image(bgi)取值  url('图片的路径')

背景平铺:background-repeat(bgr)

    取值      效果

     repeat   (默认值)水平和垂直方向都平铺

   no-repeat    不平铺

   repeat-x    沿着水平方向(x轴)平铺

   repeat-y    沿着垂直方向(y轴)平铺

背景位置:background-position(bgp)取值:1.方位名词(水平方向位置,垂直方向位置)2.数字+px(坐标)

背景属性连写:属性名:background(bg)属性值 background:  color image repeat position

元素显示模式

1.块级元素:(独占一行,一行只能显示一个;宽度默认是父元素的宽度,高度默认由内容撑开;可以设置宽高)

例如:div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

2.行内元素:(一行可以显示多个,宽度和高度默认由内容撑开,不可以设置宽高)

例如:a、span、b、u、i、s、strong、ins、em、del......

3.行内块元素:(一行可以显示多个,可以设置宽高)

例如:input、textarea、button、select......特殊img

元素显示模式转换(改变元素默认的显示特点,让元素符合布局要求)

    属性        效果      使用频率

  display: block;    转换成块级元素    较多

  display: inline-block;  转换成行内块元素      较多

  display: inline;    转换成行内元素    极少

HTML嵌套规范

块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等.....

但是:p标签中不要嵌套div、p、h、等块级元素

a标签内部可以嵌套任意元素

但是:a标签不能嵌套a标签

CSS的继承和层叠

继承性:(子承父业)常见可以继承的属性(文字控制属性都可以继承)(控制文字的都能继承,不是控制文字的都不能继承)(inherited继承)注意:a标签的color会继承失效;h系列标签的font-size会继承失效

层叠性:(样式会层层叠加,最终写在最后的样式会生效)选择器优先级相同时,通过层叠性判断结果

快捷键 Alt+Shift+鼠标左键单击选多行加内容

随机推荐

  1. Centos7提示Initial setup of CentOS Linux 7 (core)

    Initial setup of CentOS Linux 7 (core) 1) [x] Creat user 2) [!] License information (no user will be ...

  2. JS语句创建简单表格

    var line=3; var list=3; var table=document.createElement("table"); table.setAttribute(&quo ...

  3. linux 下 配置 nginx

    服务器:centOS7 安装nginx之前操作: yum install -y pcre pcre-devel   // pcre是一个perl库,包括perl兼容的正则表达式库,nginx的http ...

  4. 流程图draw.io自选中文字体

    draw.io免费好用,完全可以取代Visio. 唯独缺省选择都是英文字体.但要选择中文字体也可以自行添加,步骤: 确保系统里已经安装了相应中文字体.ubuntu下Google思源字体在/usr/sh ...

  5. <CONTAINING_RECORD宏>引发的<结构体深度剖析(内存对齐,对齐参数,偏移量)>

    什么是结构体内存对齐?为什么要对齐?怎样对齐? 结构体内存对齐:元素是按照定义顺序一个一个放到内存中去的,但并不是紧密排列的. 从结构体存储的首地址开始,每个元素放置到内存中时,它都会认为内存是按照自 ...

  6. home条 防止误碰

    某些界面需要隐藏home条,防止误触导致页面返回 - (UIRectEdge)preferredScreenEdgesDeferringSystemGestures { return UIRectEd ...

  7. flutter SliverPersistentHeader子组件透明度渐变【滑动悬停appbar添加自定义组件的透明度】

    在开发flutter悬停头部中,发现一个问题. 我们通常使用SliverAppBar(),去实现悬停的功能,在使用appbar的时候满足不了我们的需求,就需要自定义, 如下:在title中写了一个搜索 ...

  8. 【服务器数据恢复】热备盘同步失败导致数据丢失的raid5数据恢复案例

    服务器数据恢复环境:华为s系列服务器:24块硬盘组成一组raid5磁盘阵列,其中包含1块热备盘. 服务器故障&检测:服务器工作状态下raid5中有一块硬盘离线,热备盘激活替换离线硬盘并开始进行 ...

  9. safari iframe 滚动问题(iframe--- iphone中的iframe没有滚动,要设置滚动;)

    _::-webkit-full-page-media, _:future, :root #frameBody>.frame-pnl{ overflow:auto; -webkit-overflo ...

  10. 关于右值 std::move

    今天发现一个情况,对容器map 进行 std::move 之后,原map被清空了.     map<int, int> tmp;     tmp[1] = 1;     tmp[2] = ...