CSS

2023-07-22 01:42| 来源: 网络整理| 查看: 265

一、内联式

一般都写在特定的标签元素里面来实现对元素的修改。例如将人生应该奋斗不止的字体颜色设置为红色

人生应该奋斗不止

并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

这里文字是红色。

二、嵌入式

嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。如下面的代码将文字设置为粉色：

这是演示实例 p{ color:pink; }

人生应该奋斗不止

三、外部式

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在标签内）使用标签将css样式文件链接到HTML文件内，如下面代码：

嵌入式css样式吉日兮辰良，穆将愉兮上皇。抚长剑兮玉珥，璆锵鸣兮琳琅。瑶席兮玉瑱，盍将把兮琼芳。蕙肴蒸兮兰藉，奠桂酒兮椒浆。扬枹兮拊鼓，疏缓节兮安歌，陈竽瑟兮浩倡。灵偃蹇兮姣服，芳菲菲兮满堂。五音纷兮繁会，君欣欣兮乐康。！

四、选择器(标签选择器，类选择器，ID选择器,全部选择器,子选择器)

定义：每一条css样式声明（定义）由两部分组成，形式如下：选择器{ 样式; } 在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码中的“body”就是选择器。

1标签选择器(就是直接对标签进行修改) ----权值为1

标签选择器其实就是html代码中的标签。如代码中的、、、

、。

p{ color:red; } 2类选择器(.+类选择器的名字+修改)-------权值为10 .color { color:red; }

人生应该奋斗不止

3ID选择器(#+ID选择器的名字+修改)------权值为100

在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

#color { color:red; }

人生应该奋斗不止

4全部选择器(*+修饰)//对于全部的标签元素进行修改 *{color:red; }

人生应该奋斗不止

5子选择器(父类名字+>+子类名字或父类名字+空格+子类名字）

.first span{color:red;} .food>li{ border:1px solid red;/*添加边框样式（粗细为1px，颜色为红色的实线）*/ } 6伪选择符(对于标签的状态的某种修饰，比如鼠标滑过标签) a:hover{color:red;}

ID选择器与类选择器的比较

相同点：可以应用于任何元素不同点：1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

【本文地址】

公司简介

联系我们