华丽CSS魔法：打造绚丽扑克牌风格的网页设计！

类选择器

类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件。

ID 选择器

ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。它能选中设定了id的元素，你可以在 ID 前面加上类型选择器，只指向元素和 ID 都匹配的类。

     p{color: royalblue;}.a{color: greenyellow;}

css选择器
优先级：id选择器>class选择器>元素选择器
后代子代交集并集
属性选择器
伪类选择器
文本1
文本2
文本3
文本4
这是一个div

属性选择器

从 HTML 的学习中，你已经知道，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS 中，你能用属性选择器来选中带有特定属性的元素。

input{width: 200px;height: 35px;outline: none;border: 2px solid yellowgreen;border-radius: 5px;font-size: large;}input[name='bb']{color: rebeccapurple;}

属性选择器

什么是伪类？

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

button{width: 120px;height: 40px;border: none;background-color: royalblue;border-radius: 8px;font-size: large;color: seashell;cursor: pointer;}/* 鼠标放上去，有个阴影 */button:hover{box-shadow: 10px 10px 10px rebeccapurple;}/* 鼠标点击，动一动 */button:active{transform: translate(5px,5px);}

伪元素选择器
按钮

关系选择器

我们要了解的最后一种选择器被命名为关系选择器（Combinator），这是因为它们在其他选择器之间和其他选择器与文档内容的位置之间建立了一种有用的关系的缘故。

    /* 子代 */p>span{color:blueviolet;}/* 后代 */div span{color: green;}/* 交集 为了缩小选中范围 */p.a{color: red;}/* 并集 为了扩大选中范围 */p,.a{color: yellow;}

CSS 布局

此刻，我们已经看过 CSS 的基础知识，如何设置文本的样式，以及如何设置和操作内容所在的框。现在是时候看看如何把你的盒子放在与视口相关的正确位置上。我们已经涵盖了必要的先决条件，所以我们现在可以深入到 CSS 布局，查看不同的显示设置，涉及浮动和定位的传统布局方法，以及像 flexbox 这样的现代布局工具。

div{width: 300px;height: 300px;/* border: 1px solid rebeccapurple; *//* float: left;浮动 *//* 子元素绝对定位 父元素相对定位所有子元素默认的初始位置在左上顶点通过left和top控制x和y轴距离 */}

.fu{width: 300px;height: 300px;position: relative;/* border: 1px solid red; */}.z1,.z2,.z3,.z4{position: absolute;}

技术细节

css动画演示：

作业：太极动态演绎

作业：不同花色扑克牌

运行效果：

小结

本节课通过学习对css核心的学习，加上扑克牌和太极，css动画演绎小游戏的设计，基本熟悉了css样式和布局的控制。今日的学习受益匪浅，脚踏实地走好每一步。希望我的学习笔记能帮助到你们，欢迎批评指正！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！