CSS_Note

最新推荐文章于 2024-07-09 15:49:17 发布
最新推荐文章于 2024-07-09 15:49:17 发布
阅读量840 收藏 19
点赞数 26
分类专栏： Web技术 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46094523/article/details/136620697
版权

说明：CSS学习笔记，学习来源：MDN Web Docs、菜鸟教程、黑马程序员、B站峰华前端工程师
持续更新中…
CSS学习思维导图：
在这里插入图片描述

基础

简介

  1. CSS ，层叠样式表 ( Cascading Style Sheets ) 的简称；有时我们也会称之为 CSS 样式表或级联样式表；
  2. CSS 是一种标记语言；
  3. CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

语法

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
在这里插入图片描述

  1. 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
  2. 属性和属性值以“键值对”的形式出现
  3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  4. 属性和属性值之间用英文“:”分开
  5. 多个“键值对”之间用英文“;”进行区分

工作机制

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

  1. 浏览器载入 HTML 文件（比如从网络上获取）。
  2. 将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式。
  3. 接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。
  4. 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
  5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
  6. 网页展示在屏幕上（这一步被称为着色）。

图示：
在这里插入图片描述

引入方式

按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

行内式

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式。

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
  1. style 其实就是标签的属性，在双引号中间，写法要符合 CSS 规范
  2. 可以控制当前的标签设置样式
  3. 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
  4. 使用行内样式表设定 CSS，通常也被称为行内式引入

嵌入式

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: blanchedalmond;
        }
    </style>
</head>
<body>
    <p>Hello World</p>
</body>
</html>
  1. <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
  2. 通过此种方式，可以方便控制当前整个页面中的元素样式设置
  3. 代码结构清晰，但是并没有实现结构与样式完全分离

链接式

实际开发都是外部样式表. 适合于样式比较多的情况；样式单独写到CSS文件中，之后把CSS文件引入到 HTML 页面中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <p>Hello World</p>
</body>
</html>

小结：

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高结构样式混写较少控制一个标签
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面
外部样式表完全实现结构和样式相分离需要引入推荐控制多个页面

值和单位

当涉及到 CSS 的值和单位时，它们用于表示属性的具体数值和测量单位。CSS 中的值和单位可以用于控制元素的尺寸、位置、颜色、动画等方面。下面是一些常见的值和单位：

  1. 值：
    • 数字值：表示无单位的数值，如 10、0.5 等。这些数字可以用于表示长度、宽度、透明度等。
    • 百分比值：表示相对于父元素或参考值的百分比，如 50%、25% 等。这些值常用于定义相对尺寸和位置。
    • 关键字值：表示预定义的关键字，如 auto、none、initial、inherit 等。这些关键字用于设置特定的属性值或重置属性为初始值或继承值。
    • 颜色值：表示颜色的值，可以使用颜色名称、十六进制值、RGB 值、RGBA 值、HSL 值、HSLA 值等形式表示。
  2. 单位：
    • 长度单位：用于表示长度的单位，如 px（像素）、em（相对于父元素的字体大小）、rem（相对于根元素的字体大小）、%（相对于父元素的百分比）、vh（视口高度的百分比）等。
    • 角度单位：用于表示角度的单位，如 deg（度数）、rad（弧度）、turn（圆周）等。
    • 时间单位：用于表示时间的单位，如 s（秒）、ms（毫秒）等。
    • 频率单位：用于表示频率的单位，如 Hz（赫兹）、kHz（千赫兹）等。
    • 百分比单位：用于表示相对于某个值的百分比，如 %（相对于父元素的百分比）。

值和单位的组合可以用于各种 CSS 属性，如尺寸（width、height）、位置（top、left）、边框（border-width）、颜色（color、background-color）、动画（animation-duration）等。根据属性的不同，可以接受不同类型的值和单位。

在使用值和单位时，需要考虑布局需求、浏览器兼容性以及响应式设计等因素，以确保样式在不同环境和设备上都有良好的表现。

显示模式

概念： CSS 的显示模式（display mode），它用于控制元素在文档流中的布局方式和行为。CSS 提供了多个显示模式，每个模式都有不同的特性和用途。

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

