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+鼠标左键单击选多行加内容
随机推荐
- VUE学习-列表渲染
列表渲染 v-for <!-- v-for="(v,k,i) in arr/obj" --> <ul id="app"> <li ...
- reids 启动方法
---恢复内容开始--- 在windows环境下启动redis服务,前提是你安装好了,启动如下: 一,进入redis的安装目录下,在地址栏输入"cmd",回车 二,然后会进入cmd ...
- 用js实现元素两个元素位置对齐
一.问题描述 使得填表单位那一行字与下面的表格左对齐,对表格使用css中的margin:auto实现了居中,但是对那一行字(用div包裹的)使用margin:auto不生效:并且2021年下面对应的月 ...
- Unity 使用IO流获取PNG/JPG/GIF/BMP的宽高【转】
原文链接:https://blog.csdn.net/flj135792468/article/details/107963280?utm_medium=distribute.pc_relevant. ...
- 蓝牙mesh组网实战(智能家居应用)
目录 蓝牙mesh组网目前存在有入门门槛高的问题,比如,嵌入式工程师需要考虑到标准mesh模型的兼容,app开发工程师需要了解mesh协议栈才能直接走mesh与芯片通信.而沁恒官方提供的透传模型简洁易 ...
- 《CSOL大灾变》开发记录——武器购买逻辑开发
上次完成了武器购买界面设计,这次来完成武器购买逻辑与武器选择逻辑. 武器购买逻辑分为两个部分,一个部分是GUI部分的逻辑,也就是购买菜单,一个是武器游戏数据更新的逻辑,也就是实际中玩家获取武器的逻辑开 ...
- PLC数据块中的偏移量
PLC数据块中的偏移量是什么? 偏移量定义为:把存储单元的实际地址与其所在段的段地址之间的距离称为段内偏移,也称为"有效地址或偏移量". 段地址左移四位,与有效地址相加,就构成了逻 ...
- C. Tea Tasting
https://codeforces.com/contest/1795/problem/C 用二分+前缀和+差分卡过 #include <iostream> #include <cs ...
- CAM更改起始直径为直径
Session* theSession = Session::GetSession(); Part* workPart(theSession->Parts()->Work()); UI* ...
- Python3.6多线程爬虫
Python版本 3.6 简单写一个爬虫,在写的过程熟悉Python语法,不得不说Python用起来真666; 代码功能是访问网站首页将所有a标签值作为文件夹,将当前网页所有图片下载对应文件夹中;其实 ...