CSS @B站狂神说学习笔记

西红柿锅底

已于 2023-08-31 11:55:15 修改

阅读量517

点赞数

CC 4.0 BY-SA版权

文章标签： css 学习笔记

于 2023-08-27 22:01:17 首次发布

本文链接：https://blog.csdn.net/weixin_61655270/article/details/132525929

本文介绍了CSS（层叠样式表）用于网页美化，CSS3的新特性，以及如何通过样式选择器进行元素控制。同时涵盖了HTML（网页结构）和JS（JavaScript）的基础应用，涉及文本美化、布局、浮动、定位和网页动画等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端三刺客：CSS（给网页美颜） JS（进行交互） html（网页格式）

链接：【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

前端三刺客：CSS（给网页美颜） JS（进行交互） html（网页格式）

1.什么是CSS？

1.1css概念

1.2.CSS3.0最新版，圆角，动画，阴影，浏览器兼容性-

1.3入门

第一种方法style：内部样式

第二种方法：在css中加入样式，后在html将两者连接起来（外部样式）

第三种方式：行内标签在标签元素中，编写一个style标签，编写样式即可

CSS优势：

2.CSS怎么用（快速入门）

3.CSS选择器（重点+难点）

2.1：基本选择器（三种选择器优先级：id选择器>class选择器>标签选择器）

3.id选择器（注意！！！！ID必须保证全局为1，不能重复ID）

2.2层次选择器

2.3结构伪类选择器

2.4属性选择器！！！！！重要！！！！！常用！！！！！不难！！！！！

4.美化网页（文字，阴影，超链接，列表渐变）

1.什么是CSS？

1.1css概念

cascading style sheet层叠级联样式表

CSS：表现层（美化网页包括字体，颜色，边距，宽度，背景图片，网页定位，网页浮动）

1.2.CSS3.0最新版，圆角，动画，阴影，浏览器兼容性-

1.3入门

设置H1标题“微笑的好处”颜色，三种方法（判定方式是就近原则，谁离代码最近就用谁）:行内标签优先级>内部样式？外部样式

第一种方法style：内部样式

第二种方法：在css中加入样式，后在html将两者连接起来（外部样式）

拓展：外部样式两种写法：

链接式：

<link rel="" href="xxx/xxx.css">

导入式：

 <style>
        @import url("CSS/xxx.css");
    </style>

第三种方式：行内标签在标签元素中，编写一个style标签，编写样式即可

CSS优势：

1.内容和表现分离

2.网页结构表现统一，可以实现复用

3.样式丰富

4.建议使用独立于html的css文件

5.利用SEO，容易被搜索引擎收录！

2.CSS怎么用（快速入门）

3.CSS选择器（重点+难点）

作用：选择页面上的某一个或者某一类元素

2.1：基本选择器（三种选择器优先级：id选择器>class选择器>标签选择器）

1.标签选择器（有弊端，无法单独设置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>smile</title>
<!--<link rel="stylesheet" href="CSS/Demo01.css">-->
    <style>
        @import url("CSS/Demo01.css");
    </style>
    <style>
        /*标签选择器会选择页面上所有的标签*/
        h2{
            color: aliceblue;
            background:  green;
            border-radius: 3px;
        }
        p{
            font-size: 80px;/*字体大小*/
            color: pink;/*字体颜色*/
            border-radius: 3px;/*边境半径*/
            background: black;/*背景颜色*/
        }
    </style>
</head>
<body>
<!--行内标签：在标签元素中，编写一个style标签，编写样式即可-->
<h1>微笑的好处</h1>
<h2>多巴胺</h2>
<p>尔康和紫薇</p>


</body>

效果：

2.类选择器 class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>《秦时明月》</title>
  <style>
/*类选择器的格式   .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用*/
   .yueguangse{
     color: blue;
   }
.nvzixiang{
  color: royalblue;
}
.leiduanjian{
  color: cornflowerblue;
}
.qingduochang{
  color: darkgray;
}
  </style>
</head>
<body>
<h1 class="yueguangse">月光色</h1>
<h1 class="nvzixiang">女子香</h1>
<h1 class="leiduanjian">泪断剑</h1>
<h1 class="qingduochang">情多长</h1>

</body>
</html>

效果：

3.id选择器（注意！！！！ID必须保证全局为1，不能重复ID）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天行九歌</title>
  <style>
    /* ID选择器的格式：#+ID名称{}
    */
    #weizhuang{
      color: #001053;
    }
    #genie{
      color: #f4bc2b;
    }
    #chilian{
      color: #f4cbe3;
    }
  #honglian{
    color: #912c24;
  }
  </style>
