CSS样式详解：行内、外部与内部样式-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37426474/article/details/89451539

本文介绍了CSS样式的三种形式：行内样式、外部样式表和内部样式表，详细讲解了每种方式的基本语法。此外，还探讨了CSS基础选择器，包括标签选择器、类选择器、ID选择器以及多类名选择器的用法和注意事项，强调了类选择器和ID选择器的区别。

CSS样式

1.行内式（内联样式）：通过标签的style属性来设置元素的样式，基本语法如下：

<标签名 style = "属性1：属性值1；属性2：属性值2；属性3：属性值3;">内容<标签名>

2.外部样式表（外链式）：嵌入式是将所有的样式放在一个或多个以CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，基本语法格式如下：

<head>
    <link href = "CSS文件的路径" type = "text/CSS" rel = "stylesheet" />
</head>

3..内部样式表（内嵌式）：将CSS代码集中在HTML文档的head头部标签中，并且用style标签来定义，其基本语法格式如下：

<head>
    <style type = "text/CSS">
        选择器{属性1：属性值1；属性2：属性值2；}
    </style>
</head>

注意：style标签一般位于head标签之后，也可以把style放在HTML文档的任何地方

CSS基础选择器

标签选择器（元素选择器）

是指用HTML标签名称作为选择器，按照标签名称分类，为页面中的某一类标签指定统一的CSS样式。其基本语法格式如下

标签名{属性1属性值1；属性2：属性值2}或者
元素名{属性1属性值1；属性2：属性值2}

标签选择器最大的优点就是快速为页面中的同类型标签同意样式，同时这也是他的缺点，不能涉及差异化样式。

类选择器（可以选择一个或多个标签）

<head>
	<title>css/style</title>
	<style type="text/css">
		.week{
			color: blue;
			/*上面"."声明，下面class调用*/
		}
	</style>
</head>
<body>
	<div>明天是星期一</div>
	<div>明天是星期二</div>
	<div>明天是星期三</div>
	<div>明天是星期四</div>
	<div>明天是星期五</div>
	<div class="week">明天是星期六</div>

类选择器的基本语法如下:

.类名{属性1：属性值1；属性2：属性值2}

标签调用的时候使用class = “类名”即可。

tips：

1、长名称或词组可以使用中横线来为选择器命名

2、不建议使用“_”下划线来命名CSS选择器。

3.不要纯数字，中文等命名。

class = "nav" 指导航栏

多类名选择器

格式如下：<div class = "class1 class2">多类名</div>

注意：1、样式显示的效果跟HTML中类名的先后顺序没有关系，受CSS样式书写的上下顺序有关

2、各个类名中间用空格隔开

<div class = "nav">：这个div的名字就是nav，nav就是这个div

在一个div里面只能有一个class属性，

id选择器

#last{

color:blue;}

注意：类选择器和id选择器之间有什么不同：类选择器好比人的名字，是可以多次重复使用的

id选择器好比人的身份证号码，全中国是唯一的，不得重复，只能使用一次。

w3c标准规定，在同一个页面内，不容许有相同的名字的id对象出现，但容许出现相名字的class。

通配符选择器（使用较少）

<html>
<head>
	<title>通配符</title>
	<style type="text/css">
		*{
            /*   *号表示所有的选择器  */
			color: blue;
		}
	</style>
</head>
<body>
	<div>通配符选择器</div>
	<p>通配符选择器</p>
	<span>通配符选择器</span>
</body>
</html>

web学习之CSS

CSS样式