精华内容
下载资源
问答
  • css继承性

    2021-02-19 15:40:15
    文本相关的属性普遍具有继承性,只需要给祖先标签设置,即可在后代所有标签中生效 color font- 开头的 list- 开头的 text- 开头的 line- 开头的 就近原则 在继承的情况下,选择器权重计算失效,而是“就近原则” ...

    文本相关的属性普遍具有继承性,只需要给祖先标签设置,即可在后代所有标签中生效

    • color
    • font- 开头的
    • list- 开头的
    • text- 开头的
    • line- 开头的

    就近原则

    • 在继承的情况下,选择器权重计算失效,而是“就近原则”
    展开全文
  • CSS继承性

    2021-01-21 15:54:17
    css继承性 CSS的某些样式是具有继承性的,那么什么是继承呢? 继承是一种规则,它允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代。所有的css语句都是基于各个标签的继承关系的。 但是并不是所有的属性...

    css继承性

    CSS的某些样式是具有继承性的,那么什么是继承呢?

    继承是一种规则,它允许样式不仅应用于某个特定 html 标签元素,而且应用于其后代。所有的css语句都是基于各个标签的继承关系的。
    但是并不是所有的属性都能被继承,一般的字体属性都是能继承的,不能继承的例如边框属性
    注意:
    孩子能继承父亲属性,
    但是父亲不能继承孩子属性;

    例如:

    <div>
    	<p></p>
    	<h2>
    		<p></p>
    	</h2>
    </div>
    

    子选择器:div>p
    子代选择器与后代选择器的区别
    后代选择器:就是对象当中所有的子元素,孙子元素以及最底层的元素
    子选择器:就单单是子元素,子元素的子元素就不算了

    选择器优先级总结
    行 内 > ID选择器 > 类选择器 > 标记选择器

    div{
    	color:pink !mportant;
    }
    !mportant (!表示权重,优先级高于 行内);
    
    

    在HTML中使用CSS方法-各种方式的优先级问题
    行内样式>内嵌式>链接式>@import

    展开全文
  • CSS中并不是所有的属性都是能够继承的,因此在使用时一定要了解哪些是能够继承的哪些是不能够继承的。visibility和cursor能够被所有元素继承;letter-spacing,word-spacing,white-space,line-height,color,...

    在CSS中并不是所有的属性都是能够继承的,因此在使用时一定要了解哪些是能够继承的哪些是不能够继承的。

    visibility和cursor能够被所有元素继承;letter-spacing,word-spacing,white-space,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction能够被内联元素继承;text-indent和text-align会被终端元素继承;list-style,list-style-type,list-style-posi-tion,list-style-image会被列表元素所继承;border-col-lapse会被表格元素所继承[2]。

    以下属性是不可继承的:border,height,display,margin,background,padding,min-height,overflow,max-height,width,min-width,max-width,position,right,top,left,bottom,float,z-index,clear,table-lay-out,ertical-align,nicode-bidi,age-break-after,age-break-before。

    盘点CSS中可以和不可以继承的属性

    CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定 ...

    css 中可以继承的属性

    CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...

    css中可以继承的属性

    声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该 ...

    CSS中可以和不可以继承的属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

    CSS中可以继承和不能继承的属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

    CSS中可以和不可以继承的属性【转】

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

    CSS中可继承的属性

    不可继承的属性太多了不要背,记住可以继承的属性有哪些就行了.可以继承的属性很少,只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承.这么来记很轻松的呀!不要被下边的吓到了哦~ 所有元素可继承: ...

    CSS学习(7)继承、属性值的计算过程

    子元素会继承父元素的某些css属性 通常跟字体相关的属性都能被继承,具体的可以在mdn里查询是否是可继承属性 属性值的计算过程(渲染过程) 按照页面文档的树形目录结构进行依次渲染 前提条件:渲染的元素 ...

    CSS选择器有哪些?哪些属性可以继承?

    CSS选择符: id选择器(#myid). 类选择器(.myclassname). 标签选择器(div, h1, p). 相邻选择器(h1 + p). 子选择器(ul > li). 后代选择器( ...

    随机推荐

    Xcode7&period;0&period;1&lpar;ios9&rpar;的部分适配问题

    今天更新了Xcode 7 正式版,App编译出现很多警告,在App运行的时候出现如下的提示......... the resource could not be loaded because the ...

    yii中modules的命名规则

    如上图,views下面的文件夹名全小写(否则会出现找不到相应视图的错误),Module文件名称第一个单词首字母大写. 总之,按照上面的格式就不会有错了~

    Linux命令:TOP

    top命令 是Linux下常用的性能 分析工具 ,能够实时显示系统 中各个进程的资源占用状况,类似于Windows的任务管理 器.下面详细介绍它的使用方法. top - 02:53:32 up 16 ...

    Angularjs中的嵌套路由ui-router

    先看看ng-router和ui-router的区别 (1)ng-route的局限性:一个页面无法嵌套多个视图,也就是说一个页面只能有包含一个页面一个控制器的切换.  (2)ui-route的改进:在具 ...

    MVC4数据注解和验证

    model中的验证注解特性: public class StuInfo { public int ID { get; set;} [Display(Name = "姓名")] // ...

    Python基础篇&lpar;五&rpar;

    bool用于判断布尔值的结果是True还是False >>> bool("a") True >>> bool(3) True >>& ...

    TOMCAT原理详解及请求过程(转载)

    转自https://www.cnblogs.com/hggen/p/6264475.html TOMCAT原理详解及请求过程 Tomcat: Tomcat是一个JSP/Servlet容器.其作为Ser ...

    pandas apply 添加进度条

    Way:from tqdm import tqdmimport pandas as pdtqdm.pandas(desc='pandas bar')df['title_content'] = df.p ...

    二分查找、two points、排序

    二分查找 1.查找某元素.循环条件 low <= high,最终结果位mid, 如果查询失败则返回-1. int binSearch(int num[], int low, int high, ...

    Codeforces 1060E&lpar;思维&plus;贡献法)

    https://codeforces.com/contest/1060/problem/E 题意 给一颗树,在原始的图中假如两个点连向同一个点,这两个点之间就可以连一条边,定义两点之间的长度为两点之间 ...

    展开全文
  • 文章目录css特性1、在页面中包含CSS1、行内样式2、内嵌式3、链接式2、继承性3、层叠性(覆盖性)1、权重比较总结:2、增加权重 css特性 1、在页面中包含CSS 在对CSS有了一定的了解后,下面介绍在页面中包含CSS样式的几...

    css特性

    1、在页面中包含CSS

    在对CSS有了一定的了解后,下面介绍在页面中包含CSS样式的几种方式,其中包括行内样式、内嵌式和外链接式

    1、行内样式

    行内样式是比较直接的一种样式,直接定义在HTML标记之内,通过style属性来实现。这种方式比较容易令初学者接受,但是灵活性不强。

    <body>
    	<table width="200" border="1" align="center">
    		<tr>
    			<td>
    				<p style="color: #f00;font-size: 36px;">行内样式一</p>
    			</td>
    			<td>
    				<p style="color: #f0f;font-size: 16px;">行内样式二</p>
    			</td>
    		</tr>
    	</table>
    </body>
    

    2、内嵌式

    内嵌式样式表就是在页面中使用< style< style>标记将CSS样式包含在页面中。例2.16就是使用这种内嵌样式表的模式。内嵌式样式表的形式没有行内标记表现的直接,但是能够使页面更加规整。与行内样式相比,内嵌式样式表更加便于维护。但是每个网站都不可能由一个页面构成,而每个页面中相同的HTML标记又都要求有相同的样式,此时使用内嵌式样式表就显得比较笨重,而使用链接式样式表即可轻松解决这一问题。

    3、链接式

    链接外部CSS样式表是最常用的一种引用样式表的方式,将CSS样式定义在一个单独的文件中,然后在HTML页面中通过< link>标记引用,是一种最为有效的使用CSS样式的方式
    < link>标记的语法结构如下

    <link rel="stylesheet" type="text/css" href="path">
    

    属性说明:

    • rel:定义外部文档和调用文档间的关系。
    • href:CSS文档的绝对或相对路径。
    • type:指的是外部文件的MIME类型。

    举例
    css1.css文件

    h1,h2,h3{
    	color: #ccc,
    	font-family:"Trebuchet MS",Arial,Helvetica,scans-serif;
    }
    p{
    	color: #F0c;
    	font-weight: 200;
    	font-size: 24px;
    }
    

    html引入css文件

    <!DOCTYPE html>
    <html>
    <head>
    	<title>链接式引入css</title>
    	<!--这里可以直接引入css1.css文件是因为他们在同级目录下-->
    	<link rel="stylesheet" type="text/css" href="css1.css">
    </head>
    <body>
    		<h2>页面文字一</h2>
    		<p>页面文字二</p>
    </body>
    </html>
    

    效果图
    image

    2、继承性

    属性的继承性:有些属性,当给某个标签设置的时候,该标签所有的后代标签也具有该属性,则这些属性就有继承性。
    常用具有继承性的属性有
    text-开头的、font-开头的、color、line-开头的。
    总结:关于文字样式的都能被继承,所有关于盒子的、定位的、布局的属性都不能被继承。

    3、层叠性(覆盖性)

    • 当同一个标签被两个选择器选中时,CSS会根据选择器的权重决定使用哪一个选择器的效果。权重低的选择器效果会被权重高的选择器效果覆盖(层叠)。
    • 层叠性:是css处理冲突的能力,层叠性是一种能力,而不是一种性质。
    • 最终显示效果通过权重计算获得。所有的权重计算没有兼容问题

    1、权重比较

    • id选择器权重>类选择器权重>标签选择器权重
    • 选择器权重计算只看这3种选择器(id,类,标签)。高级选择器(例如:后代选择器)不计算数量
    • 选择器直接存在进位关系:
      255个标签选择器等于一个类选择器,255个类选择器等于一标签选择器
    • 如果权重一样,那么以后出现的为准
    • 如果没有直接选中某个元素(通过继承性选中权重是0,即继承的不算权重),那么权重是0
    • 都是继承过来的,谁离标签的近听谁的
    • 行内式优先级最高

    总结:

    • 1.先看有没有选中(继承不算选中),如果选中了那么比较(id数,类数,标签数)权重,如果权重都一样,谁后写听谁的(比如:同一个标签,携带了多个类名,类选择器设置了不同的属性,有冲突)。
    • 2.如果都没选中,那么权重是0,就按照就近原则(谁描述的离内容所在的标签最近就听谁的),如果一样近就又按照权重去比较,如果权重再是一样的话就看谁后写就听谁的
    • 3.逗号(并集)分开看(要拆开分成多个选择器计算,不能合着计算)

    比较3要素:权重,谁离的近,谁后写

    举例:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>举例</title>
    	<style type="text/css">
    		/*被选中
    		选择器数量:2,0,0
    		*/
    		#father #son{
    			color: blue;
    		}
    		/*被选中
    		选择器数量:1,1,1
    		*/
    		#father p.c2{
    			color: red;
    		}
    		/*被选中
    		选择器数量:0,2,2
    		*/
    		div.c1 p.c2{
    			color:black;
    		}
    	</style>
    </head>
    <body>
    	<div id="father" class="c1">
    	<!-- 答案:蓝色 -->
    		<p id="son" class="c2">请问这个字体是什么颜色?</p>
    	</div>
    </body>
    </html>
    

    举例2:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>举例2</title>
    	<style type="text/css">
    	/*没被选中(继承的不算选中)
    		*/
    	#father{
    		color: red;
    	}
    	/*被选中
    	选择器数量:0,0,1
    		*/
    	p{
    		color: blue;
    	}
    	</style>
    </head>
    <body>
    <!-- 答案:蓝色 -->
    	<div id="father"> <p>请问这个字体是什么颜色?</p></div>
    </body>
    </html>
    

    举例3:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>举例3</title>
    	<style type="text/css">
    	/*被选中
    	选择器数量:0,0,2
    		*/
    		div p{
    			color: red;
    		}
    		/*没选中
    		*/
    		#father{
    			color: red;
    		}
    		/*被选中
    		选择器数量:0,1,1
    		*/
    		p.c2{
    			color: blue;
    		}
    	</style>
    </head>
    <body>
    	<div id="#father" class="c1">
    	<!-- 答案:蓝色 -->
    		<p class="c2">请问这个字体是什么颜色?</p>
    	</div>
    </body>
    </html>
    

    举例4:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>举例4</title>
    	<style type="text/css">
    	/*被选中
    		选择器数量:0,0,2
    		*/
    		div div{
    			color: blue;
    		}
    		/*被选中
    		选择器数量:0,0,1
    		*/
    		div{
    			color: red;
    		}
    	</style>
    </head>
    <body>
    	<div>
    		<div>
    		<!-- 答案:蓝色 -->
    			<div>请问这个字体是什么颜色?</div>
    		</div>
    	</div>
    </body>
    </html>
    

    举例5:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>举例5</title>
    	<style type="text/css">
    	/*被选中
    		选择器数量:1,0,1
    		*/
    		#box1 div{
    			color: red;
    		}
    		/*被选中
    		选择器数量:1,0,0
    		*/
    		#box3 {
    			color: blue;
    		}
    	</style>
    </head>
    <body>
    	<div id="box1" class="c1">
    		<div id="box2" class="c2">
    		<!-- 答案:红色 -->
    			<div id="box3" class="c3">请问这个字体是什么颜色?</div>
    		</div>
    	</div>
    </body>
    </html>
    

    image
    举例6:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>举例6</title>
    	<style type="text/css">
    	/*没选中(交集选择器没选中)
    		*/
    		div#box1{
    			color: red;
    		}
    		/*被选中
    		选择器数量:1,0,0
    		*/
    		#box3 {
    			color: blue;
    		}
    	</style>
    </head>
    <body>
    	<div id="box1" class="c1">
    		<div id="box2" class="c2">
    		<!-- 答案:蓝色 -->
    			<div id="box3" class="c3">请问这个字体是什么颜色?</div>
    		</div>
    	</div>
    </body>
    </html>
    

    2、增加权重

    !important是英语里面重要的意思,作用是给属性提高权重,提高到无穷大,语法如下

    k : v!important
    

    使用

    <!DOCTYPE html>
    <html>
    <head>
    	<title>增加权重</title>
    	<style type="text/css">
    	#paral{
    			color: red;
    		}
    		.spec{
    			color: blue;
    		}
    		/*本来字体是红色,加了 important后给属性提高权重,字体变成绿色*/
    		p{
    			color: green!important;
    		}</style>
    </head>
    <body>
    	<p id="paral" class="spec">颜色</p>
    </body>
    </html>
    

    注意3点:

    1. important修饰的是一个属性而不是一个选择器
    2. important无法提升继承的权重,该是0还是0。只能提高选中的权重,没选中的无法提高
    3. important做站的时候不允许使用(属于知识点,但是没有实际意义)
    展开全文
  • CSS继承性与层叠性

    2021-03-03 17:56:40
    CSS继承性与层叠性一、继承性1.概念:2.继承的局限性:3.CSS可继承属性二、层叠性 一、继承性 1.概念: 所谓继承,就是父元素的规则也会适用于子元素。比如给body设置为color:red;那么他内部的元素如果没有其他的...
  • CSS继承性 CSS属性继承:外层元素的样式,会被内层元素进行继承。多个外层元素的样式,最终都会“叠加”到内层元素上。 什么样的CSS属性能被继承呢? CSS文本属性都会被继承的: color、 font-size、font-...
  • 一、继承性 ...比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为...有一些css样式是不具有继承性的。如border:1px solid red; p{border:1px solid re
  • 一、CSS引用方式 行内样式:使用HTML标签的style属性定义,只对设置style属性的标签起作用 <div style="height: 60px;width: 60px;background-color: red;"></div> 内部样式:在页面头部通过style...
  • css继承性 css层叠样式中有继承性。祖先元素的样式中(涉及到文字相关样式),后代元素可以继承。 标签同时被多个选择器选中,添加相同样式 解决方案:层叠性。 在CSS中权重高的选择器,会层叠掉权重低的选择器。 1 ...
  • css中无继承性的属性有:1、display;2、文本属性;3、盒子模型属性;4、背景属性;5、定位属性;6、生成内容属性;7、轮廓样式属性;8、页面样式属性;9、声音样式属性。本教程操作环境:windows10系统、css3、Dell...
  • 什么是css继承

    2021-06-26 02:44:22
    在css的学习过程中,我们会遇到一些属性...css继承性:继承性是指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性。继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于...
  • 本篇文章就给大家来介绍一下css中继承性的内容。我们定义css继承前,先来看一看HTML DOM(文档树),HTML DOM(文档树)是由html元素组成,文档树和家族树类似,也有祖先、后代、父亲、孩子和兄弟。其实很容易就可以理解...
  • CSS继承性和层叠性

    2021-03-09 12:57:28
    除了前面提到的样式之外,还有一个重要的概念就是层叠式,层叠式式贯穿整个css的性质,包含继承性和层叠性。 一个标签没有设置过样式,他的某个祖先级设置过,这种从祖先级继承过来的,成为继承性。能够被继承的是...
  • 二、继承性 CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。 继承的样式: text- font- line- color 特殊:行高的继承 行高可以跟单位也可以不跟单位 font: 12px/24px 'Times New Roman'; ...
  • CSS Flex 弹性盒继承宽高问题弹性盒子,自动占据位置的子容器,无法直接继承父级的100%宽高;通过下面两种方式,即可让子容器,继承宽高。垂直高度布局css/*设置为一个弹性盒*/.flexBox{display: flex;}/*子内容排列...
  • 1.层叠性 是指多种css样式的叠加。例如当使用内嵌样式css样式表定义<P>标签字号大小为12px,使用链入式定义<P>...注:不是所有属性都是能继承的,例如以下属性就不具有继承性。 边框属性
  • 继承性 font-size会从父标签直接继承 优先级 !important的具体用法就是直接加在代码后,比如color:red!important;
  • CSS继承

    2021-08-04 05:23:26
    不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout...
  • CSS继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签,携带了多个类名 !important标记 CSS继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们...
  • 文章目录一、CSS三大特性二、层叠性三、继承性四、优先级 一、CSS三大特性 CSS三大特性:层叠性、继承性、优先级 二、层叠性 层叠性主要解决:冲突的问题,相同的选择器设置相同的样式,此时会产生样式冲突,层叠...
  • css color属性有继承性继承性是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代;而color属性可以继承,例用color设置给p标签设置某种颜色,该颜色样式不仅应用p标签,还应用于p标签中的...
  • 1.背景介绍了解css样式表的继承,我们先从文档树(HTML DOM)开始,文档树由HTML元素组成,文档树和家族树类似,也有祖先、后代、父亲、孩子、兄弟css样式表继承指的是,...那么有哪些属性可以自动继承呢有继承性的属性...
  • CSS样式优先级及权重

    2021-03-02 19:19:53
    一、什么是继承性? 作用:给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性。 <div style="color:red"> <p></p> </div> //`<div>` 的 `color: red`属性,这个属性...
  • 1.CSS 层叠性 -概念: 所谓层叠性是指多种CSS样式的叠加...2.CSS 继承性 -概念: 子标签会继承父标签的某些样式,如文本颜色和字号。 想要设置一个可继承的属性,只需将它应用于父元素即可。 -注.
  • css继承性:CSS继承可定义为特定的css属性向下传递到子孙元素,就是指被包在内部的标签将拥有外部标签的样式,即子元素可以继承父元素的属性。继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用...
  • CSS有三个特性:层叠性、继承性、优先级 一、层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要用来解决样式冲突的问题 层叠性原则: (1)、样式冲突,遵循的...
  • CSS中属性的可继承性

    2021-10-09 15:47:00
    了解了具体的可继承性,可以写出更优质的代码。 不可继承的属性 display:规定元素应该生成的框的类型 文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影...
  • 看代码:千一网络body{text-align:center;font-size:99px;...}千一网络千一网络效果如下:统计一下a 和 div 的 text-align(a 没有)、font-size、font-weight 都从 body 那里得到了继承;但是 color 只是 div...
  • 1.1继承性的介绍 ★特性:子元素有默认继承父元素样式的特点(子承父业) ★可以继承的常见属性(文字控制属性都可以继承) 1. color 2. font-style、font-weight、 font-size、font-family 3. text-indent.、text-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 85,937
精华内容 34,374
关键字:

css继承性

友情链接: KOKKJ07.zip