css学习笔记

爱笑的蓝孩子～

已于 2023-07-02 19:43:53 修改

阅读量71

点赞数 2

分类专栏：前端学习文章标签： css 学习笔记

于 2023-06-27 22:20:36 首次发布

本文链接：https://blog.csdn.net/qq_67931344/article/details/131342496

版权

前端学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一.前言

html是一个超文本标记语言，组成了网页的页面的基本架构，但是光光是这个还是不够的。就好比衣服一样，不仅要有衣服穿还要颜色好看，造型设计好，网页也是一样的。

而网页的布局和颜色背景等一系列由CSS来完成，CSS 又名层叠样式表。
接下来我们将在在最短的时间内把它的基本知识点掌握。

二、引入方式

css的引入方式有三种。

2.1 外链式（用得最多）

link标签，整体放在head标签内,link标签在这有两个作用：

定义文档与外部资源的关系；
是链接样式表

stylesheet表示引入的是样式表
href是引用css的地址（绝对路径，相对路径）

 <link rel="stylesheet" href="css的样式路径">

2.2 内嵌式

放在style标签中，一般学习和练习时常用，整体放在head标签中。
如下：把四级标题样式设置为蓝色，大小100px。

    <head>
    <style type="text/css">
        h4 {
            color: bule;
            font-size: 100px;
        }
    </style>
</head>

2.3行内式

行内式,一般用的不多，因为局限性太多了，直接在标签内部加属性。
如下：

<h1 style="color: blue; size: 50px;">行内式</h1>

用style来添加属性，各个属性之间用“；”隔开。

三.基础选择器

3.1标签选择器

标签选择器就是以标签名称命名的选择器。
这里的示例代码是p标签，改变了所有p标签的样式，有局限性。
标签选择器格式：标签名{}

 <style type="text/css">
        p{
            font-size: 50px;
            color: red;
        }
        /* 标签选择器所有的这个标签都生效，具有局限性 */
    </style>

主体部分还是正常使用

<p>标签选择器</p>

3.2ID选择器

这个选择器，就可以选择指定的标签样式了。
但一个标签设置唯一的身份id，一一对应，未来和javascript搭配使用会比较多。
id选择器形式为：#id名{}

 <style type="text/css">
        /* id选择器,id是标签的唯一标识*/
        #aaa{
            color: rgb(250, 114, 159);
        }
 </style>

主体部分使用时，也要给标签标上唯一的ID。

<h2 id="aaa">id选择器</h2>

3.3类选择器

类选择器是使用最多的，一个标签可以有多个类名，效果是叠加的，一个类名也可以被多个标签使用。
类选择器格式：.类名{}

 <style type="text/css">
            /* 类选择器:所有方法为定义和使用两个步骤 */
        .apple{
         color: green;
        }
 </style>

使用的话，标签加上类名就可以了：

<h3 class="apple">类选择器</h3>

3.4选择器案例对比

其中通配选择器*{}；是对所有标签生效，在开发中只用于消除默认的外间距，其余基本不用。
这段代码，把之前的知识点整合在一起了，放上了效果图，方便理解和使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外链式 -->
    <link rel="stylesheet" href="css样式地址">
    
    <!-- 内嵌式 -->
    <!-- 选择器形式：选择器{} -->
    <style type="text/css">
        /* 标签选择器 */
        p{
            font-size: 50px;
            color: red;
        }
        /* 类选择器*/
        .apple{
         color: green;
        }
        /* id选择器 */
        #aaa{
            color: rgb(250, 114, 159);
        }
        /* 通配符:去除外间距* */
        /* *{
            margin：0；
            padding：0；
        } */
    </style>
</head>
<body>
<h1 style="color: blue; size: 50px;">行内式</h1>
<p>标签选择器</p>
<h3 class="apple">类选择器</h3>
<h2 id="aaa">id选择器</h2>
</body>
</html>

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

四.基本样式

同一个标签的同一个属性设置多个值时，后面的会将前面的覆盖，这也是层叠的含义。

