No.1.4
选择器进阶
【复合选择器】:后代选择器:空格 语法:选择器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+鼠标左键单击选多行加内容
随机推荐
- windows下搭建h5游戏小小火影教程【附安装包】
小小三国是一款很好玩的H5游戏.只需要用一台64位的windows电脑或服务器,你就可以和朋友们一起联机玩这个游戏了.本文将会教你如何搭建这个游戏,步骤如下. 1.下载好后你会看到该压缩包 2.解压到 ...
- harbor 修改主机地址
harbor 修改主机地址 1 # cd /var/lib/wise2c/harbor/harbor 2 # docker-comppose down 3 # vi harbor.cfg 4 host ...
- Stream流常用API
文档 https://www.runoob.com/java/java8-streams.html JDK8 Stream API: https://docs.oracle.com/javase/8/ ...
- [Swift] 在 OC 工程中,创建和使用 Swift
1.我们创建了一个 Objective-C 的工程,叫做 playGround. 2.首先,我们需要在 工程的 Build Settings,找到 如中所示的项目,并将 Defines Module ...
- java判断上传图片格式
由于客户上传图片将png的图片的后缀名改为jpg,所以通过后缀名判断不行,用下面这个方法可以 //判断是否是JPG格式 log.info("-1----进入JPG格式判断....." ...
- 25js String(字符串)对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- idea中怎么查找替换数据?
快捷键全局查询所有:crtl+shift+F 快捷键全局替换所有:crtl+shift+R 1.crtl+f crtl+r 快捷键全局查询所有:crtl+shift+F 快捷键全局替换所有:crtl+ ...
- 7.29关灯游戏,用script实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- axios和ajax对响应是文件流用blob处理
先看axios请求处理,下载文件 this.$axios.get(api.exportMortgageOrderExcelVisit, { params: params, responseType: ...
- Android版本功能
Android 1.0 2008年9月23日,发布Android操作系统中的第一个正式版本:Android 1.0(Astro"铁臂阿童木").全球第一台Android设备HTC ...