css入门

01.css的引入方式
02.背景色
03. 文本的常用样式
04. 常用选择器![在这里插入图片描述](https://file.cfanz.cn/uploads/png/2022/02/13/16/03Tf803606.png)CSS（层叠样式表）选择器是 CSS 规则的一部分，用来指定需要设置样式的 HTML 元素。通过选择器可以实现 CSS 对 HTML 元素的一对一、一对多、多对一的控制
05.任务19 20 21 26 29
总结

提示：

提示：以下是本篇文章正文内容，下面案例可供参考

01.css的引入方式

在这里插入图片描述

行内样式

直接使用HTML元素的style属性引入CSS模式

内嵌样式

使用< style></ style>标签引入样式

<style>
 p {
  color: #333; 
  font-size: 16px;
   }
    </style>

外部样式

链接样式（最常用）

在< head>< /head>标签中，使用< link />标签链接外部的 CSS 文件

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

导入样式

使用@import()引入CSS文件

// 在 HTML 文件中导入 
<style> @import url(style.css); </style> 
// 在 CSS 文件中导入
 @import url(style.css);

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

02.背景色

在前端开发过程，为了页面的美观，往往都会给HTML元素添加背景，使用CSS层叠样式表背景属性在美化页面的同时，实现页面的表现和内容分离。

属性	属性值	说明
background-color	颜色值，如 rgb，rgba，十六进制表示等，设置为 transparent 表示背景透明	设置背景颜色
background-image	url( filepath ) 或 none	设置背景图像
background-size	宽高- -百分比宽高- -contain- -cover	设置背景图片尺寸
background-repeat	repeat- - repeat-x- - repeat-y	设置背景图片重复方式
background-position	top left - -top center- - center 等	设置背景图片的位置

简写属性可以在一个属性声明中设置一个或者多个背景属性，常用的属性设置加上表中属性

 background: #ff0000 url('smiley.gif') no-repeat cover;

background-size

1.contain

保持图片纵横比例缩放背景图片，是背景图片能够在背景区域完全显示，有可能导致背景图片部分无法显示

2.cover

保持图片纵横比不变，最大程度覆盖背景区域有可能导致背景图片部分区域无法显示

background-repeat

1.repeat（默认）

允许水平和垂直方向重复（平铺）背景图片

2.repeat-x

只允许水平方向重复（平铺）背景图片

3.repeat-y

只允许垂直方向重复（平铺）背景图片

03. 文本的常用样式

在这里插入图片描述

1. color 属性

2.font-size 属性

3.font-weight 属性:用于设置文本的粗细

4 font-family 属性

用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高（从左到右）。如果浏览器不支持第一个字体，则会尝试下一个，以此类推

font-family："Times New Roman", Georgia, Serif;

5 text-align 属性:用于设置文本的水平对齐方式

6 line-height 属性:用于设置行间距

可设置的值如下 :

7 text-indent 属性:用于指定首行缩进值

8 letter-spacing属性:用于设置字间距

用于设置字间距，设置固定值为字间距，如 10px

9.word-spacing 用于指定文本中单词之间的间距

用于指定文本中单词之间的间距，设置固定值为单词间距，如 10p

10. text-decoration

text-decoration-line:设置要使用哪种文本装饰的类型（无线条 none,下划线 underline、上划线overline、删除线line-through）

11 text-transform用于设置文本大小写字母

12 writing-mode设置文本在水平或垂直方向的排布方式

13 white-space用于设置文本的空白符处理方式

04. 常用选择器CSS（层叠样式表）选择器是 CSS 规则的一部分，用来指定需要设置样式的 HTML 元素。通过选择器可以实现 CSS 对 HTML 元素的一对一、一对多、多对一的控制

1.通配选择器

可以与其他选择器相结合，选择某元素下的所有元素

.box * { color: #000; }

由于每个浏览器对元素的默认边距不一致，通配选择器常用于 reset 样式文件中，覆盖浏览器的默认样式

* { margin: 0; padding: 0; border: 0; }

2.标签选择器

通过标签名匹配，匹配文档中所有为此标签名的元素

 p {
 	 color: red; 
  }

3.id 选择器

通过井号【#】来定义 id 选择器，根据元素的 id
属性匹配（精确匹配）元素

#box {
	 width: 300px;
 }

4.类选择器（属性选择器）

通过点【.】来定义类选择器，根据元素的 class 属性匹配（精确匹配）元素

 .container { 
	 height: 100px; 
 }

5.组合选择器

包括四种组合方式：后代选择器、子代选择器、相邻选择器、兄弟选择器

#box>.nav p { 
	color: blue; 
}

代码如下（示例）：

<!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>
       * {
        margin: 0;
        padding: 0%;     
        list-style: none;/*通配*/   
    }
    p{
        color: #ffaa0f;
    }
    .C{
        color: red;
    }
    #big{
        color: rgba(29, 219, 61, 0.5);
    }
    /*后代选择器
        写的越具体，精准度越高
        div p{
        color: rgba(219, 255, 16, 0.733);
    }
    */
    
    div li p{
        color:blueviolet;
    }
    /*群组选择器
        用逗号隔开，
    */
  
    h1,span{
        color: rgb(52, 0, 100);
        text-transform: capitalize;
    }
    div>p{
        /*子代：直接子代*/
        color: deeppink;
    }

    /*属性选择器*/
    [class]{
        color: red;
    }
    [class = "yes"]{
        color: chartreuse;
    }

   </style> 

</head>
<body>
    <p>123</p>
    <!-- 同标签，重起名字class，引用加点+名字=.名字 -->
    <p class="C">csdn</p>
    <p class="" id="big">C1认证过了</p>
    <!--引用id，需要用# 
         一个id名，在同一个HTML文件只能定义一次，可以多次应用 -->
    <ul>
        <li>看山是山，看水是水</li>
        <li class="C">看山不上山，看水不喝水</li>
    <li>看山还是山，看水还是水</li>
    </ul>
    <h1>welcome to my world!</h1>
    <span>选项1</span>
    <span class="ok">选项2</span>
    <span class="yes">选项3</span>
    <span>选项4</span>


    <p>人间凡尔赛</p>
    <div>
        <p>c4认证</p>
        <ul>
            <li>
                <p>网络</p>
            </li>
            <li>
                <p>进制</p>
            </li>
            <li>
                <p>web</p>
            </li>
        </ul>
        <p>C5认证</p>
    </div>
</body>
</html>

<!-- 优先级 id（#） > class（.） > tag(ul,p,li,span) -->

05.任务19 20 21 26 29

这是文件，需要的可以私信我要文档
记得一键三连哟