4.1文字基本样式

属性名	用处	属性值
font-size	字体大小	数值+px
font-weight	粗细程度	可以填数字，其中bold对应数值700；normal对应数值400
font-style	字体是否倾斜	倾斜italic；正常norma
color	字体颜色	颜色英文名（还有几种后面详细讲解）
font-family	字体	黑体，宋体，微软雅黑…

其中font-family:字体按顺序来，如果电脑没有安装前面字体，就到下一个。
最后的sans-serif指的是非衬线字体系列（横平竖直的那种）。

使用如下：

 <style type="text/css">
        .font1{
            font-size: 40px;
            font-weight: bold;  
            font-style: italic;
            color: brown;
            font-family: 宋体,黑体,sans-serif;
        }
  </style>

<h4 class="font1">字体样式</h4>

效果如下：

在这里插入图片描述

4.2font的复合属性

刚刚的基本字体样式都是font开头的，可以复合，连写，简化代码。

复合属性:一个属性后面跟了多个值，值与值之间用空格隔开。
font的复合属性对应如下：
font：style weight size 字体
是否倾斜，粗细，大小，字体
可以省略前两项，前两项变成默认值。
其中还可以添加属性，行高，跟在字体大小后面。

 <style type="text/css">
   .font2{
            font: italic 700 66px 宋体;
            /* 这两种写法都是可行的，后面的会覆盖前面的  */   
             font:  66px 宋体;
             /* 其中/2表示行高是字体大小的二倍，后面会介绍*/            
             font: italic 700 66px/2 宋体;
        }
 </style>

4.3 文本样式的学习

文本缩进：text-indent，单位为px（像素）和em（1em为一个字的大小）。

 <style type="text/css">
    .font3{
            /* 首行缩进两个字符 */         
            text-indent: 2em;
        }
  </style>

文本水平对齐方式：text-align：left（左对齐）； right（右对齐）； center（居中）。
默认为左对齐。
注：给要对齐元素的父级添加对齐方式。

 <style type="text/css">
    .font4{
              /* 居中对齐 */
           text-align：center;
        }
  </style>

文本修饰：text-decoration。(加线段用的)
取值：underline（下划线）；line-through（删除线）；
overline（上划线）；none（清除装饰线）。

 <style type="text/css">
    .font5{
        /*清除和下划线最常用 */
          /*清除-用于清除超链接下划线-*/
            /* 下划线-重点内容 */
          text-decoration:underline;
        }
  </style>

行高：line-height，控制两行字中间的距离的。
单位-第一种：数值px ；第二种：数值（表示当前字体大小的倍数）

 <style type="text/css">
    .font6{
    /*其中50px表示，从上间距到下间距的距离（其中包括字体本身）  */
         line-height:50px;
        }
  </style>

五.小拓展

5.1谷歌调试

第一种方法：F12
第二种方法：鼠标右键，检查。
查看时：看到删除线，证明写的代码没有生效，被后面的覆盖掉了。

5.2颜色的取值

常见属性名：
文字颜色：color
背景颜色：background-color
属性值：四种表示方式。

颜色表示方式	表示含义	属性值
关键字	颜色名称	red，blue…
rgb表示法	红绿蓝三原色，每项取值0-255	rgb（0,0,0），rgb（255,255,0）…
rgba	红绿蓝三原色的基础上加上第四个数为透明度	rgba（255,255,0,0.5）
十六进制表示法	#开头，将数字转化为十六进制	#000000,#ff0000…

5.3小案例

将刚刚的知识点结合起来，完成练习：
其中收藏本文是超链接，新浪科技要加粗。
完成排版，推荐先独立尝试，再看示例代码。
![在这里插入图片描述](https://img-blog.csdnimg.cn/0fc2099440744b0f82e988d49d882bd1.png

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            margin: 0 auto;
            background-color: white;
        }

        .center{
            text-align: center;
        }

        .p1{
            text-align: center;
        }

        .color1{
          color:#808080;
        }

        .color2{
            color:#87ceeb;
            font-weight: bold;
        }

        a{
            text-decoration: none;
        }
        
        .ccc{
            text-indent: 2em;
        }
    </style>
