笔记记录：04初识css3

最新推荐文章于 2024-09-06 11:00:54 发布

旡面

最新推荐文章于 2024-09-06 11:00:54 发布

阅读量968

点赞数

文章标签： css3 css 前端 html

本文链接：https://blog.csdn.net/cat113488637/article/details/123491932

版权

本文介绍了CSS3的基础概念，如层叠样式表(CSS)的工作原理，div元素的用法，以及CSS的引入方式（行内、内部、外部）。重点讲解了选择器（ID选择器、类选择器、标签选择器）及其高级用法，包括后代选择器、子类选择器和伪类选择器。

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

0、前端三驾马车

1、什么是css3

Cascading Style Sheet

层叠：多层，说明可以通过多个样式去表现

可以理解成一个正方体，他中间穿插多层样式。

样式：具体的各种修改展示形式的表现。

表：表格

2、DIV

 <style type="text/css">
         div{
             border: 1px red solid;
         }
         span{
             border: 1px red solid;
         }
     /* 
         div属于块级元素，每次出现新的div标签会进行换行操作
         span属于行内元素，它在出现新的span的时候不会进行换行操作 
     */
     </style>
     <div>xxx</div>
     <div>xxx</div>
     <div>xxx</div>
     <div>xxx</div>
     <span>xxx</span>
     <span>xxx</span>
     <span>xxx</span>
     <span>xxx</span>

效果如上图

3、css基本语法结构s

 <style>
 选择器 { 声明1;
         声明2;
          ……  
     }
 </style>

4、三种引入css的样式

1、行内样式

你好css3

<h2 style="font-size:20px; color:blue;">你好css3</h2>

即在html标签中，使用标签的style属性，直接在其中编写声明。不需要写选择器。因为我们能只会选择当前的标签

2、内部样式表

<head>
     <style>
         h1{
             font-size: 22px;
             color: brown;
         }
     </style>
 </head>
 <body>
     <h1>你好css3</h1>
 </body>

3、外部样式表

CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式

3、1

<link>引入

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

href引入路径，一下内容需要写死。rel="stylesheet" type="text/css"

3、2

@import引入

 @import url("import.css");

url指向路径

链接式与导入式的区别 <link/>标签属于XHTML，<link/>标签除了引入css标签，还可以引用其他资源，如RSS。@import是属于CSS2.1 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

5、css引入

行内样式>内部样式表>外部样式表就近原则

优先看权限大的，按照权限大的样式来。

6、css选择器

6、1基本选择器

 <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>Document</title>
     <style>
         /* 类选择器 */
         /* 当标签存在属性class并且该属性与我们写的class属性相同时，会被选择 */
         /* 类选择器使用“"."+class的名称”这种形式 */
         .redcolor{
             font-size: 22px;
             color: red;
         }
         .bluecolor{
             font-size: 22px;
             color: blue;
         }
         /* id选择器 */
         /* 当标签存在属性id并且该属性与我们写的id属性相同时，会被选择 */
         /* id选择器使用“"#"+id的名称”这种形式 */
         #h1id1{
             color: pink;
         }
          /* 标签选择器 */
         h1{
             color: yellow;
         }
     </style>
 </head>
 <body>
     <h1 class="redcolor">你好css</h1>
     <h2 class="bluecolor">你好css</h2>
     <h3>你好css</h3>
     <h1 id="h1id1" class="redcolor">你好css</h1>
     <h2>你好css</h2>
     <h3>你好css</h3>
 </body>

无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级。

 <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>Document</title>
     <style>
         span {
             color: red;
         }
         .ye{
             color:yellow; 
         }
         #d6h{
             color:blue;
         }
     </style>
 </head>
 <body>
     <div>
             制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span class="ye" id="d6h">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
         </div>
 </body>

<style>
         span {
             color: red;
         }
         .ye{
             font-size: 30px;
         }
         #d6h{
             font-family: "宋体";
         }
     </style>
 </head>
 <body>
     <div>
             制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span class="ye" id="d6h">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
             制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
         </div>
 </body>

