CSS学习笔记一 ——详细附图、入门必看

最新推荐文章于 2022-08-28 22:42:25 发布

焦妮敲代码

最新推荐文章于 2022-08-28 22:42:25 发布

阅读量787

点赞数

分类专栏： # html+css 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_45890970/article/details/121683109

版权

html+css 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

1. 基础认知

初始

CSS是层叠样式表。
css写在style标签中，style标签一般写在head标签里面，title标签下面。
(1)选择器是查找标签的，
css的注释：/* */
例子：

<!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>Document</title>
    <style>
        p{
            color: brown;  /*字体颜色变红色*/
            font-size: 30px; /*字变大  px:像素*/
            background-color:cornflowerblue; /*背景颜色*/
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p>我喜欢你</p>
</body>
</html>

注意：css中与尺寸相关都要写像素单位px。

显示如下：
在这里插入图片描述

引入方式

1.引入方式
在这里插入图片描述
2.外联式
1.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>Document</title>
    <!-- rel关系为样式表 -->
    <link rel="stylesheet" href="./2.css">
</head>
<body>
    <p>我喜欢你</p>
</body>
</html>

2.css文件内容

/* 选择器 {} */
p{
    color: red;
}

显示效果
在这里插入图片描述
3.行内式：写一个标签只能控制一个标签

<!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>Document</title>
</head>
<body>
    <p style="color:red;font-size:30px;">我喜欢你</p>
    <p>我喜欢你</p>
</body>
</html>

显示效果：
在这里插入图片描述
4.三种引用方式适合的场景

2. 基础选择器

标签选择器

标签选择器是以标签名命名的选择器。

类选择器

1.相关知识
在这里插入图片描述
2.例子

<!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>Document</title>
    <style>
        .blue{
           color:cornflowerblue;
        }
        .size{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 一个标签可以使用多个类名，需要空格隔开即可 -->
    <p class="blue size">我喜欢你</p>
    <p class="blue">Joney</p>
</body>
</html>

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

id选择器

1.配合js加动态效果使用比较好。
在这里插入图片描述

通配选择器

1.相关知识
在这里插入图片描述
2.例子

<!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>Document</title>
    <style>
       *{
            color:brown
       }
    </style>
</head>
<body>
    <p>我</p>
    <span>你</span>
    <div>他</div>
    <h1>她</h1>
</body>
</html>

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

3. 字体和文本样式

font

1.font-size属性：数字+px。一定要记得单位，没有单位则无效。（谷歌浏览器默认字体大小是16px）
2.font-width属性：
在这里插入图片描述
注意：不是所有字体都提供了九种粗细，因此部分取值页面无变化。实际开发中以：正常，加粗两种取值使用最多。

<!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>Document</title>
    <style>
       div {
          /*加粗*/
         font-weight:700; 
       }
         /*变细*/
       h1 {
        font-weight:400;
      }
    </style>
</head>
<body>
    <div>joney</div>
    <h1>焦妮</h1>
</body>
</html>

显示效果：
在这里插入图片描述
3. font-style属性：取值为normal时表示正常，为italic时为倾斜。

<!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>Document</title>
    <style>
       div {
         font-style: italic;
       }
       i{
           font-style: normal;
       }
    </style>
</head>
<body>
    <div>joney</div>
    <i>焦妮</i>
</body>
</html>

显示效果：
在这里插入图片描述
4.font-family属性：调整字体。windows电脑默认是微软雅黑。

例子：

 div {
           /*如果用户电脑没有安装微软雅黑，就按黑体显示文字*/
           /*如果电脑没有安装黑体，就按任意一种无衬线字体系列显示*/
         font-family: 微软雅黑,黑体,sans-serif;
       }

5.如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效。如图，blue会生效，即显示blue颜色。
在这里插入图片描述
6.font(复合属性)：
（1）取值：font: style weight size 字体;（前两个可以省略）

<style>
       div {
           /*font: style weight size 字体;*/
          font: italic 700 66px 宋体;
          font-style: normal;  /*把单独的样式写连写下面*/ 
       }
    </style>

文本缩进

1.属性：text-indent
在这里插入图片描述
2.例子

<!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>Document</title>
    <style>
       p{
           /*首行缩进2个字的大小*/
           text-indent: 2em;
       }
    </style>
</head>
<body>
    <p>不夸张的说，当下智能汽车已经进入了疯狂的“内卷”，不管是传统车企还是造车新势力，都在朝着智能化的赛道倾斜。从本届广州车展我们也可以看出，车企们都拿出了自己在智能化领域的新产品，这些新品最大的亮点就是智能座舱已经成为标配，自动辅助驾驶已装车，还有各种雷达的数量也在不断叠加，这些车企就好像在告诉同行和汽车行业，智能汽车如果没有这些配置，就很难拿得出手，根本就没有竞争力。</p>
</body>
</html>

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

水平对齐方式

1.属性名：text-align，默认为left
在这里插入图片描述

<!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>Document</title>
    <style>
       p{
           /*首行缩进2个字的大小*/
           text-indent: 2em;
       }
       h1{
           text-align: center;
       }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
    <p>不夸张的说，当下智能汽车已经进入了疯狂的“内卷”，不管是传统车企还是造车新势力，都在朝着智能化的赛道倾斜。从本届广州车展我们也可以看出，车企们都拿出了自己在智能化领域的新产品，这些新品最大的亮点就是智能座舱已经成为标配，自动辅助驾驶已装车，还有各种雷达的数量也在不断叠加，这些车企就好像在告诉同行和汽车行业，智能汽车如果没有这些配置，就很难拿得出手，根本就没有竞争力。</p>
</body>
</html>

在这里插入图片描述

2.text-align：center可以让文本，span标签，a标签，input标签，img标签居中（需要给以上元素的父元素设置）。

<!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>Document</title>
    <style>
       body{
           text-align: center;
       }
    </style>
</head>
<body>
    <img src="./images/cat.png" alt="">
</body>
</html>

在这里插入图片描述

文本修饰

1.属性名：text-decoration
在这里插入图片描述
2.例子

<!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>Document</title>
    <style>
      div{
          text-decoration: underline;  /*常用*/
      }
      p{
          text-decoration: line-through;
      }
      h2{
          text-decoration: overline;
      }
      a{
          text-decoration: none;   /*常用*/
      }
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <h2>h2</h2>
    <a href="">超链接</a>
</body>
</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>Document</title>
    <style>
       p {
            /*line-height: 50px;*/
           /* line-height: 3.5; 字号的3.5倍*/
           
            font: italic 700 15px/2 宋体;
       }
           
    </style>
</head>
<body>
    <p>不夸张的说，当下智能汽车已经进入了疯狂的“内卷”，不管是传统车企还是造车新势力，都在朝着智能化的赛道倾斜。从本届广州车展我们也可以看出，车企们都拿出了自己在智能化领域的新产品，这些新品最大的亮点就是智能座舱已经成为标配，自动辅助驾驶已装车，还有各种雷达的数量也在不断叠加，这些车企就好像在告诉同行和汽车行业，智能汽车如果没有这些配置，就很难拿得出手，根本就没有竞争力。</p>
</body>
</html>

显示如下：
在这里插入图片描述

颜色常见取值

写网页代码时最常见是最后两种，十六进制两两数字一组（红绿蓝），若数字一样可以简写（如：#ff0000变成#f00）。
在这里插入图片描述

标签水平居中方法（常用）

1.margin：0 auto(复合属性，左右是auto，上下是0)。可以使div、p、h水平居中。

<!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>Document</title>
    <style>
      div{
          width: 300px;
          height: 300px;
          background-color: pink;
          margin: 0 auto;
      }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

4.Chrome调试工具

在网页中选择右键->检查（或者快捷键F12）

5. 综合案例

新闻

<!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>Document</title>
    <style>
    div{
        width: 800px;
        height: 600px;
        margin: 0 auto;
    }
    .center{
        text-align: center;
    }
    .color1{
        color: #808080;
    }
    .color2{
        color: #87ceeb;
        font-weight: 700;
    }
    .suojin{
        text-indent: 2em;
    }
    a{
        text-decoration: none;
    }
    </style>
</head>
<body>
    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1">2077年01月28日14:58</span>
            <span class="color2"> 新浪科技</span>
            <a href="#">收藏文本</a>
        </p>
        <hr>
        <p class="suojin">
            2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
        </p>
        <p class="suojin">
            这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”
        </p>
        <p class="suojin">
            如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。
        </p>
        <p class="suojin">
            最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。
        </p>
    </div>
</body>
</html>

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

产品

效果图片
代码
注意：div用来网页布局，一个页面可能用无数次。原则：如果使用div，尽量使用类名控制样式

<!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>Document</title>
</head>
<style>
    body{
        background-color: #f5f5f5;
    }
    .goods{
        width:  234px;
        height: 300px;
        background-color: #fff;
        margin:0 auto; /*标签div居中*/
        text-align: center; /*内容居中*/
    }
    img{
        width:160px;
    }
    .title{
        font-size: 14px;
        line-height: 25px;
    }
    .info{
        color:#ccc;
        font-size:12px;
        line-height: 30px;
    }
    .money{
        font-size: 14px;
        color: #ffa500;
    }
</style>
<body>
    <div class="goods">
        <img src="./images/car.jpg" alt="">
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="money">1999元</div>
    </div>
</body>
</html>