</head>
<body>
   <div>
    <h1 class="center">c语言学习</h1>
    <!-- 在一行分开的标签：span,用来分割 -->
    <p class="p1">
       <span class="color1">2023年六月二十三日编辑 </span> 
       <span class="color2">新浪科技 </span>
        <a href="#">收藏本文</a>
    </p>
    <hr>

    <p class="ccc">运输公司根据体积来计算物体运输的费用，体积除以国际运输166。
        int weight=volume/166，但这使得其向下舍去，运输公司当然希望是进一法：
        int weight=（volume+165）/166。</p>
     <p class="ccc">
        在C语言中，可以定义一个不变的常量，也被称为宏定义，一般宏的名字默认为大写模式。
        其一般形式为：#define 标识符 常量值 。
     </p>

     <p class="ccc">
        C语言的读入输入，使用scanf（）函数，和printf一样，
        都需要使用格式串来指定输入的数据类型，其中运算符通常&是必须的。如下，读入一个int类型数值：Scanf（“%d”，&i）；
     </p>

     <p class="ccc">
        %f默认显示小数点后六位，如果想强制显示后n位小数，可用%.nf实现；如果是占用n字符空间，可用%nf实现。
     </p>
</div> 
</body>
</html>

六.选择器进阶学习

在此之前先了解什么叫后代选择器，后代包括子代，孙子，重孙子…都是后代。
格式为：父类选择器后代选择器{css}
注：选择器中间用空格隔开。下面的示例是将div标签下所有p标签设置为红色。

 <style type="text/css">
 div p{
 color:red
 }
  </style>

6.1子代选择器

而子代选择器，是指的直系一代，只包括儿子，用 > 连接，中间没有空格。
语法为：选择器1>选择器2{css}
代码如下：将div中的子代p标签颜色设置为红色。

 <style type="text/css">
 div>p{
 color:red
 }
  </style>

6.2 并集选择器

作用：同时选择多组标签，设置同样的样式（用得不多）
语法为：选择器1，选择器2{css}
【注：其中不同选择器中间换行可以增加代码可读性。】
代码如下：将多个标签文字颜色设置为红色

 <style type="text/css">
 div,
 p,
 h1,
 span{
 color:red
 }
  </style>

6.3交集选择器

作用：同时满足多个选择器的标签。
要求：使p标签且添加box类的，文字设置为红色。
语法：标签名.类名{css}
代码示例：

 <style type="text/css">
 p.box{
 color:red
 }
  </style>

6.4伪类

作用：鼠标悬停在上面所显示的效果样式。
语法：hover{css}
代码示例：鼠标悬停在超链接上，文字显示红色。

 <style type="text/css">
a.hover{
 color:red
 }
  </style>

七.背景

1. 背景颜色

背景颜色：background-color (快捷键：bgc)，默认背景颜色是透明的。
示例代码：div设置背景颜色为粉色。

 <style type="text/css">
div{
/* 如果不设置大小，div会独占一行，是一个长条状 */
width:400px;
height:400px;
background-color:pink;
 }
  </style>

2.背景图片

背景图片的设置：background-image:url(图片的路径)
背景图片的平铺:background-repeat。
四个属性值分别为：

取值	效果
repeat	平铺，重复
no-repeat	不平铺
repeat-x,	沿x方向平铺
repeat-y	沿y方向平铺

代码示例：

 <style type="text/css">
div{
/* 如果不设置大小，div会独占一行，是一个长条状 */
width:400px;
height:400px;
background-color:pink;
background-image:url（图片路径）;
background-repeat:no-repeat;
 }
  </style>

3.背景相关属性

背景位置：background-position
属性值：background-position:水平位置垂直位置
注意：之间用空格隔开。（属性值可以用数字表示）
水平方向：left，right，center。
垂直方向：top,bottom,center。
img标签和背景图片在网页开发中的区别：
img标签是一个标签，不会设置宽高默认会以原尺寸显示。（比较重要的）
背景图片：div+背景图片，需要设置div的宽高。（修饰性的，美化的）