分类：
block：
块级元素（block-level elements）以块的形式显示，它们会在页面中单独占据一行，并且默认情况下会在上下方向上堆叠。常见的块级元素包括 <div>、<p>、<h1> 到 <h6> 等。块级元素可以设置宽度、高度、内边距（padding）和外边距（margin）等属性。

inline：
行内元素（inline elements）以行内的方式显示，它们不会独占一行，而是在同一行上尽可能多地排列。常见的行内元素包括 <span>、<a>、<strong>、<em> 等。行内元素的宽度由内容决定，无法设置宽度和高度，但可以设置水平方向上的内边距和外边距。

inline-block：
行内块元素（inline-block elements）结合了行内元素和块级元素的特性，可以像行内元素一样在同一行上排列，同时可以设置宽度、高度、内边距和外边距等属性。常见的使用场景是创建多个并排的盒子或按钮。

none：
元素的显示被完全移除，元素不会在页面中占据空间，也不会显示。这种显示模式常用于通过 JavaScript 动态控制元素的显示和隐藏。

flex：
弹性盒子布局（flexbox layout）是一种灵活的布局模型，可以在一维或二维空间中对元素进行排列和对齐。使用 display: flex 将容器元素变为弹性容器，子元素成为弹性项目，可以使用多个弹性属性来控制元素的布局和对齐方式。

grid：
网格布局（grid layout）是一种二维的布局模型，可以将容器划分为行和列，然后在这个网格中布局元素。使用 display: grid 将容器元素变为网格容器，可以使用多个网格属性来控制元素的布局和对齐方式。

选择器

选择器(选择符)就是根据不同需求把不同的标签选出来；简单来说，就是选择标签用的。

基础选择器

元素选择器

元素选择器是指用 HTML 标签名称作为选择器，按标签名称分类

label {
	attribute: value;
	attribute: value;
}
类选择器

选择文档中应用了这个类的所有物件

.ClassName {
	attribute: value;
	attribute: value;
}

<div class="ClassName"> 变红色 </div>

可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签

<div class="red font20">亚瑟</div>

注意：

  1. 在标签class 属性中可以写多个类名，多个类名中间必须用空格分开
  2. 这个标签就可以分别具有这些类名的样式
ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

#IDname {
	attribute: value;
	attribute: value;
}

注意：id 属性只能在每个 HTML 文档中出现一次

通配符选择器

选择所有标签

* {
	attribute: value;
	attribute: value;
}
并集

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

selector1,selector2{

}

关系选择器

后代

后代选择器用单个空格（" "）字符组合两个选择器
第二个选择器匹配的元素被选择，当他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。

selector1 selector2{

}
子代

子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。

selector1 > selector2 {

}
邻接兄弟

邻接兄弟选择器 + 用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。

selector1 + selector2 {

}

例如，选中所有紧随<p>元素之后的<img>元素：

p + img{

}
通用兄弟

如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）

selector1 ~ selector2 {

}

要选中所有的<p>元素后任何地方的<img>元素：

p ~ img{

}

属性选择器

你已经知道，元素可以带有属性，CSS 中，你能用属性选择器来选中带有特定属性的元素。

存否和值

这些选择器允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。

选择器示例描述
[attr]a[title]匹配带有一个名为_attr_的属性的元素——方括号里的值。
[attr=value]a[href="https://example.com"]匹配带有一个名为_attr_的属性的元素，其值正为_value_——引号中的字符串。
[attr~=value]p[class~="special"]匹配带有一个名为_attr_的属性的元素，其值正为_value_，或者匹配带有一个_attr_属性的元素，其值有一个或者更多，至少有一个和_value_匹配。

注意，在一列中的好几个值，是用空格隔开的。
[attr|=value]div[lang|="zh"]匹配带有一个名为_attr_的属性的元素，其值可正为_value_，或者开始为_value_，后面紧随着一个连字符。

