CSS基础必备知识点05
2024-05-11 23:47:20
CSS3
1. css3与css2之间的区别
css3 = css2 + 新语法 + 新属性，就是对css2的扩充、删减和优化。
2. 结构伪类
| 选择器 | 功能 |
|---|---|
| E:first-child | 匹配第一个孩子 |
| E:last-child | 匹配最后一个孩子 |
| E:nth-child(n) | 匹配第n个孩子 |
| E:nth-child(2n) | 匹配偶数的孩子，如2、4、6… |
| E:nth-child(even) | 匹配偶数的孩子，如2、4、6… |
| E:nth-child(2n+1) | 匹配奇数的孩子，如1、3、5… |
| E:nth-child(odd) | 匹配奇数的孩子，如1、3、5… |
| E:only-child | 匹配有且只有一个孩子 |
举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>结构伪类</title><style type="text/css">/*使用css3中的结构伪类选择器来匹配元素*//*匹配第一个孩子的语法格式：E:first-child{属性:值;}*/.box ul li:first-child{color: #f00;width: 100px;height: 30px;line-height: 30px;border: 1px solid #000;}/*匹配最后一个孩子的语法格式： E:last-child{属性:值;}*/.box ul li:last-child{color: #0f0;width: 100px;height: 30px;line-height: 30px;border: 2px dashed grey;}/*匹配第n个孩子的语法格式： E:last-child(n){属性:值;}*/.box ul li:nth-child(2){color: pink;width: 100px;height: 30px;line-height: 30px;border: 2px dotted rgb(160, 207, 31);}/*匹配偶数孩子的语法格式： E:last-child(even){属性:值;}或者E:last-child(2n){属性:值;}*/.box ul li:nth-child(2n){color: rgb(33, 35, 199);background-color: pink;width: 100px;}/*匹配偶数孩子的语法格式： E:last-child(odd){属性:值;}或者E:last-child(2n+1){属性:值;}*/.box ul li:nth-child(odd){color: gold;background-color: skyblue;width: 100px;}/*匹配有且只有一个孩子*/div ul li:only-child{color: rgb(255, 153, 0);}</style>
</head>
<body><div class="box"><ul><li>黑马程序员1</li><li>黑马程序员2</li><li>黑马程序员3</li><li>黑马程序员4</li><li>黑马程序员5</li><li>黑马程序员6</li><li>黑马程序员7</li><li>黑马程序员8</li><li>黑马程序员9</li><li>黑马程序员10</li></ul></div><div><ul><li>只有一个</li></ul></div>
</body>
</html>
案例：使用CSS3中的结构伪类选择器实现隔行变色的表格。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>使用CSS3实现隔行变色的表格</title><style type="text/css">table tr:nth-child(even){background-color: #f00;}table tr:nth-child(odd){background-color: #00f;}table tr:hover{background-color: #ccc;}</style>
</head>
<body><table width="500px" border="1px" align="center"><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table>
</body>
</html>
3. border-collapse
- 这个属性主要是用来合并表格的边框线，其值为：collapse
- border-collapse:collapse;
- 如下例子当中表格的边框线就会变得很细
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>合并表格的边框线</title><style type="text/css">table{border-collapse: collapse;border-color: #f00;}</style></head><body><table width="600" border="1"><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table></body></html>
4. 伪元素
| 选择器 | 功能 |
|---|---|
| :first-letter | 操作当前元素中的第一个字 |
| :first-line | 操作当前元素中的第一行 |
| ::before | 在之前插入，在一个盒子内部的最前面 |
| ::after | 在之后插入，在一个盒子内部的最后面 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪元素</title><style type="text/css">.box{width: 40%;margin: 100px auto;font-size: 14px;border: 1px solid #444;color: #333;}.box::before{/*要在当前元素的最前面插入文字，必须将文字放在content中*/content:"黑马程序员";}.box:first-letter{/*操作当前元素中的第一个字*/color: rgb(143, 36, 36);font-size: 40px;padding: 20px;}.box:first-line{color: rgb(179, 19, 171);}.box::after{content:"hello";}</style>
</head>
<body><div class="box">故事是从一个叫做张小凡的普通少年开始的。故事是从一个叫做张小凡的普通少年开始的。故事是从一个叫做张小凡的普通少年开始的。故事是从一个叫做张小凡的普通少年开始的。故事是从一个叫做张小凡的普通少年开始的。故事是从一个叫做张小凡的普通少年开始的。</div>
</body>
</html>
5. 文本阴影
- text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色
- 注释：text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选颜色值进行规定。省略长度是0.
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
- 补充：
- 文字阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边
- 水平阴影正值阴影在下边，负值在上边
- 模糊强度，值越大越模糊
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>文本阴影</title><style type="text/css">.box{font-size: 40px;font-family: "楷体";color: rgb(187, 57, 57);/*给文本设置阴影text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色*/text-shadow: 3px 3px 3px rgb(111, 193, 231);}</style></head><body><div class="box">黑马程序员</div></body></html>设置两组阴影：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>文本阴影</title><style type="text/css">.box{font-size: 40px;font-family: "楷体";color: rgb(187, 57, 57);/*给文本设置阴影text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色*/text-shadow: 3px 3px 3px rgb(111, 193, 231);}.b2{font-size: 50px;font-family: "隶书";color: rgb(211, 132, 28);text-shadow: 4px 2px 2px rgb(41, 212, 18),-4px -4px 3px rgb(241, 62, 131);}</style></head><body><div class="box">黑马程序员</div><div class="b2">传智播客</div></body></html>
6. 盒子阴影
- box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
- 注意：水平阴影和垂直阴影是必须写的，其他的可以省略不写
- 语法： box-shadow:h-shadow vishadow blur spread color inset/outset(默认值);
- 注释：box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选颜色值以及可选的inset关键词来规定。省略长度的值是0.
- 盒子阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边
- 垂直阴影正值在下边，负值在上边
- 模糊尺寸，值越大越模糊
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子阴影</title><style type="text/css">.box{width: 100px;height: 100px;border: 1px solid #000;/*给这盒子设置阴影*/box-shadow: 3px 3px 3px 3px #f00,-4px -4px 2px 2px #0f0 inset;}</style></head><body><div class="box"></div></body></html> - 给图片设置阴影
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>给图片设置阴影</title><style type="text/css">img{box-shadow: 4px 4px 4px 2px #FFA07A;}</style> </head> <body><img src="./img/liyifeng.jpeg" alt=""> </body> </html>
7. 圆角矩形
border-radius:左上 右上 右下 左下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圆角矩形</title><style type="text/css">div{width: 100px;height: 100px;border: 1px solid #f00;}/*使用结构伪类选择器来匹配元素*/div:nth-child(1){/*border-radius:左上 右上 右下 左下;*/border-radius: 10px 20px 30px 40px;margin-bottom: 20px;}div:nth-child(2){border-radius: 20px;margin-bottom: 20px;}div:nth-child(3){/*实现圆形第一步：当前元素的高度与宽度要相同，也就是这个元素是一个正方形第二步：border-radius属性值为宽高的一半*/border-radius: 50px;background-color: #ccc;}div:nth-child(4){/*实现椭圆*/width: 100px;height: 40px;border-radius: 20px; /*该值为高度的一半*/background-color: #ccc;}div:nth-child(5){/*实心的上半圆：：高度要等于宽度的一半*/width: 100px;height: 50px;border-radius: 50px 50px 0px 0px;/*左上与右上值等于高度*/background-color: #9da;}div:nth-child(6){/*实心的左半圆：：宽度要等于高度的一半*/width: 50px;height: 100px;border-radius: 50px 0px 0px 50px;/*左上与左下值等于高度*/background-color: rgb(54, 165, 165);}</style>
</head>
<body><div></div><div></div><div></div><div></div><div></div><div></div>
</body>
</html>
8.圆角矩形案例
实现淘宝网上的椭圆形的“更多”超链接按钮。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圆角矩形案例</title><style type="text/css">body{background-color: #ccc;}.more{width: 60px;height: 30px;background-color: white;text-align: center;line-height: 30px;margin: 100px auto;/*圆角矩形中的椭圆*/border-radius: 10px;font-size: 13px;font-family: '微软雅黑';}/*先把a标签转换成块元素再进行超级链接的修饰*/a{display: block;width: 60px;height: 30px;border-radius: 10px;}a:link,a:visited{color: #000;text-decoration: none;}div a:hover{background-color: #f78923;color: #fff;}</style>
</head>
<body><div class="more"><a href="#">更多</a></div>
</body>
</html>
圆角图片的实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圆形图片</title><style type="text/css">img{width: 300px;height: 200px;border-radius: 100px;}</style>
</head>
<body><img src="./img/th.jpg" alt="">
</body>
</html>
9.透明度
- 只要有颜色，都可以实现透明度。
- rgba(红,绿,蓝,透明度)
- a：表示透明度，取值范围是0-1，0表示完全透明，1表示不透明
- 背景颜色透明度：background-color:rgba(255,255,255,0.3);
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>背景颜色透明度</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 100px;height: 100px;background-color: rgba(255,0,0,0.3);position: fixed;}</style></head><body><div class="box"></div><p>Git 更像是把数据看作是对小型文件系统的一组快照。 每次你提交更新，或在 Git 中保存项目状态时，它主要对当时的全部文件制作一个快照并保存这个快照的索引。 为了高效，如果文件没有修改，Git不再重新存储该文件，而是只保留一个链接指向之前存储的文件。 Git 对待数据更像是一个快照流。</p></body></html> - 文本颜色透明度:color:rgba(255,0,0,0.3);
- 边框颜色透明度：border:1px solid rgba(255,255,255,0.5);
CSS基础必备知识点05相关推荐
- CSS基础必备知识点01
CSS基础必备知识点 CSS(Cascading Style Sheme), 层叠样式表或级联样式表,简称样式表.它的作用是给HTML网页设置外观或者样式.其中外观或者样式指的是:HTML网页中的文字 ...
- CSS基础必备知识点03
1.标准文档流 什么是标准文档流? 制作HTML网页和PS画图软件画图有本质上的区别:HTML网页在制作的时候都遵循一个"流"的规则:从左到右.从上到下:使用PS软件画图时,我们想 ...
- CSS基础必备知识点04
1.display属性 display,显示,用来进行行内元素与块级元素之间的相互转换.将隐藏的元素显示或者将显示的元素进行隐藏. display这个属性取值有:inline(行内).block(块级 ...
- CSS基础必备盒模型及清除浮动
盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...
- Python学习基础必备知识点：字典dict详解
取键值 1.Python 字典 setdefault() 方法和 get() 方法类似,返回指定键的值,如果键不在字典中,将会添加键并将值设置为一个指定值,默认为None. get() 和 setde ...
- html语言熟记,html基础必备知识点
超文本标记语言,主要是通过HTML标签对网页中的文本,图片,声音等内容的描述. (1) 双标签 内容 标签名> (2) 单标签 ,也称为空标签,指的是一个标签号即可完整描述某个功能 单标签数量很 ...
- 前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理 文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
- 前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持 特点 设置opacity的元素的所有后代会一起具 ...
- 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...
最新文章
- kettle 将job等导入导出成xml
- hdu1715(Java)大数相加
- react-native 使用 antd-mobile-rn UI进行开发app
- 以太坊源码分析——BlockChain
- 在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用
- 一步步创建ABAP post exit增强
- disable path length limit_通过Antsword看绕过disable_functions
- android美颜功能吗,Android美颜sdk接入之前需要知道这些知识吗
- 自然语言处理——语言模型(二)
- JavaScipt屏蔽浏览器右上角“最小化,最大化,关闭”
- 校验json格式_接口的登录状态校验以及JWT
- Labview软件的特点
- 了解BigBoss之如何添加BigBoss的Cydia源地址
- php给页面加背景图片,html怎么添加背景图片且让图片平铺整个页面？（代码示例）...
- 百胜图Barsetto智能胶囊咖啡机测评 始于颜值忠于便捷
- 示例-Luat示例-HTTP
- 极飞P20植保无人机测评
- 开源新手引导框架，支持TypeScript
- Java-断点续传(分片上传)
- MyCat是什么？为什么要用MyCat？