属性覆盖基本方式 II . 属性覆盖的四种情况 III . 常量 ( val ) / 变量 ( var ) 属性覆盖 IV . 子类初始化时考虑覆盖属性的使用 I ....属性覆盖基本方式 ---- 1 ....属性覆盖 : 属性覆盖与方法覆盖的方式基本相同 ; ① 属性覆盖前提 : 在父类中使用 open 修饰的属性 , 可以在子类中被覆盖 ; ② 属性覆盖方式 : 在子类中使用 override 修饰被覆盖的属性...属性覆盖的四种情况 ---- 1 . 子类的覆盖属性的要求 : 子类中覆盖的属性有特定的要求 , 不能是延迟加载属性 , 下面列举几种常见的方式 ; 2 ....初始化过程中的覆盖属性 : 这里加入对覆盖属性的考虑 , 父类初始化过程中 , 子类覆盖的属性还没有初始化 , 父类的 open 属性可能在子类初始化过程中被修改 ; 5 .
我们知道 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....小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;
音频 audio autoplay="autoplay" source src="视频路径" 视频 video autoplay="autoplay" source src="视频路径" 其他属性...: controls:如果出现该属性,则向用户显示控件,比如播放按钮。...loop:如果出现该属性,则当媒介文件完成播放后再次开始播放。 URL:要播放的视频的 URL。 preload:如果出现该属性,则视频在页面加载时进行加载,并预备播放。
属性配置重写优先级 ?
html> css...在CSS中,我们可以使用border-collapse属性来去除单元格之间的空隙。 语法: border-collapse:属性值; 说明: border-collapse是表格独有的属性。...border-collapse属性取值如下: 表1 border-collapse属性取值 border-collapse属性值 说明 separate 默认值,边框分开,不合并 collapse...DOCTYPE html> border-collapse属性 css"> table,th,td{border:1px solid gray;} table{border-collapse
display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。...六、css盒子模型 margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。...inherit 规定应该从父元素继承 clear 属性的值。 注意:clear属性只会对自身起作用,而不会影响其他元素。...fixed(固定) fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。...示例代码: 十二、z-index 设置对象的层叠顺序,数值大的会覆盖在数值小的标签之上。
背景属性 1.1 背景颜色 如果背景一直都是一成不变的,对于一个网页还是挺无趣的,为了让背景更加的生动,可以修改它的颜色。...为了控制背景的尺寸,我们需要学习以下语法: background-size:[值]; 值 说明 auto 默认值,保持背景图片的原始大小 contain 让图片完全显示在元素内,可能会有空白 cover 让图片完全覆盖元素...总结 css的背景属性对于提高网页美观是非常重要的。 往期文章:前端
text-align:水平对齐方式 text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。...其可用属性值如下: left:左对齐(默认值) right:右对齐 center:居中对齐 text-indent:首行缩进 text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值...其属性值可为不同单位的数值,允许使用负值,默认为normal。 word-spacing:单词间距 word-spacing属性用于定义英文单词之间的间距,对中文字符无效。...颜色半透明(css3) 文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下: color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间 color...: rgba(0,0,0,0.3) 文字阴影(CSS3) Shadow 影子 text-shadow:水平位置 垂直位置 模糊距离 阴影颜色; ?
CSS 层叠式样式表 从审美的角度负责页面样式。 JS JavaScript 从交互的角度描述页面行为。...css整体感知 css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思,我们将慢慢的去理解。...后面的课程你将知道,css也可以写在单独的文件里面,现在我们先写在style标签里面 1css”> type表示“类型” , text就是“纯文本”...css也是纯文本的。 css对换行不敏感,对空格也不敏感。但是一定要有标准的语法。冒号,分号都不能省略。...CSS常见属性 字符颜色: 1color:red; color属性的值,可以是英语单词,比如red、blue、yellow等等;也可以是rgb、十六进制,不要着急,后几天讲。
3align-items定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用3align-self设允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。...1font-familyfont - family 属性规定一个元素的字体。1font-kerningfont-kerning 字体字符间距处理 CSS 属性参数控制字符之间的间距。...-font-language-overridefont-language-override 字体-语言-重写 CSS 属性参数控制特定语言的字体中的字形。...1font-variant-alternatesfont-variant-alternates 字体变形候补 CSS 属性参数控制替代符号的用法。...3transition-propertytransition-property 规定应用过渡效果的 CSS 属性的名称。(当规定的 CSS 属性改变时,过渡效果将开始)。
属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: background-color...设置背景图片如何重复平铺 background-position 设置背景图片的位置 background-attachment 设置背景图片是固定还是随着页面滚动条滚动 实际应用中,我们可以用background属性将上面所有的设置项放在一起...background-repeat 设置背景图片如何重复平铺 设置background-repeat: no-repeat;则不会重复平铺。 ? ---- 如果需要平铺水平方向的内容呢?...写完上来几个属性,如果每个都要单独写的话就比较费劲,下面介绍一下如何生成一行。...简写 background 属性示例 “background:cyan url(bg.jpg) repeat-x”,横向平铺盒子,盒子其他部分显示背景颜色“cyan”。 ? 简写如下: ?
其他 border-radius cursor filter will-change -webkit-overflow-scrolling :设置为 touch 滚动会带惯性 更多 -webkit- CSS...CSS参考手册 CSS 属性 按字母排序 CSS的未来:一些试验性CSS属性
inherit 设置从父元素继承background属性值 以上背景属性的值均可以设置为inherit,代表从父元素继承background属性 背景缩写 body { background:...css显示模式:块级、行内、行内块级 在HTML中HTML将所有标签分为两类,分别是容器级和文本级 在CSS中CSS也将所有标签分为两类,分别是容器级是块级元素和行内元素 #1、HTML中容器级与文本级...不可以设置宽高 盒子宽高默认和内容一样 3、行内块级元素inline-block 不会独占一行 可以设置宽高 CSS显示模式转换 属性 描述 值 display 可以通过标签的display属性设置显示模式 block 块级inline 行内inline-block 行内块级 4、div与span 布局都是用块级元素...div一般用于排版,而span一般用于局部文字的样式 1、站在HTML的角度:div是一个块级元素、独占一行,而span是一个行内元素、不会单独占一行 2、站在CSS的角度:div是一个容器级标签
注释:如果 "position" 属性的值为 "static",那么设置 "right" 属性不会产生任何效果。 ...该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 注释:如果 "position" 属性的值为 "static",那么设置 "top" 属性不会产生任何效果。 ...hidden 元素是不可见的 collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。...如果此值被用在其他的元素上,会呈现为 "hidden" inherit 下面的例子演示如何使表格元素叠加 css"> tr.coll... css"> img.x { position:absolute; left:0px; top:0px; z-index:-
文本属性 属性 表示 注意点 color 文字颜色 通常用16进制 text-align 文本对齐 可以设定水平的对齐方式 text-indent 文本缩进 通常段落首行缩进2个字的距离 text-indent
在CSS中,我们使用border-spacing属性来定义表格边框间距。 语法: border-spacing:像素值; 说明: 该属性指定单元格边界之间的距离。...在CSS初学阶段,全部都是使用像素作单位,在CSS进阶中我们会深入讲解其他CSS单位。 举例: 属性跟上节课学到的border-collapse属性一样,只需要在table元素设置就可以生效,没必要在th、td这些元素中设置,造成代码冗余。...在CSS中,我们使用caption-side属性来定义表格标题的位置。...语法: caption-side:属性值; 说明: caption-side属性取值如下: 表1 caption-side属性取值 caption-side属性值 说明 top 默认值
CSS边框属性 3. border 属性的几种书写方式 4. 边框倒角(border-radius) 1....什么是边框 ---- 百度百科边框的定义:https://baike.baidu.com/item/css边框 CSS盒模型中的边框所在位置:位于外边距和内边距的中间 在学校初次学习边框时,老师是这样讲的...CSS边框属性 ---- 基本属性(border):边框宽度、边框样式、边框颜色 边框倒角(border-radius) 边框阴影(box-shadow) 轮廓属性(outline) 3. border...给某一个边框单独设置某个属性 border-方向-属性: 属性值; border-top-width: 5px; border-right-style: solid; 4....y轴的半径 3.x轴/y轴 第一个属性值表示x轴半径数值的设定,第一个属性值表示y轴半径数值的设定 c.
Gap属性 gap 属性是用来设置网格行与列之间的间隙,该属性是row-gap and column-gap的简写形式 属性值 1、row-gap 设置网格布局中行之间的间隙大小 2、column-gap...div>3 4 5 6 7 8 CSS
是通过position属性配合left,right...等来实 现的....二定位类别 1.相对定位 相对定位就是相对于自己以前在标准流中的位置来移动 语法: position: relative; 配合left, top, right,bottom等属性使用 特点 相对定位是不脱离标准流的..., 会继续在标准流中占用一份空间 在相对定位中同一个方向上的定位属性只能使用一个 eg: left和right, top和bottom 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素...body来定位 语法 position: absolute; 配合left, top, right,bottom等属性使用 特点 绝对定位的元素是脱离标准流的,绝对定位的元素是不区分块级元素/行内元素..., 不会占用标准流中的空间 固定定位和绝对定位一样不区分行内/块级/行内块 三定位属性的应用 1.
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 属性的值