前端学习笔记_003_初识CSS_什么是行内式案例-CSDN博客

本文链接：https://blog.csdn.net/A_thirteen/article/details/108356082

本文介绍了CSS的基本概念和作用，包括设置页面样式、弥补HTML不足等方面。详细讲解了CSS的三种引入方式：行内样式、内嵌样式表和外部样式表，以及各自的特点和优缺点。此外，还详细阐述了CSS的基础选择器，如标签选择器、类选择器、id选择器和通配符选择器，强调了选择器在定位HTML元素样式上的重要性。

摘要由CSDN通过智能技术生成

初识CSS_01

学习目标

理解使用CSS的目的，及其作用。
理解CSS的三种引入方式。

1、CSS初识

概念
CSS（Cascading Style Sheets），通常称为CSS样式表或层叠样式表（级联样式表）
作用
1、主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式边距等）以及版面的布局外观显示样式。

2、CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背静的控制及整体的排版等，而且还可以针对不同的浏览器设置不同的样式。

2、使用CSS的原因及其作用

HTML的不足
1、HTML不能满足设计者的需求。
2、操作HTML属性很不方便。
3、HTML里面添加样式，带来的是无尽的臃肿与繁杂。
CSS的作用
CSS使网页更加丰富多彩，布局更加灵活多变。
CSS使HTML从样式中脱离，使HTML专于做结构呈现，样式交给了CSS。

3、引入层叠样式表（书写位置）

行内式（内联样式）
内部样式表（内嵌样式表）
外部样式表（外链式）

3.1、行内式（内联样式）

概念
称为行内样式、行间样式。
通过标签的style属性来设置元素的样式。
语法

<!-- 行内式 -->
 <body>
  <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3 ... ">内容
  </标签名>
 </body>

案例

<div style="color: pink; font-size: 18px;" >内容</div>

缺点
没能实现结构与样式相分离。

3.2、内部样式表（内嵌样式表）

概念
将CSS代码集中写在HTML文档的head标签中，并且用style标签定义。
语法

<head>
  <style type="text/css">
   选择器 {
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;
    ... ...
   }
  </style>  
 </head>

案例

<!-- 内部样式表 -->
<style type="text/css">
   span {
    color: brown;
    font-size: 20px;
   }
  </style>
  
<span>文字内容</span>

缺点
只能实现结构与样式部分分离。

3.3、外部样式表（外链式）

概念
将所有的样式存放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
语法

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

link标签的属性
属性	作用
rel	定义当前文档与链接文档之间的关系，这里指定"stylesheet"，表示链接文档是一个样式表文件。
type	定义所链接文档的类型，这里指定"text/css"，表示链接外部文件为CSS样式表。（可以省略）
href	定义外部样式表的URL，可以是相对路径也可以是绝对路径。

案例

/* CSS文件 */
h2 {
 color: pink;
}

<!-- 外部样式表 -->
  <link rel="stylesheet" type="text/css" href="style.css"/>
<h2>标题2</h2>

优点
实现了格式与样式相分离，因此一个CSS文件可以被多个HTML文档调用。

总结

在这里插入图片描述

4、CSS基础选择器

目标

能说出选择器的作用，并能使用基础选择器添加样式。
理解id选择器与类选择器的区别。

选择器的作用就是找到特定的HTML页面元素。

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

概念
标签选择器（元素选择器）是指以HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法

标签名 {
				属性1:属性值1;
				属性2:属性值2;
				属性3:属性值3;
				... ...
			}

优点
能快速为页面中同类型的标签统一样式。
缺点
不能设计差异化样式。

4.2、类选择器

概念
类选择器使用".类名"进行标识
语法

/* 类选择器 */
			.类名 {
				属性1:属性值1;
				属性2:属性值2;
				属性3:属性值3;
				... ...
			}

案例

.one {
	font-size: 18px;
	color: #FFC0CB;
}

<p class="one">类选择器测试</p>

优点
可以为元素标签定义单独的样式，可以选择一个或多个标签。
实践

在这里插入图片描述

<span class="blue">G</span>
		<span class="red">o</span>
		<span class="orange">o</span>
		<span class="blue">g</span>
		<span class="green">l</span>
		<span class="red">e</span>

.blue {
	color: blue;
	font-size: 100px;
}
.green {
	color: green;
	font-size: 100px;
}
.orange {
	color: orange;
	font-size: 100px;
}
.red {
	color: red;
	font-size: 100px;
}

4.3、类选择器特殊用法-多类名

实例

.font100 {
	font-size: 100px;
}
.blue {
	color: blue;
}
.green {
	color: green;
}
.orange {
	color: orange;
}
.red {
	color: red;
}

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

<!-- 多类选择器 -->
		<span class="blue font100">G</span>
		<span class="red font100">o</span>
		<span class="orange font100">o</span>
		<span class="blue font100">g</span>
		<span class="green font100">l</span>
		<span class="red font100">e</span>

4.4、id选择器

概念
id选择器使用#id名进行标识。
语法

/* id选择器 */
			#id名 {
				属性1:属性值1;
				属性2:属性值2;
				属性3:属性值3;
				... ...
			}

注意：用法与类选择器用法一致，但id具有唯一性。（原则上只能调用一次，用于特定唯一标签与JS配合使用）

案例

#one {
	color: #A52A2A;
	font-size: 24px;
}

<!-- id选择器 -->
		<span id="one">id选择器测试</span>

4.5、通配符选择器

概念
通配符选择器用 * 表示，* 就是选择页面中所有标签。
语法

/* 通配符选择器 */
			* {
				属性1:属性值1;
				属性2:属性值2;
				属性3:属性值3;
				... ...
			}

案例

 * {
	margin: 0;
	padding: 0;
}

注意
通配符会匹配页面所有元素，降低页面响应速度，不建议随便使用。

选择器总结

在这里插入图片描述
注意： 无具体语义的 div和span不推荐使用标签选择器。