WEB01_Day02(上)-CSS概述、CSS基本选择器（标签、类、id）、CSS组合选择器（分组、属性、子孙后代、子元素、伪类、任意）

一、CSS概述

1.1 CSS定义：

　　CSS的中文含义是层叠样式表(CasCading Style Sheet)

1.2 CSS的作用

　　CSS可以使当前页面更加美观，可以通过CSS对于页面中的标签元素进行设置，添加大小，颜色，定义等相关操作从而让页面中的元素显示的更加合理美观，用户的体验感也会更好。

1.3 使用CSS

　　总共有三种方案可以进行添加CSS代码

  • 内联/内嵌/行内(最不常用)：在html页面中的标签添加对应的style样式属性，然后进行设置相关的样式内容。

  • 内部方案(相对使用)：在当前html页面的head标签中进行添加style样式设置。

在教学过程中，内部样式方案使用较多，原因就是每当书写一个html页面的时候，避免同学们频繁的切换不同的文件书写代码，所以在教学中会使用内部方案较多。

  • 外部方案(推荐使用)：就是单独新建一个css文件，在这个css文件中书写相关的样式，并且这个css文件需要在被使用到html中进行引入。

　　新建day03文件夹，在该文件夹下新建css01.html页面

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSS01</title>
 ​
     <style type="text/css">
         /* 内部样式设置 */
         p {
             color: deeppink;
             font-size: small;
             background-color: gold;
         }
         h6 {
             color: gold;
         }
     </style>
     <!-- 使用link标签进行引入外部的css文件 -->
     <link rel="stylesheet" href="mycss.css">
 </head>
 <body>
     <!-- 
         内嵌样式设置
         使用方式：在开始标签中添加style属性，并且在属性值中可以添加多个样式。
         弊端：样式是不能进行重复使用的，实际开发时这种方式基本不用。
      -->
     <div style="font-size: 88px;color: blue;">内嵌样式设置样式1</div>
     <div style="color: forestgreen;">内嵌样式设置样式2</div>
     <!-- 
         默认字体的大小是16px,并且字体的颜色是黑色
      -->
     <p>内部样式设置2</p>
 ​
     <span>外部样式设置</span>
 ​
     <!-- 
         针对于样式的设置，原则是就近原则，内联/内嵌的优先级最高，
         内部和外部设置的样式，谁比较设置靠后，谁设置的样式就生效
      -->
     <h6>优先级</h6>
 </body>
 </html>

在day03文件夹，新建mycss.css样式

 @charset "UTF-8";
 span {
     color: skyblue;
 }
 h6 {
     color: seagreen;
 }

 

二、CSS基本选择器

2.1 标签选择器

  • 格式: 标签名{}

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

2.2 类选择器(前端开发时使用较多)

  • 格式:.class{}

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

2.3 id选择器

  • 格式: #id{}

  • 作用:选择页面中某一个标签时使用，需要给标签添加id属性

2.4 优先级

　　id选择器>类选择器>标签选择器

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSS02</title>
     <style type="text/css">
         /* id选择器 */
         #nowteacher {
             color: darkgreen;
         }
         /* 类选择器 */
         .leader {
             color: blueviolet;
         }
         /* 标签选择器 */
         li {
             color:blue;
             font-size: 25px;
         }
     </style>
 </head>
 <body>
     <h3>Java教研一部的教师团队</h3>
     <ul>
         <li class="leader">苍老师</li>
         <li class="leader">赵秀佳</li>
         <li>李大帅</li>
         <li>邓雅宁</li>
         <li class="leader" id="nowteacher">包佳奇</li>
         <li>张鹏</li>
     </ul>
 </body>
 </html>

 

三、CSS组合选择器

3.1 分组选择器

  • 格式:div,#abc,.c1{}

  • 作用:将多个选择器合并成一个选择器

3.2 属性选择器

  • 格式:p[属性名='属性值']{}

  • 作用:指定某个属性为指定值得元素样式 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>分组选择器和属性选择器案例</title>
     <style type="text/css">
         /* 分组选择器 */
         div,h3,h4,#base,.web{
             color: skyblue;
         }
         /* 属性选择器 */
         a[href='https://www.tmooc.cn/'] {
             color: red;
         }
     </style>
 ​
 </head>
 <body>
     <div>
         <h2>达内在线教育</h2>
     </div>
     <h3>Java互联网架构课程</h3>
     <h4 class="jsd">技术点</h4>
     <ol>
         <li id="base">Java基础知识</li>
         <li id="api">Java API</li>
         <li class="web">Web前端</li>
         <li>MySQL</li>
         <li>Servlet</li>
         <li>框架</li>
     </ol>
 ​
     <a href="https://www.tmooc.cn/">达内慕课网</a>
     <button>这是一个按钮</button>
 ​
 </body>
 </html>

3.3 子孙后代选择器

  • 格式:div div span{}

  • 作用:匹配div里面的div里面的所有span(包括子孙后代)

最终是选中span元素，只要span元素的父级有两个div元素即可。

3.4 子元素选择器

  • 格式:div>div>span

  • 作用: 匹配div里面的div里面的span子元素

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>子孙后代选择器和子元素选择器案例</title>
     <style type="text/css">
         /* 子孙后代选择器 */
         div div span {
             color: red;
             font-size: 35px;
         }
         /* 子元素选择器 */
         div>div>p {
             color: green;
             font-size: 40px;
         }
     </style>
 </head>
 <body>
     <div>
         <div>
             <h3>
                 <span>希望同学们每天都来坚持听直播课</span>
             </h3>           
         </div>
     </div>
 ​
     <div>
         <div>
             <p>同学进入直播间以后千万不要中途退出直播间</p>
         </div>
     </div>
     
 </body>
 </html>

3.5 伪类选择器

  • 格式: a:伪类选择器{}

    • 未访问状态link

    • 访问过状态visited

    • 悬停状态hover

    • 点击状态active

  • 作用: 在指定元素的不同状态时出现的不同样式

3.6 任意选择器

  • 格式: *{}

  • 作用:选中所有元素,一般会组合其他选择器使用

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>伪类选择器和任意选择器</title>
     <style type="text/css">
         /* 伪类选择器 */
         /* 未访问状态 */
         a:link {
             color: red;
         }
         /* 访问过的状态 */
         a:visited {
             color: green;
         }
         /* 悬停状态 */
         a:hover {
             color: blue;
         }
         /* 点击状态 */
         a:active {
             color: yellow;
         }
 ​
         /* 任意选择器 */
         * {
             color: teal;
         }
 ​
     </style>
 </head>
 <body>
     <h2>第三阶段</h2>
     <h3>前端内容</h3>
     <a href="https://www.tmooc.cn/">链接</a>
 </body>
 </html>


posted @ 2021-08-05 23:40  Coder_Cui  阅读(149)  评论(0)  编辑  收藏  举报