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{}

in-line block

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的更多相关文章

  1. jackson 的UnrecognizedPropertyException错误

    阅读更多 前段时间,使用jackson封装了json字符串转换为javabean的方法,代码如下: public static <T> T renderJson2Object(String ...

随机推荐

  1. DFS,BFS 练习(深搜,广搜,图,leetcode)

    https://leetcode-cn.com/problems/route-between-nodes-lcci/ 节点间通路.给定有向图,设计一个算法,找出两个节点之间是否存在一条路径. 示例1: ...

  2. 【题解】折纸 origami [SCOI2007] [P4468] [Bzoj1074]

    [题解]折纸 origami [SCOI2007] [P4468] [Bzoj1074] 传送门:折纸 \(\text{origami [SCOI2007] [P4468]}\) \(\text{[B ...

  3. 最近有安装了一次hadoop集群,NameNode启动失败,及原因

    最近有安装了一次hadoop集群,NameNode启动失败,查看日志,找到以下原因: 遇到的异常1: org.apache.hadoop.hdfs.server.common.Inconsistent ...

  4. eclipse 搭建连接 activemq

    今天我特地写下笔记,希望可以完全掌握这个东西,也希望可以帮助到任何想对学习这个东西的同学. 1.下载activemq压缩包,并解压(如果需要下载请看文章尾部附录) 2.进入bin文件夹,(64位电脑就 ...

  5. 深入理解Java虚拟机(十)——线程安全与锁优化

    什么是线程安全 当多个线程同时访问一个对象的时候,不需要考虑什么额外的操作就能获取正确的值,就是线程安全的. 线程安全的程度 1.不可变 不可变的对象一定是线程安全的,因为值始终只有一个. final ...

  6. 前端删除多条数据,如何将多个被删除项指定key传给后台

    实际情景: 前端需要移除多个用户,这时需要根据每个用户id进行批量删除操作 前端操作: 1. 拿到所有被操作用户的信息存入数组, 例如 userlist = [user1, user2, user3] ...

  7. js常见正则表达式

    常见正则匹配表达式 export let rege = { //验证URL isUrl: (val) => { if (val == null || val == "") r ...

  8. vue检查用户名是否重复

    前端函数如下,js方法代码无需更改,前端代码逻辑在components\common\lab_header.vue 只需要修改components\axios_api\http.js中调用的后端地址 ...

  9. Docker(二):Docker镜像仓库Harbor搭建

    安装docker-compose 因为docker-compose下载容易失败, 所以选择从github下载方式安装. [root@harbor ~]# mv docker-compose-Linux ...

  10. 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 ...