八.显示模式

8.1块级元素

特点：
1.独占一行
2.宽度默认是父类元素的宽度，高度默认由内容撑开
3.可以设置宽高
典型标签有：
div,p,h系列,ul,li,dl,form,header,nav…

8.2行内元素

特点：
1.一行可以显示多个，不换行的
2.宽度和高度默认由内容撑开
3.不可以设置宽高
典型标签：
a， span ，b，u，s，em…

8.3行内块

特点：
1.一行可以显示多个
2.可以设置宽高
典型标签：
input，textarea，button，select, img…

8.4显示模式的转换

目的：改变元素默认的显示特点，让元素符合布局要求。
语法如下：

属性	效果	使用频率
display：block	转换成块级元素	较多
display：inline-block	转换成行块级元素	较多
display：inline	转换成行内元素	较少

4.案例实践

要求：有四个超链接在一行显示，背景设置为红色，点击时背景颜色显示橙色。
效果：
在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
            background-color: red;
            /* 转换显示模式为为行内块级，可以设置宽高 */
            display: inline-block;
            width: 200px;
            height: 50px;
            text-align: center;
            color:#fff;
            line-height: 50px;
        }
         /* 伪类设置点击效果 */
        a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

九.盒子模型

9.1盒子模型的概述

盒子模型就如同我们买物品时装载的盒子一样，一层套一层。
打开一个网页，右击检查或F12，查看代码，往下可以看到这么一个东西。
这小米官网的界面：
在这里插入图片描述

而这就是一个盒子模型，一层套一层的。

9.2盒子模型的组成

其中有几个重要组成：

组成	作用	属性值
borer	设置边框，虚线实线，颜色等	border:像素虚线/实线/点线颜色
padding	设置内边距，内容和盒子边缘的距离	paddig：数值+px
margin	设置外边距,盒子于盒子之间额间距	margin：数值+px

9.3知识要点

宽高在设置内容部分大小，并不是盒子的大小。
盒子真实尺寸=width/height +内边距+边框线
边框线:像素线段类型颜色。（也可以分开写，不推荐）
实线：solid
虚线：dashed
点线：dotted
如只是想要其中一条边有边框：

 border-left: 1px solid #000;  （只设置了左边框,实线）

内边距：内容和盒子边缘的距离, 有四个方向，按顺时针：上右下左。设置其中一个值后，另一个对称方位没有设置时，默认相同。如：设置上为20px，下没有设置，默认也是20px。
如果要求先规定好了盒子大小，需要手动根据公式，进行减法。
如需要自动，不用手动减法可以添加：

/* 自动进行运算，内部减法 ，宽高设置多少，盒子大小就是多少*/
      box-sizing: border-box;

清除默认样式：之前提到过的通配选择器的使用。

*{
margin：0；
padding：0；
}

9.4练习

练习1

将刚刚的知识点都写一遍（推荐先自己写，后看代码）
要求：

两个简单的盒子，文本随意，背景设置为粉红色
内容宽高设置为300px，边框设置为1px的黑色实线
两个盒子之间的间距为50px
内边距设置为20px
注意：div是块级元素，不会出现在同一行，写完F12进入查看，查看盒子真实大小。

样式如下：
在这里插入图片描述
实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 1px solid #000;
            padding: 20px;
             margin: 50px;
        }
    </style>
</head>
<body>
    <div>电脑</div>
    <div>笔记本</div>
</body>
</html>

练习2

