From 91e34d8dada7e7c1b3aae56d899ae16a6e136319 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 9 Oct 2024 11:38:15 +0800 Subject: [PATCH 1/2] 1009 --- ...67\345\274\217\346\270\220\345\217\230.md" | 79 +++++++++++++++++++ ...20\345\217\230\344\275\234\344\270\232.md" | 68 ++++++++++++++++ 2 files changed, 147 insertions(+) create mode 100644 "\351\202\271\346\260\270\346\266\233/giteenote/20241009-html\347\232\204css\347\232\204\350\203\214\346\231\257\346\240\267\345\274\217\346\270\220\345\217\230.md" create mode 100644 "\351\202\271\346\260\270\346\266\233/homework/20241009-css\350\203\214\346\231\257\346\270\220\345\217\230\344\275\234\344\270\232.md" diff --git "a/\351\202\271\346\260\270\346\266\233/giteenote/20241009-html\347\232\204css\347\232\204\350\203\214\346\231\257\346\240\267\345\274\217\346\270\220\345\217\230.md" "b/\351\202\271\346\260\270\346\266\233/giteenote/20241009-html\347\232\204css\347\232\204\350\203\214\346\231\257\346\240\267\345\274\217\346\270\220\345\217\230.md" new file mode 100644 index 00000000..919f58b2 --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/giteenote/20241009-html\347\232\204css\347\232\204\350\203\214\346\231\257\346\240\267\345\274\217\346\270\220\345\217\230.md" @@ -0,0 +1,79 @@ +# 渐变 ++CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 + +以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 + +CSS3 定义了两种类型的渐变（gradients）： + + + 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 + + 径向渐变（Radial Gradients）- 由它们的中心定义 + +语法 +``` +background-image: linear-gradient(direction, color-stop1, color-stop2, ...); +``` + +## 用角度 +如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。 + +语法 +``` +background-image: linear-gradient(angle, color-stop1, color-stop2); +``` +角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。 + + + +但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。 + + +带有指定的角度的线性渐变： +``` + background-image: linear-gradient(-90deg, red, yellow); +``` + +## 使用多个颜色节点 +``` + + background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); + +``` + +## 使用透明度（transparent） +CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。 + +为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。 + +下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色： +从左到右的线性渐变，带有透明度： + +``` + background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); +``` + +## 重复的线性渐变 +repeating-linear-gradient() 函数用于重复线性渐变： + +``` + background-image: repeating-linear-gradient(red, yellow 10%, green 20%); +``` + +## CSS3 径向渐变 +径向渐变由它的中心定义。 + +为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。 +同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）， +渐变的大小是 farthest-corner（表示到最远的角落）。 +``` +background-image: radial-gradient(shape size at position, start-color, ..., last-color); +``` + +## 设置形状 +shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。 + +形状为圆形的径向渐变： + + +``` + background-image: radial-gradient(circle, red, yellow, green); + ``` diff --git "a/\351\202\271\346\260\270\346\266\233/homework/20241009-css\350\203\214\346\231\257\346\270\220\345\217\230\344\275\234\344\270\232.md" "b/\351\202\271\346\260\270\346\266\233/homework/20241009-css\350\203\214\346\231\257\346\270\220\345\217\230\344\275\234\344\270\232.md" new file mode 100644 index 00000000..dc551335 --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/homework/20241009-css\350\203\214\346\231\257\346\270\220\345\217\230\344\275\234\344\270\232.md" @@ -0,0 +1,68 @@ +``` + + + + + + Document + + + +
+
+
+

中华人民共和国

+
+
+
+
+
+
+ + +``` \ No newline at end of file -- Gitee From dd16b2a1a2229db525fd344061fed5b3b549d123 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 12 Oct 2024 17:31:16 +0800 Subject: [PATCH 2/2] 10 12 --- ...50\345\222\214\344\274\252\347\261\273.md" | 91 +++++++ ...51\345\231\250\344\275\234\344\270\232.md" | 245 ++++++++++++++++++ 2 files changed, 336 insertions(+) create mode 100644 "\351\202\271\346\260\270\346\266\233/giteenote/20241012-css\347\232\204\351\200\211\346\213\251\345\231\250\345\222\214\344\274\252\347\261\273.md" create mode 100644 "\351\202\271\346\260\270\346\266\233/homework/20241012-css\351\200\211\346\213\251\345\231\250\344\275\234\344\270\232.md" diff --git "a/\351\202\271\346\260\270\346\266\233/giteenote/20241012-css\347\232\204\351\200\211\346\213\251\345\231\250\345\222\214\344\274\252\347\261\273.md" "b/\351\202\271\346\260\270\346\266\233/giteenote/20241012-css\347\232\204\351\200\211\346\213\251\345\231\250\345\222\214\344\274\252\347\261\273.md" new file mode 100644 index 00000000..82864ac5 --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/giteenote/20241012-css\347\232\204\351\200\211\346\213\251\345\231\250\345\222\214\344\274\252\347\261\273.md" @@ -0,0 +1,91 @@ + +## CSS基础选择器 +### 标签选择器（元素选择器） +标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下： + +标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 +元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } + +标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。 + +标签选择器 可以把某一类标签全部选择出来 div span + + + +### 类选择器 +类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语 + +法格式如下： + +.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } + +标签调用的时候用 class=“类名” 即可。 + +类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 + +小技巧： + +1.长名称或词组可以使用中横线来为选择器命名。 +2.不建议使用“_”下划线来命名CSS选择器。 + +​ 输入的时候少按一个shift键;　浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)　能良好区分JavaScript变量命名(JS变量命名是用“_”) + +3.不要纯数字、中文等命名， 尽量使用英文字母来表示。 + +命名规范： 见附件（Web前端开发规范手册.doc） + +命名是我们通俗约定的，但是没有规定必须用这些常用的命名。 + +多类名选择器 +我们可以给标签指定多个类名，从而达到更多的选择目的。 + + + +注意： + +1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。 +2. 各个类名中间用空格隔开。 + +多类名选择器在后期布局比较复杂的情况下，还是较多使用的。 +``` +
亚瑟
+
刘备
+
安其拉
+
貂蝉
+``` +### id选择器 +id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下： + + +#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } + +该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。 + +用法基本和类选择器相同。 + +id选择器和类选择器区别 +W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。 + +类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜 + +id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。 + +id选择器和类选择器最大的不同在于 使用次数上。 + +通配符选择器 +通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下： + + + + + + + +* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } + +例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。 + +* { + margin: 0; /* 定义外边距*/ + padding: 0; /* 定义内边距*/ +} \ No newline at end of file diff --git "a/\351\202\271\346\260\270\346\266\233/homework/20241012-css\351\200\211\346\213\251\345\231\250\344\275\234\344\270\232.md" "b/\351\202\271\346\260\270\346\266\233/homework/20241012-css\351\200\211\346\213\251\345\231\250\344\275\234\344\270\232.md" new file mode 100644 index 00000000..124b3f05 --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/homework/20241012-css\351\200\211\346\213\251\345\231\250\344\275\234\344\270\232.md" @@ -0,0 +1,245 @@ + +## 联系 +``` + + + + + + Document + + + +
+ + +
+ +
+ + + +
+ + + +
+ + + +
+ +
+ + + + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + + + + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + + + + + + +
+ +
+ + + + + + + + +
+ + + + +``` +## 真实项目联系 +``` + + + + + + + Document + + + + +
+
+

Welcome

+

This is the introduction section.

+
+
+

Post Title

+

Post content...

+
    +
  • Item 1
    • +
  • Item 2
    • +
+
+ +
+ + + + +``` \ No newline at end of file -- Gitee