</head>
<body>
<h1 id="weizhuang">任侠平生愿</h1>
<h1 id="genie">一叶边舟莲波滟</h1>
<h1 id="chilian">秋水墨色然</h1>
<h1 id="honglian">如见美人眼波怜</h1>

</body>
</html>

效果：

取消博客园广告小技巧：

在所示地方输入display：none

2.2层次选择器

1.后代选择器（在某个元素的后面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
  <!--后代选择器-->
<!--    <style>
  body p{
    background:red
  }</style>-->
    <style>
        body p{
            background: #f4cbe3;
        }
    </style>
</head>
<body>
<p>红</p>
<p>橙</p>
<p>黄</p>
<ul>
    <li><p>绿</p></li>
    <li><p>青</p></li>
    <li><p>蓝</p></li>
</ul>
</body>
</html>

2.子选择器：一代

效果

3.相邻兄弟选择器（相邻兄弟选择器，只向下选择一个同辈）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <!--相邻兄弟选择器，只向下选择-->
    <style>
        .black+p{
            background: #f4cbe3;
        }
    </style>
</head>
<body>

<p>红</p>
<p class="black">黑</p>
<p>橙</p>
<p>黄</p>
<ul>
    <li><p>绿</p></li>
    <li><p>青</p></li>
    <li><p>蓝</p></li>
</ul>
</body>
</html>

效果：

4.通用选择器（类后面的同类会进行设置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <!--通用选择器-->
    <style>
        .black~p{
            background: #f4cbe3;
        }
    </style>
</head>
<body>

<p>红</p>
<p class="black">黑</p>
<p>橙</p>
<p>黄</p>
<ul>
    <li><p>绿</p></li>
    <li><p>青</p></li>
    <li><p>蓝</p></li>
</ul>
<p>紫</p>
</body>
</html>

效果：

2.3结构伪类选择器


  <style>
      /*ul的第一个子元素*/
      ul li:first-child{
          background: lawngreen;
      }
      /*ul的最后一个子元素*/
      ul li:last-child{
          background: magenta;
      }
/*
     选中当前p元素的父级元素，选中父级元素的第一个，并且是当前 元素才生效*/
   /*   p:nth-child(2){
          background: #f4bc2b;
      }*/
      /*选中父元素，下的P元素的第三个重要！！！！！这个可以选择顺序，类型*/
      p:nth-of-type(3){
          background: deepskyblue;
      }
  </style>

效果

2.4属性选择器！！！！！重要！！！！！常用！！！！！不难！！！！！

4.美化网页（文字，阴影，超链接，列表渐变）

美化网页，css的意义：有效的传递页面信息，印象深刻，美化网页，吸引用户，凸显页面主题，提高用户的体验，

常用：font-size：字体大小

font-family：字体样式

font-weight：字体粗细

color：字体颜色

span标签：重点要突出的字使用span标签套起来，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>java</title>
  <style>
    #title{
      font-size: 79px;
    }
  </style>
</head>
<body>
<span id="title">工作工作</span>
</body>
</html>

字体样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>java</title>
  <style>
    body{
      font-size: 50px;
      font-family: 楷体;
    }
    h1{
      font-size: 70px;
    }
  </style>
</head>
<body>
<h1>故事介绍</h1>
<p>天地在变化，人事也在变化，变化不可是一蹴而就，是循循渐进，所以有四四一组，四象分明。
  　</p>　
<p>最后所剩下的余数，代表事情的转机与改变，因不圆满所以有变化。</p>
</body>
</html>

效果：

文本样式：

rgba：透明度

1.颜色color rgb rgba

2.文本对齐的方式

text-align：排版-居中center；left;right

3.首行缩进

text-indent：缩进xxxem，段落首行缩进

4.行高，行高和块的高度一致就可以上下居中:line-height=height。

height：300px

line-height：xxxpx

5.下划线

超链接去下划线：

text-decoration：none

}

text-decoration:underline;下划线

text-decoration:line-through;中划线

text-decoration：overline；上划线

6.文本图片水平对齐：vertical-align：middle

超链接伪类：最重要的是hover

默认的颜色

a{text-decoration：none（这一步的含义是删除下划线）}

a：hover{

color：orange；（设置鼠标悬浮的状态，可设置颜色大小）}

a：active{
}就是鼠标按住未释放的状态

text-shadow：阴影颜色，水平偏移，垂直偏移

去掉圆圈可输入代码

none：去掉圆点

circle：空心圆

decimal：数字

square：正方形

list-style：none