第二个练习，加上了之前的选择器，伪类知识点。
效果如图:
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        /* 设置高度 */
        height: 40px;
        /* 顶部的边框设置 */
        border-top: 3px solid #ff8500;
        /* 底部的边框设置 */
        border-bottom: 1px solid #edeef0;
    }

    /* 后代选择器,设置超链接 */
    .box a{
       width:80px ;
       height: 40px;
       /* 转换为行内块显示模式，宽高设置才能成功 */
       display: inline-block;
       /* 去除下划线 */
       text-decoration: none;
       /* 设置行高，使文字居中 */
       line-height: 40px;
       text-align: center;
       /* 设置字大小和颜色 */
       font-size: 12px;
       color: #4c4c4c;

       /* 自动减法 */
       box-sizing: border-box;
    }

    /* 伪类设置点击时的效果 */
    .box a:hover{
        background-color: #edeef0;
        color:#ff8400;
    }
</style>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">热点新闻</a>
        <a href="#">热搜榜</a>
        <a href="#">天气预报</a>
    </div>
</body>
</html>

十.css浮动

1.结构伪类选择器

用处：简化代码，查找某个父级选择器中的子元素。
使用方式：
E：first-child{css}

  /*  将并列的多个li标签中的第一个，背景设置为绿色 */
        li:first-child{
        background-color: green;
        }

E:last-chlid{css}

  /*  将并列的多个li标签中的最后一个，背景设置为黑色 */
   li:last-child{
            background-color: black;
        }

E:nth-child(n) {css}
[第n个子标签，且为E元素，常用]

  /*  将并列的多个li标签中的第五个，背景设置为紫色 */
  li:nth-child(5){
            background-color: blueviolet;
        }

E:nth-last-child(n){css}

  /*  将并列的多个li标签中的倒数三个，背景设置为棕红 */
  li:nth-last-child(3){
            background-color: brown;
        }

2.浮动

浮动，顾名思义，是悬浮在上面，浮动元素比标准流高半个级别，会覆盖标签（字盖不住）。
浮动的标签为float。
作用：
早期作用：图片的环绕型文字。
现在作用：改变网页界面的布局情况。
示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 浮动左布局，浮动了，第一个标签为蓝色了，浮动在上方 */
            /* 浮动元素比标准流高半个级别，会覆盖标签（字盖不住） */
            float: left;
        }
         .two{
            width: 200px;
            height: 200px;
            background-color: rgb(0, 149, 255);
            /* 浮动左布局，变为行内 */
            /* 浮动找浮动，顶对齐 */
            float: left;
           
        }
        .three{
            width: 300px;
            height: 300px;
            background-color: greenyellow;
            /* 浮动左布局，变为行内 */
           
        }
    </style>
</head>
<body>
    <!-- 浮动作用：早期为设置图片为环绕型 
                   现在为改变网页的布局情况-->
    <div class="one">one </div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

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

3.练习

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

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 40px;
            background-color: #333;
        }
        .header{
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }
        .content{
            width: 1226px;
            height: 460px;
            background-color: green;
            margin: 0 auto;
        }
        .left{
            width: 234px;
            height: 460px;
            background-color: #ffa500;
            float: left;
        }

        .right{
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
            float: left;
        }

    </style>
</head>
<body>
      <!--css的书写顺序：
      1.浮动，display
      2.盒子模型：margin border padding 宽高颜色背景
      3.文字样式 
    
    -->


    <!-- 通栏的盒子，宽度和浏览器宽度一样大 -->
    <div class="top"></div>
    <div class="header">头部</div>
    <div class="content">
        <div class="left">left</div>
        <div class="right">right</div>
        </div>
  
</body>
</html>

爱笑的蓝孩子～

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css学习笔记

html是一个超文本标记语言，组成了网页的页面的基本架构，但是光光是这个还是不够的。就好比衣服一样，不仅要有衣服穿还要颜色好看，造型设计好，网页也是一样的。而网页的布局和颜色背景等一系列由CSS来完成，CSS 又名层叠样式表。接下来我们将在在最短的时间内把它的基本知识点掌握。盒子模型就如同我们买物品时装载的盒子一样，一层套一层。打开一个网页，右击检查或F12，查看代码，往下可以看到这么一个东西。这小米官网的界面：而这就是一个盒子模型，一层套一层的。
复制链接

扫一扫