博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
狂神说Java CSS3讲解综合代码
阅读量:4288 次
发布时间:2019-05-27

本文共 2794 字,大约阅读时间需要 9 分钟。

狂神说Java CSS3讲解综合代码

    
狂神说CSS3学习总结

狂神说java系列,CSS3的学习

三大基本选择器

三大基本选择器,标签选择器demo---style样式测试----font属性顺序--可以按顺序设置如下属性

三大基本选择器,calss选择器的demo-----id选择器>类选择器>标签选择器

三大基本选择器,id选择器的demo-------id选择器>类选择器>标签选择器

三大基本选择器的优先级:id选择器>类选择器>标签选择器

link和导入的生效的优先级------css样式生效的优先级是:就近原则 1.link属于HTML标签,而@import是CSS提供的一种方式

2.@import有次数限制,只能引入31次
3.当页面被加载时,link引用的CSS会同时被加载,而@import引用的CSS则是等待主页面全部被加载完后才会被加载,所以当网速较慢时,可能会只出现页面而没有样式,等一段时间后样式才会被加载出来
4.@import 只能在IE5以上才能使用,否则不识别,而link则没有这个问题
5.当使用javascript控制DOM(document.styleSheets)去改变样式时,只能使用link,DOM不能控制@import

高级选择器
1、相邻兄弟选择器(匹配指定元素的相邻【下一个】兄弟元素)
2、通用兄弟选择器(匹配到某元素【后面的】 【所有指定】兄弟元素)
3、属性选择器 (属性选择器可以根据元素的属性及属性值来选择元素。)
4、CSS 后代选择器(后代选择器可以选择作为某元素后代的元素。)
5、CSS 子元素选择器(子元素选择器(Child selectors)只能选择作为某元素子元素的元素。)
6、结构伪类选择器

1、:first-child 选择元素中的第一个子元素。

2、:nth-child(n) 定位某个父元素的一个或多个特定的子元素。其中 n 是其参数。n 取值如下:

属性选择器练习,八个方块填色

1
2
3
4
5
6
7
8

文本样式练习

该文本使用某些文本格式属性来设置样式。标题使用 text-align、text-transform 和 color 属性。段落缩进、对齐,并指定了字符间距。然后从这个彩色的“亲自试一试”链接中删除了下划线。text-indent 属性用于指定文本第一行的缩进。letter-spacing 属性用于指定文本中字符之间的间距。

图片和字体对齐

天海佑希 1985年以第一名成绩考入宝冢音乐学校,1987年毕业后加入宝冢歌剧团。

列表

图片背景--垂直排列

渐变

渐变背景

盒子模型

会员登录

用户名:
密码:

浮动1

浮动2

浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

定位(相对、绝对、固定)

relative相对定位元素的定位是相对其正常位置。

position: sticky; 基于用户的滚动位置来定位

方块定位练习

```

转载地址:http://vxtgi.baihongyu.com/

你可能感兴趣的文章
SpringBoot2.0 基础案例(12):基于转账案例,演示事务管理操作
查看>>
高性能负载均衡:nginx搭建tomcat集群
查看>>
Spring切面中的正则表达式
查看>>
一直再说高并发,多少QPS才算高并发?
查看>>
Git恢复之前版本的两种方法reset、revert(图文详解)
查看>>
Maven打包的三种方式
查看>>
电商场景:并发扣库存,怎么保证不超卖又不影响并发性能
查看>>
分布式事务处理方式总结
查看>>
延迟队列有哪些实现方案?说说你的看法
查看>>
厉害了!我们老大半小时把我的springboot项目并发提升几倍
查看>>
Spring 中Bean 的生命周期
查看>>
为什么要用枚举实现单例模式(避免反射、序列化问题)
查看>>
微服务架构下的分布式限流方案思考
查看>>
全网最详细的一篇SpringCloud总结
查看>>
消息中间件中的有序消息,其实是排队但是不能插队
查看>>
不知道分布式事务,还想进互联网大厂
查看>>
mysql为什么使用B+树作为索引的结构
查看>>
mysql索引总结(1)-mysql 索引类型以及创建(文章写的不错!!!)
查看>>
聊聊CAS - 面试官最喜欢问的并发编程专题
查看>>
Spring Boot 中使用一个注解轻松将 List 转换为 Excel 下载
查看>>