您的位置：首页 > 博客中心 > 前端开发 >

CSS基础（一）-添加CSS代码的三种方式（内联、内部、外部）、CSS标签选择器（标签、类、id）

时间：2022-04-11 14:45

CSS：Cascading Style Sheet的缩写，意思是层叠样式表

作用：美化页面，可设置页面上各种元素的样式，包括颜色、大小、位置等等，使页面变得更好看。

1.添加CSS代码的三种方式：内联、内部、外部

内联：在标签的style属性中添加样式代码（使用较少）
- 弊端：不能复用

内部：在head标签里面添加style标签，在标签内部写样式代码（接下来主要以这个进行讲解）
- 弊端：只能在当前页面复用

外部：在单独的css文件中写样式代码，在html页面中通过link标签引入，可以实现多页面复用（使用最多）

代码如下：

（1）cssDemo01.html

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <link rel="添加CSS代码的三种方式：内联、内部、外部" href="test.css"> 
 <title>cssDemo01</title>
     
 <style type="text/css">
 /* 内部样式表要添加style标签，指定type="text/css"  */
 p{
     font-size: 30px;
     color:orange;
 }
 h3{
     font-size:40px;
     color:green;
 }
 </style>
     
 </head>
 <body>
 <!-- 
     1、内联样式表：也称内嵌样式表、行内样式表
     在标签里直接书写，标签中写style属性，属性用""括起来，多个属性之间用;隔开
     缺点：不能复用，今后使用较少。
     此处以div标签进行演示：<div>内容</div>
 -->
 <div>内联样式表效果</div>
 <div src="http://image.mamicode.com/info/202107/20210705182450176772.png"  loading="lazy" data-mark="*">

格式：标签名{}


作用：选择页面中所有指定名称的标签


2.2 类选择器


格式：.class{}，其中class为类名


作用：选择页面中同一类的多个标签，需要给标签添加class属性


2.3 id选择器


格式：#id{}，其中id为id名


作用：选择页面中某一个标签时使用，需要给标签添加id属性，id名不能重复


代码测试：
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>基本选择器</title>
 ?
 <style type="text/css">
 /* 内部样式表  */
 /* 1、标签选择器（优先级最低）   */
 li{
     font-size:30px;
     color:blue;
 }
 ?
 /* 2、类选择器（优先级居中）    */
 .bapi{
     color:green;
 }
 ?
 /* 3、id选择器（优先级最高）    */
 #third{
     color:gold;
 }
 ?
 </style>
 ?
 </head>
 <body>
     <ul>
         <li id="first">苹果</li>
         <li id="second">西瓜</li>
         <li class="bapi">橘子</li>
         <li class="bapi">香蕉</li>
         <li>梨子</li>
         <li class="bapi" id="third">荔枝</li>
     </ul>
 </body>
 </html>
显示效果：


优先级：id选择器 >类选择器 > 标签选择器