CSS层叠样式表单_表单层叠效果-CSDN博客

本文链接：https://blog.csdn.net/qq_51946936/article/details/120444709

CSS介绍

CSS作用是什么？？
• 给页面中的HTML标签设置样式
写在哪里？
• css写在style标签中，style标签一般写在head标签里面，title标签下面
在这里插入图片描述

<style>
        p {
            /* css的属性 文字颜色 */
            color:red;
            /* 文字大小 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: rgb(20, 16, 16);
            /* 宽度 */
            width: 400px;
            /* 高度 */
            height: 100px;
        }
    </style>
</head>
<body>
    <p>hello   爱学习的小宋同志</p>
</body>

效果图：
在这里插入图片描述

在这里插入图片描述
内嵌式：

<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>
        p{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <p>马嘉祺</p>
    <p>宋亚轩</p>
</body>

外联式：<link>写在<head>里
在这里插入图片描述

<link rel="stylesheet" href="./02.css">

行内式：

<body>
    <p style="color: blueviolet;">马嘉祺</p>
    <p>宋亚轩</p>
</body>

效果图
在这里插入图片描述

基础选择器

目标：理解选择器的作用，能够使用基础选择器在 HTML 中选择元素

学习路径：

标签选择器
类选择器
id选择器
通配符选择器

选择器的作用：选择页面中对应的标签（找她），方便后续设置样式（改她）
在这里插入图片描述

 <style>
        p{
            color:red;
        }
        div{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <p>巴蜀中学</p>
    <p>小贺</p>
    <div>小张张</div>
    <div>小宋宋</div>
    <div>
        <div>
            <div>
                <div>
                        <p>小刘</p>
                 </div>
            </div>
        </div>
    </div>
</body>

效果图：
在这里插入图片描述

类选择器

结构：.类名 { css属性名：属性值； }
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：

所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

 <style>
        .red {
            color: red;
        }
        .yellow{
            color: yellow;
        }
        .blue{
            color: blue;
        }
    </style>
</head>
<body>
    <p class="red">hello   爱学习的小孙同志</p>
    <p class="yellow">hello   爱学习的小毛同志</p>
    <p class="blue">hello   爱学习的小宋同志</p> 
</body>

效果图·：
在这里插入图片描述

.big{
            font-size: 30px;
        }

 <p class="red big">hello   爱学习的小孙同志</p>

效果图：
在这里插入图片描述

id选择器

结构：#id属性值 { css属性名：属性值； }
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
一个标签上只能有一个id属性值
一个id选择器只能选中一个标

  <style>
     #red{
         color: red;
     }
     #blue{
         color: blue;
     }
    </style>
</head>
<body>
    <p id="red" >爱学习的小孙同志</p>
    <p id="blue">爱学习的小毛同志</p>
</body>

在这里插入图片描述

补充：类与id的区别

class类名与id属性值的区别
• class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
类选择器与id选择器的区别
• 类选择器以 . 开头
• id选择器以 # 开头
实际开发的情况
• 类选择器用的最多
• id一般配合js使用，除非特殊情况，否则不要使用id设置样式
• 实际开发中会遇到冗余代码的抽取（可以将一些公共的代码抽取到一个公共的类中去）

通配符选择器

结构：* { css属性名：属性值； }
作用：找到页面中所有的标签，设置样式
注意点：

开发中使用极少，只会在极特殊情况下才会用到
在基础班小页面中可能会用于去除标签默认的margin和padding

总结

在这里插入图片描述

字体和文本样式

在这里插入图片描述

p{
            color:red;
            font-size: 30px;
        }

<p>巴蜀中学</p>

在这里插入图片描述

 font-weight: bold;
  font-weight: 700;

在这里插入图片描述

 font-style: italic;

在这里插入图片描述

 font-family: 楷体;

在这里插入图片描述

  font-family: 楷体,宋体,sans-serif;

在系统内查找字体，找不到查下一个，最后到sans-serif;系统默认字体。

在这里插入图片描述
图片代码结果颜色为蓝色，会覆盖掉

在这里插入图片描述
顺序要求需要注意swsf

 font: italic 700 30px 楷体,宋体,sans-serif;

在这里插入图片描述

总结：

在这里插入图片描述

文本样式

文本缩进：text-indent
文本水平对齐方式：text-align
文本修饰：text-decoration

在这里插入图片描述

<style>
        p{
 			/* 首行缩进 数字+px */
            text-indent: 60px;
            }
</style>

在这里插入图片描述

 /* 数字+em 1em = 当前标签的font-size的大小*/
            text-indent: 2em;

在这里插入图片描述
效果相同，推荐第二种

<head>
 <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: slateblue;
            /* 文本水平对齐：text-align */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        我是一行文本
    </div>
</body>
</html>

在这里插入图片描述

<style>
 body{
            text-align: center;
        }
    </style>
</head>
<body>
    我是一行文本
</body>

效果图：居中
在这里插入图片描述

div{
            text-decoration: underline;
        }

在这里插入图片描述

   text-decoration: line-through;

在这里插入图片描述

  text-decoration: overline;

在这里插入图片描述
标签去掉默认下划线

 a{
      text-decoration: none; 
}
============
<a href="#">我们俩</a>

在这里插入图片描述

line-height: 40px;

距离顶40px
在这里插入图片描述

.box{
            width: 400px;
            height: 400px;
            background-color: slateblue;
            /* 文本水平对齐：text-align */
             text-align: center;
             /* line-height: 40px; */
             line-height: 400px;

        }
 ===================
  <div class="box">
     末路狂花
   </div>

box的高度，取上下间距居中（对于单行文本而言）
在这里插入图片描述