，background-position：属性，就是专门用于控制背景图片的位置 background-position：水平方向的值，垂直方向的值 1、具体的方位名词 水平方向：left，center...inherit 设置从父元素继承background属性值 以上背景属性的值均可以设置为inherit，代表从父元素继承background属性 背景缩写 body { background:...CSS显示模式转换 属性 描述 值 display 可以通过标签的display属性设置显示模式 block 块级inline 行内inline-block 行内块级 4、div与span 布局都是用块级元素...1、div标签 一般用于配合css完成网页的基本布局 2、span标签 一般用于配合css修改网页中的一些局部信息，比如一行文字我们只为一部分加颜色我是JetPropellSnake...div一般用于排版，而span一般用于局部文字的样式 1、站在HTML的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行 2、站在CSS的角度：div是一个容器级标签
在这种情况下，调用 $("#collapseExample").css("display", "none") 的目的是将折叠元素隐藏，使其在页面中不可见。...通常情况下，应该将折叠元素设置为默认隐藏，然后通过点击触发器来显示它。...使用 attr() 方法修改 CSS 样式不生效是因为该方法主要用于设置元素的属性值，而非样式。虽然某些属性值可能会影响元素的呈现效果，但这并不是它们的本意和正确用法。...该方法可以通过接受一个样式属性名和值的键值对来直接修改元素的样式，例如： $("#collapseExample").css("display", "none"); 此外，还可以同时设置多个样式属性，甚至动态地计算样式的值...总之，使用 .css() 方法是修改元素样式的正确和推荐方式，而不是使用 attr() 方法。
文本属性 color 设置文本颜色； div span{ color: red; } 浏览器显示 text-align 设置元素水平对齐方式； div...{text-align: center;} 浏览器显示看上图 text-indent 设置首行文本的缩进； div{ text-align: left;...:40px; } 下图为设置行高之后 下图为没有设置行高 text-decoration 设置文本的装饰； div{ text-align: left;...以上为常见的文本属性，更多的文本属性可以打开W3school进行详细学习。...注意：有部分属性不是所有的浏览器内核都能识别的了的，这里可以通过加上浏览器前缀来解决： IE浏览器是Trident内核，加前缀：-ms- Chrome浏览器是Webkit内核，加前缀：-webkit-
使用各种属性进行样式设置。 由于要使用的属性太多，因此任何初学者都自然会对使用哪个属性以及何时使用感到困惑。...在CSS中， opacity属性倾向于设置元素的不透明度 。...注意： opacity属性的缺点是，如果将元素设置为透明的，则所有属性的子元素也将变为透明的。 如果要避免这种情况，并希望使文本在元素内可读，则应改为RGBA值 。...在上面的示例中，将不透明度级别0.55应用于div元素。...初始 将此属性设置为其默认值。 继承 帮助从其父元素继承此属性。
自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 开发者自行定义的，它包含的值可以在整个文档中重复使用。...这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被使用。...无效情况：先会检查属性 color 是否为继承属性，如果不是则将该值设置为它的默认初始值。:root 伪类:root 这个 CSS 伪类匹配文档树的根元素。...实践中主要用于声明全局CSS变量。...;使用不同于CSS，声明变量以“插值”的形式使用，并且不但可以表示为数值，文本嵌入表达式，还可以作为类名、属性名等。
前言 ---- font-family 属性用于给元素指定字体，是开发中使用非常频繁的一个属性 该属性的值是一个字体系列，每个值使用逗号隔开，如果字体名名称包含空格，那么字体名称必须使用引号包裹，设置的字体是否可用取决于用户机器上该字体是否可用...给英文，中文设置不同的字体 ---- 众所周知，font-family 属性的原则是客户端不支持前面的字体时，自动往后查找可以使用的字体 如果想要给英文，中文设置不同的字体，可以使用一个仅支持的英文的字体...（比如: Arial），再找一个支持中文的字体 如下所示: 遇到文字时，首选会尝试使用 Arial 字体，该字体支持英文，所以遇到英文会生效，遇到中文时 Arial 不支持，将自动使用后面的 Noto...Noto Sans SC 大小: 100,300,400,500,700,900 css...family=Noto+Sans+SC:100,300,400,500,700,900">C:100,300,400,500,700,900"> 在需要使用思源黑体的地方使用 CSS 设置字体 font-family
大小写敏感（另:CSS中，书写属性名时大小写不敏感，但是书写选择器时大小写敏感） 定义只能出现在块{}内 可以使用!...important修饰 作用域就是选择器的选定范围，作用域出现交叉时，同名变量覆盖规则取决于选择器权重 css"> /* 这里定义的变量是全局的 */ :root...自定义属性变量是不能用作CSS属性名称的，比如：var(--color): red; 不能用作背景地址，比如：url(var(--url))； 由于var()后面会默认跟随一个空格，因此在其后面加单位是无效的...(document.documentElement); var value = rootStyles.getPropertyValue('--variableName'); // 获取某个元素中定义的属性变量...value = element.style.getPropertyValue('--variableName'); // 设置变量 document.body.style.setProperty(
如果你曾使用过某种编程语言，那么你已经很熟悉变量这个概念了。变量用于存储和更新你的程序所需要的值，以便使它运行。...这些不同基于一个事实：CSS变量是浏览器中直接可用的CSS属性，而预处理中的变量是用于编译成常规的CSS代码，浏览器其实对它们一无所知。...而 级联变量(cascading variable) 的部分，由通过val()来使用你的自定义属性组成，开起来像这样： var(--my-cool-background); 自定义属性作用于CSS选择器中...方法很简单，就是通过var(--my-cool-background)拿到自定义属性的值，然后给合适的CSS属性设置上去。...如何在@keyframes中使用CSS变量 CSS变量可以在CSS动画中使用，即可用于常规HTML元素，也可以用于内联的SVG。
我们知道 css 我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....布局常用样式属性width 设置元素(标签)的宽度，如：width:100px;height 设置元素(标签)的高度，如：height:200px;background 设置元素背景色或者背景图片，如：...文本常用样式属性color 设置文字的颜色，如： color:red;font-size 设置文字的大小，如：font-size:12px;font-family 设置文字的字体，如：font-family...小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;
大家好，又见面了，我是你们的朋友全栈君。 opacity 用于指定元素透明度, 支持 0~1 之间的小数. 默认值 1-完全不透明, 0-完全透明 <!
CSS的display 属性规定元素应该生成的框的类型。 1.1、none：此元素不会被显示。 1.2、block：此元素将显示为块级元素，此元素前后会带有换行符。 1.3、inline：默认。...（CSS2.1 新增的值） 1.5、list-item：此元素会作为列表显示。 1.6、run-in：此元素会根据上下文作为块级元素或内联元素显示。...1.7、compact：CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。...1.8、marker：CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 1.9、table：此元素会作为块级表格来显示（类似 ），表格前后带有换行符。...此元素会作为一个表格单元格显示（类似 和 ） 2.8、table-caption：此元素会作为一个表格标题显示（类似 ） 2.9、inherit：规定应该从父元素继承 display 属性的值
大家可以看到了，表格加入边框的默认情况下，单元格与单元格之间有一定的空隙。那如果我们要去除单元格之间的空隙，那该怎么办呢？...在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙。 语法： border-collapse:属性值; 说明： border-collapse是表格独有的属性。...除了表格，在其他地方是用不上的。.../tr> 在浏览器预览效果如下： image.png 分析： 只需要在table元素中设置...border-collapse属性值就行，没必要在th、td这些元素也设置，造成代码冗余。
3opacityopacity 该属性规定了一个元素的透明度3 边框 元素描述版本borderborder 属性是规定各种单独的边界属性的简写属性，可用于设置一个或多个以下属性的值：border-width...2border-left-styleborder-left-style 该属性是一个用于设置各种单独的边界属性的简写属性，可用于设置一个或多个以下属性的值：border-width，border-style...3border-image-repeatborder-image-repeat 该属性用于规定图片如何填充边框。单个值，设置所有的边框；两个值，分别设置水平和垂直的边距。...-font-language-overridefont-language-override 字体-语言-重写 CSS 属性参数控制特定语言的字体中的字形。...3transition-propertytransition-property 规定应用过渡效果的 CSS 属性的名称。（当规定的 CSS 属性改变时，过渡效果将开始）。
属性解释 background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项： background-color...设置背景图片是固定还是随着页面滚动条滚动 实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background:...，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。...写完上来几个属性，如果每个都要单独写的话就比较费劲，下面介绍一下如何生成一行。...”，除了设置这些方位词之外，还可以设置具体的数值。
如果你曾使用过某种编程语言，那么你已经很熟悉变量这个概念了。变量用于存储和更新你的程序所需要的值，以便使它运行。...这些不同基于一个事实：CSS变量是浏览器中直接可用的CSS属性，而预处理中的变量是用于编译成常规的CSS代码，浏览器其实对它们一无所知。...而 级联变量(cascading variable) 的部分，由通过val()来使用你的自定义属性组成，开起来像这样： var(--my-cool-background); 自定义属性作用于CSS选择器中...方法很简单，就是通过var(--my-cool-background)拿到自定义属性的值，然后给合适的CSS属性设置上去。...中使用CSS变量 CSS变量可以在CSS动画中使用，即可用于常规HTML元素，也可以用于内联的SVG。
现在的互联网前端三层： HTML 超文本标记语言 从语义的角度描述页面结构。 CSS 层叠式样式表 从审美的角度负责页面样式。...JS JavaScript 从交互的角度描述页面行为。 css整体感知 css是cascading style sheet 层叠式样式表的简写。...后面的课程你将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面 1css”> type表示“类型” ， text就是“纯文本”...css也是纯文本的。 css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。...CSS常见属性 字符颜色： 1color:red; color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制，不要着急，后几天讲。
color:文本颜色 color属性用于定义文本的颜色，其取值方式有如下3种： 1.预定义的颜色值，如red，green，blue等。...line-height:行间距 ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。...text-align:水平对齐方式 text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。...其可用属性值如下： left：左对齐（默认值） right：右对齐 center：居中对齐 text-indent:首行缩进 text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值...其属性值可为不同单位的数值，允许使用负值，默认为normal。 word-spacing:单词间距 word-spacing属性用于定义英文单词之间的间距，对中文字符无效。
继承父元素字体的粗细值 颜色 可以用color来设置颜色， 颜色属性被用来设置文字的颜色。 ...一般用于配合JavaScript代码使用。 display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。...六、css盒子模型 margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。...： 提供一个，用于四边； 提供两个，第一个用于上－下，第二个用于左－右； 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下； 提供四个参数值，将按上－右－下－左的顺序作用于四边； 九、float...浮动 在 CSS 中，任何元素都可以浮动。
背景属性 1.1 背景颜色 如果背景一直都是一成不变的，对于一个网页还是挺无趣的，为了让背景更加的生动，可以修改它的颜色。...语法： background-color:[指定颜色] 与设置字体颜色相同，设置设置颜色也由3种格式： 直接写单词。...background-color:red; background-color:#ff0000; background-color:rgb(255,0,0); 默认为透明背景：transparent 下面我们来设置背景色...如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中) 1.4.1 知识补充-关于坐标系 在计算机中的坐标系和我们在高中阶段使用的坐标系的方向是不同的...总结 css的背景属性对于提高网页美观是非常重要的。 往期文章：前端
@keyframes 伪元素 content 其他 border-radius cursor filter will-change -webkit-overflow-scrolling :设置为 touch...滚动会带惯性 更多 -webkit- CSS CSS参考手册 CSS 属性 按字母排序 CSS的未来：一些试验性CSS属性
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
