CSS引入方式及权重等笔记

1,用css样式设置的权重 > 在标签属性中设置的(优先级)
注意:在table里面设置border是给所有的行列都会加边框,但是在css样式中写border就只会显示最外层的边框,若要全部的行列都加边框,就得在写css样式时,在表格的td下写。
CSS基本结构:选择器{ 样式属性:属性值;}
2,CSS适用方式(4种)
“内嵌样式”:写在style标签对里面。
“行内样式”:直接写在标签行上面。
“外链样式”:单独写一个css文件,通过link标签引入。
(link比较常用—性能高/速度快/用户体验比较好,可以引入多个)
“导入式”:单独写一个css文件,通过@import导入。(该方法是在

3,Link与@import一些区别
① 除了加载CSS文件以外,它还能加载其它类型文件,如“icon”,而“@import”只能加载CSS文件
给网页加上图标:
② 在现代的浏览器中是多线程加载的,也就是说在通过该标签加载一个文件的时候标签内的DOM也在执行同步的加载。加载效率高于@import
③ 作为一个标签,也就是一个DOM元素,是可以通过JavaScript进行操作的(如增加、删除标签,修改的属性值等)。而“@import”写在

4,CSS选择器优先级判断
当样式冲突时,将根据【权重+就近原则】来判断以谁的样式为准。
基本类型选择器权重:
行内样式:1000
Id选择器: 100
Class选择器:10 【属性选择器】
标签选择器:1
*任意符选择器:0 (大于默认样式与继承验样式)
组合选择器权重:
群组选择器: 单独计算
后代,子代,兄弟等选择器:权重相加
就近原则:当权重值相同时,谁和要设置的html标签隔得近,谁的权重就高

5,CSS选择器常用类型
Css基础选择器:标签(名)选择器/类选择器(class)/ID选择器。
后代选择器:用‘空格’分割,后代选择器可以选择嵌套在标签内部任意层级的标签元素。
子选择器:用‘ > ’分割,子选择器只能选择当前标签往内一层的元素。
伪类选择器:
伪类选择器和其它选择器有所不同,它是通过触发一定的“事件”来实现效果,也就是说如果不进行任何操作是看不到该选择器的CSS样式设置的。
通用伪类选择器如下(如果要同时生效,顺序不能变):
:hover 鼠标悬浮于该元素上设置的样式
:active 鼠标点击到该元素上,设置的样式

作用于a标签上的伪类选择器如下:
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} /
已访问的链接 /
a:hover {color: #FF00FF} /
鼠标移动到链接上 /
a:active {color: #0000FF} /
选定的链接 */

提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
群组选择器:用‘逗号’分割。
群组选择器的使用范畴是,多个选择器使用同一个样式或者同一组样式。这在做CSS样式初始化,CSS框架设计以及后期CSS代码优化时会经常使用
同级元素选择器(兄弟选择器):
选定当前标签同级的其它指定标签。
同级元素有两种,即“+”和“~”,
“+”只能选择该标签下一个指定标签(中间不能有其他标签间隔)。
“~”能选择该标签后的所有同级标签。
属性选择器:
该选择器所针对的既不是某个标签,也不是类名,或者ID,它是将一个标签的属性作为选择器来使用,最常用的地方就是涉及到属性多而杂的表单元素。基本写法是“[” + “属性名” + “]”的格式,该选择器的定义方式如下:
[属性名]{…样式设置内容…}
将标签中的一个属性作为选择选择器
[属性名=“属性值”]{…样式设置内容…}
将标签中的一个属性名值对作为选择器
[type^=“datetime”]{…样式设置内容…}
将标签中的一个属性名名为“type”,属性值以“datetime”开头的属性名值对作为一个选择器
[title$=“picture”]{…样式设置内容…}
将标签中的一个属性名名为“title”,属性值以“picture”结束的属性名值对作为一个选择器
[title*=“is”]{…样式设置内容…}
将标签中的一个属性名名为“title”,属性值含有“is”的属性名值对作为一个选择器
[title~=“a”]{…样式设置内容…}
将标签中的一个属性名名为“title”,属性值含有空格分隔的词为“a”的属性名值对作为一个选择器
[title|=“this”]{…样式设置内容…}
将标签中的一个属性名名为“title”,属性值等于“this”或以“this”开头的属性名值对作为一个选择器。以连字符(-)连接的如lang =“this-us”,也算以this开头

猜你喜欢

转载自blog.csdn.net/weixin_43748930/article/details/84548100