注意：第四个没有反斜杠，为attr|=value；
示例：

 /* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
    color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
    color: red;
}
/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
section[class$=data] {
    color: blue;
}
子字符串匹配
选择器示例描述
[attr^=value]li[class^="box"]匹配带有一个名为_attr_的属性的元素，其值开头为_value_子字符串。
[attr$=value]li[class$="box"]匹配带有一个名为_attr_的属性的元素，其值结尾为_value_子字符串
[attr*=value]li[class*="box"]匹配带有一个名为_attr_的属性的元素，其值的字符串中的任何地方，至少出现了一次_value_子字符串。

如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。这个标记告诉浏览器，要以大小写不敏感的方式匹配 ASCII 字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML 中是大小写敏感的。

li[class^="a" i] {
    color: red;
}

伪类

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

:pseudo-class-name{

}
选择器描述
:link匹配未曾访问的链接。
:visited匹配已访问链接。
:hover当用户悬浮到一个元素之上的时候匹配。
:active在用户激活（例如点击）元素的时候匹配。
:focus当一个元素有焦点的时候匹配。
:blank匹配空输入值的input元素
:first-child匹配兄弟元素中的第一个元素。
:last-child匹配兄弟元素中最末的那个元素。

伪元素

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。

::pseudo-element-name{

}
选择器描述
::after匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before匹配出现在原有元素的实际内容之前的一个可样式化元素。

特性

层叠性

继承性

优先级

规范

初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化
简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）
每个网页都必须首先进行 CSS初始化。

这里我们以 京东CSS初始化代码为例。

Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

代码风格

样式格式书写

紧凑格式

h3 { color: deeppink;font-size: 20px;}

展开格式（推荐)

h3 {
	color: pink;
	font-size: 20px;    
}
样式大小写风格

小写格式（推荐）

h3 {
	color: pink;
}

大写格式

H3 {
	COLOR: PINK;
}
样式空格风格
h3 {
	color: pink;    
}

属性值前面，冒号后面，保留一个空格；选择器（标签）和大括号中间保留空格

属性书写顺序

建议遵循以下顺序：

  1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
 }

布局

盒子模型

概念

类型

注意点

标准流

浮动

定位

Flex

Grid

Multi-column

响应式

指南

字体

字体属性

字体系列

font-family属性定义文本的字体系列

p {
	font-family:'微软雅黑';
}
p {
    font-family: 'Courier New', Courier, monospace;
}
  1. 各种字体之间必须使用英文状态下的逗号隔开
  2. 一般情况下，如果有空格隔开的多个单词组成的字体，要加引号
  3. 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
大小

CSS 使用 font-size 属性定义字体大小。

p {
    font-size: 16px;
}
  1. px（像素）大小是我们网页的最常用的单位
  2. 谷歌浏览器默认的文字大小为16px
  3. 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  4. 可以给 body 指定整个页面文字的大小
粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p {
	font-weight: bold; 
}
属性值描述
normal默认值（不加粗）
bold定义粗体
100-900400等同于normal，而700等同于bold，注意这个数字后不跟单位
  1. 学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
  2. 实际开发时，我们更喜欢用数字表示粗细
样式

CSS 使用 font-style 属性设置文本的风格。

p {
	font-style: normal;
}
属性值描述
normal默认值，浏览器会显示标准的字体样式
italic浏览器会显示斜体的字体样式
综合写法
p {
	font: font-style  font-weight  font-size/line-height  font-family;
}
  1. 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开;
  2. 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

字体图标

文本

颜色

color 属性用于定义文本的颜色。

div { 
	color: red;
}
表示属性值
预定义的颜色值red.green.blue.pink等
十六进制#FF0000
RGB代码rgb(255，0，0)
注意：开发中最常用的是十六进制

对齐

text-align 属性用于设置元素内文本内容的水平对齐方式。

div { 
	text-align: center;
}
属性值描述
left左对齐（默认值）
right右对齐
center居中对齐

修饰

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

div { 
	text-decoration：underline;
}
属性值描述
none默认，没有下划线
underline下划线；a标签自带下划线
overline上划线。（几乎不用）
line-through删除线。（不常用）

缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

div { 
	text-indent：20px;
}

div { 
	text-indent：2em;
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

p { 
	line-height: 26px;
}

行高的文本分为：上间距+文本高度+下间距 = 行间距

单行文字垂直居中：让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

文本方向

形状

背景

通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

颜色

background-color 定义元素的背景颜色

background-color:颜色值;

元素背景颜色默认值是 transparent（透明）

background-color:transparent;

图片

background-image 定义元素的背景图片

background-image: none | url(url);
参数值作用
none无背景图（默认）
url使用绝对或相对地址指定背景图像

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

平铺

background-repeat 设置元素背景图像的平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值作用
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向上平铺

图片位置

background-position 属性可以改变图片在背景中的位置

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

参数值说明
length百分数；由浮点数字和单位标识符组成的长度值
positiontop、center、bottom、left、right方位名词

说明：
1、参数是方位名词：
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致 ​
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2、参数是精确单位：
如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3、参数是混合单位：
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

图片固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment: scroll | fixed
参数作用
scroll背景图像是随对象内容滚动
fixed背景图像固定

Tips：background-attachment 后期可以制作视差滚动的效果

半透明

CSS3 提供了背景颜色半透明的效果。

background: rgba(0,0,0,0.3);
  1. 最后一个参数是 alpha 透明度，取值范围在 0~1之间
  2. 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);

注意：

  • 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
  • CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

综合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top;

边框

阴影

透明度&模糊

用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

  1. 更改用户的鼠标样式
  2. 表单轮廓
  3. 防止表单域拖拽

鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

li {
	cursor: pointer;
}
属性值描述
default小白(默认)
pointer小手
move移动
text文本
not-allowed禁止

轮廓线

 input {
 	outline: none; 
 }

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

防止拖拽文本域

实际开发中，我们文本域右下角是不可以拖拽的。

 textarea{ 
 	resize: none;
 }

溢出

过渡

渐变

转换

动画

_Haibara_Ai
关注
专栏目录
selenium爬虫入门（2）CSS Selector
little_yueyue的博客
12-14 4240
contentsCSS selector根据 tag名、id、class 选择元素选择子元素和后代元素根据属性选择组选择根据次序选择兄弟关系选择验证 CSS Selector CSS selector HTML中经常要为某些元素指定显示效果，CSS就是浏览器用来选择元素，使其具有指定显示风格。只要CSS Selector的语法是正确的， Selenium就可以选择到该元素。 通过CSS Selector选择单个元素的方法是driver.find_element(By.CSS_SELECTOR, CSS Se
click事件修改css_CSS Click事件
culiao9310的博客
09-28 7480
click事件修改css For the last few years, we’ve been witnessing the wonderful expansion of front-end languages especially HTML with the HTML5 specifications and CSS with the CSS Level 3 specifi...
css_base_note
weixin_30326745的博客
02-17 67
转载于:https://www.cnblogs.com/guojbing/p/10391647.html
CSS note
u010669626的博客
03-11 1072
boarder 的设置white space 可以用来设置文字在一行，或自动换行，或每一个空格另起一行width： 可以设置省 100%， 或 35 rpx元素靠左p:first-child 满足条件的第一项eg。
html个人简介css_HTML和CSS简介
weixin_26737625的博客
09-09 2796
html个人简介cssA beginners guide to web development Web开发初学者指南 At the heart of any general website or web page are lines of code in HTML and CSS. HTML, the web development language to render content and ...
angular 控件css_Angular之自定义组件添加默认样式
weixin_40001805的博客
12-18 458
Angular的核心思想之一就是：组件化。组件化可以使我们的代码更好的复用。在使用官方提供的Angular库Angular Material时，细心的同学就会发现，Material的每一个组件都有它自己样式，如：按钮：mat-button工具条：mat-toolbar表格：mat-tableetc.每个组件添加自己独有的样式，增加css作用域的控制，实现了样式的隔离。那么，如果给一个自定义组件添加...
java cssbox_CssBox通过HTML生成图片
weixin_39980809的博客
02-16 962
Maven管理net.sf.cssboxcssbox4.14其所以依赖的jar包： 集成调用方法：import java.awt.Dimension;import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import org.fit.cssbox.demo.ImageRenderer;impor...
vue.js 组件css_使用CSS样式化Vue.js组件
cuk0051的博客
08-27 1092
vue.js 组件cssNote: this tutorial uses Vue.js Single File Components 注意：本教程使用Vue.js单个文件组件 The simplest option to add CSS to a Vue.js component is to use the style tag, just like in HTML: 将CSS添加到Vue.js...
16进制的透明颜色css_在CSS中使用十六进制颜色
cungui5726的博客
08-24 2951
16进制的透明颜色cssStandard CSS color keywords are limited to 149 named shades; the hexadecimal (or “hex”) color method has access to the full RGB gamut. The key to learning hex is understanding the hexadeci...
达内cloud_note源代码
06-14
6. **前端技术**：虽然主要关注后端，但项目可能也包含前端部分，如HTML、CSS和JavaScript，可能使用Bootstrap或Vue.js等库来增强用户体验。理解前端与后端如何交互也是重要的。 7. **云平台集成**：作为“cloud_...
django_portfolio_note
03-07
在 "django_portfolio_note" 项目中，开发者可能需要掌握如何将 CSS 与 Django 模板结合，以实现动态和自定义的页面样式。 【内容】在 "django_portfolio_note-master" 压缩包中，我们可以期待找到以下关键组件： ...
sticky_note_with_css:使用CSS3和HTML5创建便签效果
05-12
本主题聚焦于"sticky_note_with_css"项目，它展示了如何利用这两项技术来实现一个逼真的便签效果。下面将详细介绍这个项目中的相关知识点。 首先，HTML5提供了丰富的语义化标签，使得网页结构更加清晰。在创建便签...
HTML_learn_myself_note.docx
06-29
HTML自学笔记WORD文档，该文档记录作者自学HTML一个月的笔记，文档内容按照作者的记录方式记录，其中可能有一些理解不到位的地方，欢迎交流！
cloud_note
12-20
前端可能使用了HTML5、CSS3和JavaScript技术栈，可能还涉及了React、Vue或Angular等现代前端框架，用于创建用户友好的交互界面和管理用户笔记。这些框架可以帮助开发者快速构建响应式和动态的Web应用。 后端服务...
CSS里的几个小知识
07-08 345
在 中，rel=“stylesheet” 表示被链接的文档（即 mystyle.css）是一个样式表（style sheet），用于为当前页面提供样式定义。在 HTML 中，用于指定链接指向的资源地址。标签的属性，可以帮助搜索引擎更好地理解和索引网页，优化页面在不同设备上的显示，以及实现一些特定的功能，如自动刷新、设置字符集等。1、“rel” 是 “relation” 或 “relationship” 的缩写，意思是“关系；在 HTML 中， 标签的 rel 属性用于定义当前文档与被链接文档之间的关系。
CSS 样式链接的多方面应用与最佳实践
Lesleyhnj的博客
07-04 307
在网页开发中，CSS 样式链接是通过在HTML文档中的<link>标签或者通过<style>标签内部定义的方式来引入和应用CSS样式表。这些样式表包含了诸如颜色、字体、布局等方面的规则，使得开发者能够将设计风格和布局应用到整个网站或特定页面的各个元素上。
【CSS in Depth 2 精译】2.4 视口的相对单位
PeacefulWinter的博客
07-03 936
本篇为《CSS in Action》最新第二版第2.4小节全新改版内容。文章在第一版的基础上，对视口的新增相对单位做了细致入微的探讨，还进行了分类汇总。在视口相对单位的应用方面，也对旧版内容做了全新升级，新加 clamp 函数实现响应式设计，非常值得前端开发人员用心积累。
css—圆角渐变边框+透明背景色
最新发布
heal_l的博客
07-09 112
【代码】css—圆角渐变边框+透明背景色。
css right 0
04-04
The CSS property "right: 0" is used to position an element at the right edge of its container. It specifies the distance between the right edge of the element and the right edge of its container. For example, if we have a div element with "position: absolute" and "right: 0", it will be positioned at the right edge of its closest positioned ancestor. If there is no positioned ancestor, it will be positioned at the right edge of the viewport. Here's an example: ``` .container { position: relative; width: 500px; height: 500px; } .box { position: absolute; right: 0; width: 100px; height: 100px; background-color: red; } ``` In this example, we have a container element with "position: relative" and a fixed width and height. We also have a box element with "position: absolute" and "right: 0". This will position the box element at the right edge of the container element. Note that if we change the "position" property of the container element to "static", the box element will be positioned at the right edge of the viewport instead.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值