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

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 style="font-size:20px">内联样式表效果:添加字体大小</div>
 <div style="color:red">内联样式表效果:添加字体颜色</div>
 <div style="font-size:30px;color:blue">内联样式表效果:添加字体大小和颜色</div>
 ?
     
 <!--
  2、内部样式表
  在当前html文件中编写,在head标签中编写style标签
  注释为:/* */
  此处以p标签进行演示:上面p{}设置属性,下面<p>内容</p>显示效果
 -->
 <p>内部样式表效果</p>
   
     
 <!--
  3、外部样式表
  需要在外部创建css文件,将内容写到该文件中,并在当前文件中引入这个css文件
  此处以span标签进行演示:<span>内容</span>
     外部css文件为:test.css
 -->
 <span>外部样式表效果</span>
 ?
 <!-- 内联样式表优先级最高,内部样式表与外部样式表采用就近原则 -->
 <h3 style="font-size:20px;color:red">优先级测试</h3>
 ?
 </body>
 </html>

(2)test.css

 @CHARSET "UTF-8";
 span{
  font-size:50px;
  color:yellow;
 }
 h3{
  font-size:60px;
  color:blue;
 }

显示效果

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

 

2.CSS基本选择器

2.1 标签选择器

  • 格式:标签名{}

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

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>

显示效果

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

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

 

 

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

上一篇:Java的序列化


下一篇:【Git报错】error: failed to push some refs to 'https://gitee.com/lhm8013609/mldl_-learning-notes'