选择器进阶

【复合选择器】:后代选择器:空格    语法:选择器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. ABAP 写入批次特征值以及更新批次特征值

    需求 SAP启用了批次,需要在特征值中写入物料类型,区分该物料批次是用于研发的亦或是量产的,关于研发和量产标识我是坐在采购订单行项目增强中了,这里就不多赘述了,参考https://www.cnblog ...

  2. Python 20个常用库

    Requests.Kenneth Reitz写的最富盛名的http库.每个Python程序员都应该有它. Scrapy.如果你从事爬虫相关的工作,那么这个库也是必不可少的.用过它之后你就不会再想用别的 ...

  3. javaweb常用的配置文件

    1.applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans ...

  4. SpringBoot运行就停止

    检查下是不是没有引入springboot-starter-web依赖 <dependency> <groupId>org.springframework.boot</gr ...

  5. Filters in ASP.NET Core(Net6之过滤器)

    Filters in ASP.NET Core 如果觉得样式不好:跳转即可 (md文件复制过来有些样式会不一样) 原文地址:https://lifengying.site/archives/net6% ...

  6. win10多用户

    到https://github.com/stascorp/rdpwrap/releases下载 最新版文件(已经停更了,最新的版本是 v1.6.2) 下载后解压到 C:\Program Files\R ...

  7. 洛谷 P4048更新题面

    [JSOI2010]冷冻波 题目描述 WJJ 喜欢"魔兽争霸"这个游戏.在游戏中,巫妖是一种强大的英雄,它的技能 Frozen Nova 每次可以杀死一个小精灵.我们认为,巫妖和小 ...

  8. 谷歌浏览器上elementUI的按钮文字消失了

    解决方案:有个谷歌浏览器插件,好像是什么淘宝的,删掉即可

  9. Python与CSharp之间内存共享互传信息

    C#写入字符串到共享内存 try { long t = 1 << 10 << 10; var mmf = MemoryMappedFile.CreateOrOpen(" ...

  10. java-javaSE-集合类

    集合类结构 集合类的基本接口是 Collection 和 Map Collection 向下派生出 Set List Queue 等接口 Map 向下派生出 HashMap LinkedHashMap ...