CSS
文章平均质量分 90
CSS
文阿花
这个作者很懒,什么都没留下…
展开
-
CSS学习笔记目录
CSS学习笔记之基础教程(一)CSS学习笔记之基础教程(二)CSS学习笔记之中级教程(一)CSS学习笔记之中级教程(二)CSS学习笔记之中级教程(三)CSS学习笔记之高级教程(一)CSS学习笔记之高级教程(二)CSS学习笔记之高级教程(三)CSS学习笔记之高级教程(四)原创 2024-05-30 14:49:04 · 503 阅读 · 0 评论 -
CSS学习笔记之基础教程(一)
CSS选择器用于“查找”(或选取)要设置样式的HTML元素。我们可以将CSS选择器分为五类:(1)简单选择器(根据名称、id、类来选取元素)(2)组合器选择器(根据它们之间的特定关系来选取元素)(3)伪类选择器(根据特定状态选取元素)(4)伪元素选择器(选取元素的一部分并设置其样式)(5)属性选择器(根据属性或属性值来选取元素)原创 2024-05-07 17:55:32 · 491 阅读 · 0 评论 -
CSS学习笔记之基础教程(二)
上节内容CSS学习笔记之基础教程(一)6、边距6.1 外边距:margin6.1.1 外边距marginmargin-topmargin-leftmargin-bottommargin-right<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"原创 2024-05-07 15:48:13 · 380 阅读 · 0 评论 -
CSS学习笔记之中级教程(一)
1、CSS 布局 - display 属性1.1 display 属性display 属性是用于控制布局的最重要的 CSS 属性。display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。1.2 块级元素(block element)块级元素总是从新行开始,并占据可用的全部宽度(尽可能向左和向右伸展)。会占领页面的一行,其后多个block元素原创 2024-05-10 16:46:02 · 844 阅读 · 0 评论 -
CSS学习笔记之中级教程(二)
-.+CSS学习笔记之中级教程(一)6、CSS 布局 - display: inline-block与 display: inline 相比,主要区别在于 display: inline-block 允许在元素上设置宽度和高度。同样,如果设置了 display: inline-block,将保留上下外边距/内边距,而 display: inline 则不会。与 display: block 相比,主要区别在于 display:inline-block 在元素之后不添加换行符,因此该元素可原创 2024-05-15 15:20:42 · 372 阅读 · 0 评论 -
CSS学习笔记之中级教程(三)
14、CSS 下拉菜单14.1 示例1:普通弹窗思路:弹窗内容先隐藏display: none;,:hover时候修改弹窗部分的 display: block;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view原创 2024-05-16 15:32:56 · 326 阅读 · 0 评论 -
CSS学习笔记之高级教程(一)
1、圆角:border-radiusborder-radius 属性可以接受一到四个值。规则如下:四个值 - border-radius: 15px 50px 30px 5px;(依次分别用于:左上角、右上角、右下角、左下角)三个值 - border-radius: 15px 50px 30px;(第一个值用于左上角,第二个值用于右上角和左下角,第三个用于右下角)两个值 - border-radius: 15px 50px;(第一个值用于左上角和右下角,第二个值用于右上角和左下角)原创 2024-05-22 14:36:42 · 1029 阅读 · 0 评论 -
CSS学习笔记之高级教程(二)
10、CSS 3D 转换通过 CSS transform 属性,您可以使用以下 3D 转换方法:rotateX()rotateY()rotateZ()10.1 rotateX() 方法(使元素绕其 X 轴旋转给定角度)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="原创 2024-05-23 16:47:17 · 760 阅读 · 0 评论 -
CSS学习笔记之高级教程(三)
14、CSS 图像样式14.1 圆角图像:border-radius .img01 { width: 200px; height: auto; /* 四个角一致的圆角 */ border-radius: 10px; }14.2 圆形 .img02 { width: 200px; height: auto; /* 圆形 */ border-radius: 50%; }14.3原创 2024-05-28 15:14:24 · 754 阅读 · 0 评论 -
CSS学习笔记之高级教程(五)
23、CSS 媒体查询 - 实例/* 如果屏幕尺寸超过 600 像素,把 <div> 的字体大小设置为 80 像素 */@media screen and (min-width: 600px) { div.example { font-size: 80px; }}/* 如果屏幕大小为 600px 或更小,把 <div> 的字体大小设置为 30px */@media screen and (max-width: 600px) { div.example原创 2024-06-03 15:13:02 · 589 阅读 · 0 评论 -
CSS学习笔记之高级教程(四)
19、CSS 用户界面19.1 CSS 调整大小:resizeresize 属性规定元素是否应(以及如何)被用户调整大小。resize: horizontal;水平方向可改变大小resize: vertical;垂直方向可改变大小resize: both;水平+垂直方向都可改变大小20、CSS 变量:var()函数var() 函数用于插入 CSS 变量的值。var() 函数的语法如下:var(name, value),变量名称必须以两个破折号(--)开头,且区分大小写!20.1 C原创 2024-05-30 14:20:37 · 819 阅读 · 0 评论