CSS_rules
CSS 特性
1)控制灵活,功能强大 元素-->标签 针对html的元素
2)可以设置html元素的属性,与html框架的进行分离
3)执行效率更高
CSS语法
text-indent 文字缩进
选择器{属性:值} selector{property:value;property:value;.....}
1. 多个属性和值分号隔开,last one 可加可不加
2. 可以 Java 式写法
3. 大小写不敏感,but in selector to class and id's names 敏感
(1) CSS 可以写入标签作为参数,内联
1)作用叠加(内联未定义的叠加,已定义的叠加)
2)作用域就近
type "text/css"
(2) CSS 可以写入head标签底部,外联
(3) 可以是外部文件,在html head 标签中加入link标签 (优先级最低)
选择器 selector
1. 元素选择器 标签名 定位
2. 类选择器 .classname{} 可在标签中重复使用 标签中使用class 参数 调用相应CSS——style
3. id选择器 #idname {} 定位准确,效率最低 只能针对单一标签
id 不可重复 标签中使用id参数调用相应CSS_style
块--> 区域--> 元素 <标签>
CSS padding:值 会同时拉宽拉高“值”块
padding-bottom
-left
-right 只改变单独的padding
-top
margin : 0 auto 自动居中
margin 与最近框的距离,不改变块大小
顶右底左的顺序
只合并垂直间距,如果两者相同,只选其一;如果不同,选大间距
border : 1px solid #foo
宽 类型 颜色
CSS 流-->
块--> 文档流 每一块占一行
float-none
-left 漂浮
-right
clear:both
left 清除受漂浮的影响
right
元素可引用多个类 class="a a_blue"
div div{} a div{} .a1,.a2,.a3{}
.a1{} .a2{} .a3{}
id aa div{}
display 改变块的模式
overflow = {hidden,auto,scroll(滑块)}
background-repeat : no-repeat;
background-position: top left;
background-size:auto;
contain;
cover;
值
position:absolute
relative
inherit
相对位置
1)左上角的顶点作为原点
2)left代表x值
top代表y值
3)原来的位置不会被删除
position: absolute 原点在整个网页显示区的左上角
left top 控制顶点坐标
父类div 相对位置,子类div绝对位置 相对的绝对位置
border-radius: 5px; 边框圆角
line-height: 行高
搜索框多图标背景 + input框
先编写的在最底层,用 z-index:[-oo,+oo] 可以调整层
width:100% 占其父块的百分比
position:fixed 固定位置 有bottom坐标
background-size: cover 拉伸填满
text-decoration:underline 文字加下划线
&rrar; 小箭头
ol 有序列表 ul 无序列表 dl 自定义列表
ul 列表
-webkit- 定义在谷歌浏览器中的相关规则
-ms- 定义在IE浏览器中的相关规则
ul padding 各子块间距 list-style 定义项目符号规则
display: block 正常块 文档流 自顶向下
inline-block 行内块 从左向右
inline 行内元素 有宽无高,没有块属性和块规则
伪类
名字固定格式 selector:before|after|hover
before&after 必须有{content}属性
a标签的伪类
1)link 未点击
2)visited 访问过
3)hover(common) 鼠标滑过
4)active 激活(按下)
font-weight:bold 加粗
CSS3 动画{ 对所有进行过度 过渡需要时间
过渡 transition: all time(s) {ease,linear(线性),ease-in,ease-out,ease-in-out,none}
动画 1) animation: "name" "time(s)" {ease,linear(线性),ease-in,ease-out,ease-in-out,none} {infinite(无限次循环)}
animation-play-state:{running,pause}(可以放在需要的地方来中途暂停动画)
2) 设置
定义名称
@keyframes "name"
{
from{}
to{}
}
@keyframes "name"
{
0%{}
25%{}
50%{}
75%{}
100%{}
}
}
CSS_rules的更多相关文章
- jackson 的UnrecognizedPropertyException错误
阅读更多 前段时间,使用jackson封装了json字符串转换为javabean的方法,代码如下: public static <T> T renderJson2Object(String ...
随机推荐
- DFS,BFS 练习(深搜,广搜,图,leetcode)
https://leetcode-cn.com/problems/route-between-nodes-lcci/ 节点间通路.给定有向图,设计一个算法,找出两个节点之间是否存在一条路径. 示例1: ...
- 【题解】折纸 origami [SCOI2007] [P4468] [Bzoj1074]
[题解]折纸 origami [SCOI2007] [P4468] [Bzoj1074] 传送门:折纸 \(\text{origami [SCOI2007] [P4468]}\) \(\text{[B ...
- 最近有安装了一次hadoop集群,NameNode启动失败,及原因
最近有安装了一次hadoop集群,NameNode启动失败,查看日志,找到以下原因: 遇到的异常1: org.apache.hadoop.hdfs.server.common.Inconsistent ...
- eclipse 搭建连接 activemq
今天我特地写下笔记,希望可以完全掌握这个东西,也希望可以帮助到任何想对学习这个东西的同学. 1.下载activemq压缩包,并解压(如果需要下载请看文章尾部附录) 2.进入bin文件夹,(64位电脑就 ...
- 深入理解Java虚拟机(十)——线程安全与锁优化
什么是线程安全 当多个线程同时访问一个对象的时候,不需要考虑什么额外的操作就能获取正确的值,就是线程安全的. 线程安全的程度 1.不可变 不可变的对象一定是线程安全的,因为值始终只有一个. final ...
- 前端删除多条数据,如何将多个被删除项指定key传给后台
实际情景: 前端需要移除多个用户,这时需要根据每个用户id进行批量删除操作 前端操作: 1. 拿到所有被操作用户的信息存入数组, 例如 userlist = [user1, user2, user3] ...
- js常见正则表达式
常见正则匹配表达式 export let rege = { //验证URL isUrl: (val) => { if (val == null || val == "") r ...
- vue检查用户名是否重复
前端函数如下,js方法代码无需更改,前端代码逻辑在components\common\lab_header.vue 只需要修改components\axios_api\http.js中调用的后端地址 ...
- Docker(二):Docker镜像仓库Harbor搭建
安装docker-compose 因为docker-compose下载容易失败, 所以选择从github下载方式安装. [root@harbor ~]# mv docker-compose-Linux ...
- ORA-28017: The password file is in the legacy format
1.数据库升级后修改sys密码报错. 一般从oracle 从11G(11.2.0.4)升级到12C或者19C,修改SYS密码会有以下报错: ORA-28017: The password file i ...