选择器进阶

【复合选择器】:后代选择器:空格    语法:选择器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. loader的原理

    loader的基本原理 帮助浏览器将不同类型的文件资源转化为浏览器可识别的资源 分类 前置loader: pre 普通loader: normal 内联loader': inline 后置loader ...

  2. 面试不愁,给你一份SpringBoot常用注解

    一.注解(annotations)列表 @SpringBootApplication: 包含了@ComponentScan.@Configuration和@EnableAutoConfiguratio ...

  3. 关于java业务限流组件的应用推广

    可参考的链接如下: 限流算法对比.网关限流实践总结(https://segmentfault.com/a/1190000020745218) 高并发下常见的限流算法(https://www.jians ...

  4. IsNotEmpty和isNotBlank的区别

    isNotEmpty和isNotBlank都是判断字符串非空首先查看isNotEmpty( )isNotEmpty判断是否为空(null或size=0),不为空就返回true StringUtils. ...

  5. Ubuntu18.04LTS虚拟机优化

    1.没网 刚安装好没网,可以设置NAT连接,也可以直接设置为桥接模式联网.这里直接桥接. 网络中心使用的是以太网,所以就在菜单的"编辑"里的"虚拟网络编辑器"里 ...

  6. 微积分 I 笔记

    1.1 集合 这一节复习了高中关于集合的基础知识 介绍了一些新的概念 笛卡尔积 (Cartesian Product) 集合 \(X\) 与 \(Y\) 的笛卡尔积 (直积) \(X \times Y ...

  7. React-Navigation 5.x 的 demo案例

    一. stack路由结构的一些效果 (1)横向过渡动画 (2)整个选项卡样式修饰 最终实现效果:动态图 以上两个功能实现都很简单,我测试时,关注了一个问题,navigation 丢失.stackNav ...

  8. 14.java 中缀表达式转后缀表达式

    思路如下: 1.初始化两个栈,运算符栈和中间结果栈 2.从左至右扫描 3.遇到数时直接压入s2 4.遇到运算符时,比较其与s1栈顶的优先级,有如下几种情况: 1)s1为空或栈顶为"(&quo ...

  9. 基于Vue项目+django写一个登录的页面

    基于Vue项目+django写一个登录的页面 前端 借用了一下vue项目模板的AboutView.vue 页面组件 <template> <div class="about ...

  10. a菜单点击标红,其他标黑代码

    <script> let aList = document.querySelectorAll('a'); console.log(aList); for (let index = 0; i ...