当前位置:首页 > Web开发 > 正文

伪类 定义 :focus 获取焦点(单击之后) ::selection 火狐: ::-moz-selection 选中

2024-03-31 Web开发

ss是层叠样式表.css可以用来为网页创建样式表,通过样式表可以对网页进行装饰。

层叠:可以将整个网页想象成是一层一层的布局,条理高的将会笼罩条理低的。

css可以分袂为网页的各个条理设置样式。

感化 :

衬着页面

提高事情效率

后缀名:

.css 独立的css(样式)文件

注释:/**/

CSS的注释,感化和HTML注释类似,只不过它必需编写在style标签中,或者是css文件中

样式位置:

内联样式表通过标签的style属性设置样式(直接在标签上,不建议使用)

<div>天佑中华-内联</div>

内部样式表 在当前页面中使用的样式;通过head标签的style子标签导入

<head> <style type="text/css"> #divId2{ <!--设置ID --> background-color: #0f0; } </style> </head>

外部样式表 有独立的css文件(最保举

将CSS样式统一编写到外部的样式表中,完全使布局和表示疏散,可以使样式表可以在差此外页面中使用,最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以操作浏览器的缓存,加快用户访谒的速度提高了用户体验,所以在开发中我们最保举使用的方法就是外部的CSS文件

1.创建以css结尾的文件; <link href="http://www.mamicode.com/css/1.css" type="text/css"/>

根基语法

CSS的样式表由一个一个的样式组成,一个样式又由选择器声明块组成。

选择器

通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上

声明块

声明块紧跟在选择器的后边,使用一对{}括起来,

声明块中实际上就是一组一组的名值对布局,

在一个声明块中可以写多个声明,多个声明之间使用;离隔,

声明的样式名和样式值之间使用:来连接

选择器

注意:

若多个样式感化于一个元素的时候

差此外样式,会叠加

不异的样式,比来原则(不才方的实现

若多个选择器感化于一个元素的时候

越特殊优先级越高 id>class>属性>标签

id选择器:

通过元素的id属性值选中独一的一个元素
语法

#id属性值 {}

例如:

<xxx></xxx> #id1{...}

class选择器:

通过元素的class属性值选中一组元素

可以同时为一个元素设置多个class属性值,多个值之间使用空格离隔,只要满足的class城市实现

语法:

.class属性值{}

例如:

.cls1{...} <xxx/> <p>锄禾日当午</p>

元素选择器(标签)

通过元素选择器可以选则页面中的所有指定元素

p{ color: red; } <p>锄禾日当午</p>

选择器分组(并集选择器):同时设置多个选择器

通过选择器分组可以同时选中多个选择器对应的元素
语法:选择器1,选择器2,选择器N{}

#p1 , .p2 , h1{ background-color: yellow; } 拥有这三个选择器中的任意一个城市挪用这个选择器

通配选择器 *

可以用来选中页面中的所有的元素

语法:*{}

*{ color: red; } 所有的文字城市酿成红色

复合选择器(交集选择器)(同时满足)

可以选中同时满足多个选择器的元素,只有同时拥有这几个选择器的元素才能用这个

对付id选择器来说,不建议使用复合选择器(id已经能够独一确定了)

语法:选择器1选择器2选择器N{} 中间没有空格(没有空格严格是下一级,有空格,可以是下n级)

span元素,,同时class为p3的元素,设置 span.p3{ background-color: yellow; }

属性选择器:元素选择器的特殊用法

要求: html元素必需有一个属性,岂论属性是什么,且有值 <xxx nihao="wohenhao"/>(初始化)

感化:可以按照元素中的属性或属性值来拔取指定元素

语法1: 不用元素、引号

语法 界说
[属性名]   拔取含有指定属性的元素  
[属性名=属性值]   拔取含有指定属性名和属性值元素  
[属性名~=属性值]   选属性名包罗指定内容的值的元素  
[属性名|=属性值]   选属性名包罗指定内容的开头的值的元素  

案例:

[title~=flower]{ border:5px solid yellow; } <img src="" title="tulip flower" />

语法2:有元素名

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31291.html