6、2高级选择器

后代选择器

<style>
         div h1{
             color: red;
         }
     </style>
 </head>
 <body>
     <h1>test123123</h1>
     <div><h1>test123123</h1></div>
 </body>

只需要被包裹，无论中间是否被其他的标签包裹，此时俩种颜色都会变成红色

子类选择器

<style>
         body>h1{
             color: red;
         }
     </style>
 </head>
 <body>
     <h1>test123123</h1>
     <div><h1>test123123</h1></div>
 </body>

必须要上一级的标签是指定的第一个元素。此时只有第一个变成红色，因为第二个中间还有一层<div>

"他不是body的儿子，他是body的孙子"

所以不会被选中

相邻兄弟选择器

<style>
         .active+h1{
             color: red;
         }
     </style>
 </head>
 <body>
     <h1 class="active">test123123</h1>
     <div>
         <h1 class="active">
             test1
         </h1>
         <h1 class="active">
             test2变色
         </h1>
         <h1>
             test3变色
         </h1>
         <h1 class="active">
             test4
         </h1>
         <h1>
             test5变色
         </h1>
         <h1>
             test6
         </h1>
     </div>
 </body>

首先自身需要满足第二个条件（条件可以是任何的基本选择器），其次要求他紧贴着上面的那个元素是满足第一个条件（要求为同一个”辈分“）。

通用兄弟选择器

<style>
         .active~h1{
             color: red;
         }
     </style>
 </head>
 <body>
     <h1 class="active">test123123</h1>
     <div>
         <h1 class="active">
             test1
         </h1>
         <h1 class="active">
             test2变色
         </h1>
         <h1>
             test3变色
         </h1>
         <h1 class="active">
             test4
         </h1>
         <h2>
             test5他是h2标签
         </h2>
         <h1>
             test6
         </h1>
     </div>
 </body>

和相邻兄弟选择器不同，只要满足第一个条件之后的并且自身满足第二个条件，就会被选择

6、2、2 、伪类选择器

首元素选择器

<style>
         h1:first-child{
             color:red;
         }
     </style>
     <!-- 
         只有test01变色了，因为只有test01包裹的h1
         同是满足即使当前包裹情况的第一个元素，又是h1标签
         所以只有他变色
      -->
 </head>
 <body>
 <div>
     <h1>test01</h1>
     <h1>test02</h1>
     <h1>test03</h1>
     <h1>test04</h1>
     <h1>test05</h1>
 </div>
 <h1>test01</h1>
 <div>
     <h2>test06</h2>
     <h1>test07</h1>
 </div>
 </body>

最后一个元素选择器

  <style>
         h1:last-child{
             color:blue;
         }
     </style>
 </head>
 <body>
 <div>
     <h1>test01</h1>
     <h1>test02</h1>
     <h1>test03</h1>
     <h1>test04</h1>
     <h1>test05</h1>
 </div>
 <h1>test01</h1>
 <div>
     <h2>test06</h2>
     <h1>test07</h1>
 </div>
 </body>

<body>标签中的最后一个元素不会被选中

first-child与first-of-type的区别

E:first-child是找到第一个元素，是否是满足的类型（E）。

E:first-of-type是优先寻找所有的E类型，之后去将找到的第一个给渲染。

6、2、3、属性选择器

 <style>
         input[name*="ord"]{
         color:red;
     }
     </style>
 </head>
 <body>
     <input type="text" name="userName"/>
     <input type="text" name="userPassWord"/>
     <input type="text" name="petNmae"/>
 </body>

旡面

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记记录：04初识css3

0、前端三驾马车1、什么是css3Cascading Style Sheet层叠：多层，说明可以通过多个样式去表现可以理解成一个正方体，他中间穿插多层样式。样式：具体的各种修改展示形式的表现。表：表格2、DIV<style type="text/css"> div{ border: 1px red solid; } span{ borde...
复制链接

扫一扫