喃喃污的小窝
large picture of the cover

CSS学习笔记

css学习笔记

如何学习

  1. css是什么
  2. css怎吗用
  3. css选择器（重点+难点）
  4. 美化网页（文字、阴影、超链接、列表.渐变......）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效效果）

1.CSS

1.1什么是css

Cascding Slyse sheet 层叠级联样式表

CSS表现：美化网页

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动......

1.2css发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结果分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画...... 浏览器兼容性~

1.3快速入门

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--  规范，<style> 可以编写css代码 每一个声明，最好使用分号结尾
      语法：
          选择器{
              声明1;
          }
-->
  <style>
    h1{
      color: aquamarine;
    }
  </style>

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

建议使用分离样式

样式引用 <link rel="stylesheet" href="css/style.css">

1728515981759.png

CSS优势：

1、 内容和表现分离

2、 网页结构表现同一，可以实现复用

3、样式十分丰富

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

5、利用SEO容易搜索引擎收录！

1.4CSS的3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

<!--内部样式-->
    <style>
        h1{
            color: aqua;
        }
    </style>

</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aquamarine">颜色字体</h1>
</body>
</html>

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

  • 链接式：
    HTML

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

  • 导入式：
    @import url是CSS2.1特有

    <!--导入式-->
    <style>
        @import url("css/style.css");
    </style>

首先link和import语法结构不同

是html标签，只能放入html源代码中使用，后者可看作为scc样式，作用是引入css样式功能

import在html中使用需要 标签同时可以直接 @import url("css/style.css");放入css文件或css代码里引入其他css文件

本质上两种使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link比较多，也推荐使用link

2.选择器

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

2.1 基本选择器

优先级：id > class > 标签

1、标签选择器：选择一类标签 标签{ }

<head>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: #3f7cb8;
        }
    </style>
</head>
<body>
<h1>一</h1>
<h1>二</h1>

</body>

2、类选择器class：选择所有class属性一致的标签，跨标签 .类名

<head>
<!--类选择器的格式 .class的名称-->
    <style>
        .nnw{
            color: gold;
        }
        .nnw2{
            color: #3f7cb8;
        }
        .nnw3{
            color: #381473;
        }
    </style>


</head>
<body>

<h1 class="nnw">标题1</h1>
<h1 class="nnw2">标题2</h1>
<h1 class="nnw3">标题3</h1>

</body>

3、id选择器：全局唯一 #id名

<head>
    <!--类选择器的格式 .class的名称-->
    <style>
        #nnw{
            color: gold;
        }
        #nnw2{
            color: #3f7cb8;
        }
        #nnw3{
            color: #381473;
        }
    </style>


</head>
<body>

<h1 id="nnw">标题1</h1>
<h1 id="nnw2">标题2</h1>
<h1 id="nnw3">标题3</h1>

</body>

2.2层次选择器

1.后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你

        /*后代选择器*/
        body p{
            background: gold;
        }

2.子选择器，一代 儿子

        /*子选择器*/
        body>p{
            background: aquamarine;
        }

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

        /*兄弟选择器*/
        .active + p{
            background: gold;
        }

4.通用兄弟选择器 当前选中元素的向下所有兄弟

        /*通用兄弟选择器*/
        .active ~ p{
            background: gold;
        }

2.3 结构伪类选择器

        /*ul的第一个子元素*/
        ul li:first-child{
            background: darkgray;
        }

        /*ul的最后一个子元素*/
        ul li:last-child{
            background: crimson;
        }

        /*选择当前p元素的父级元素，选中父级元素的第（）个 并且是当前元素才生效   顺序*/
        p:nth-child(1){
            background: aquamarine;
        }

        /*选择父元素，下的p元素的第（）个  类型*/
        p:nth-of-type(3){
            background: brown;
        }

2.4 结构选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            /*浮动：左*/
            float: left;
            /*定义为块级元素*/
            display: block;
            /*高度*/
            height: 50px;
            /*宽度*/
            width: 50px;
            /*圆角*/
            border-radius: 10px;
            /*背景颜色*/
            background: #3f7538;
            /*左右居中*/
            text-align: center;
            /*文字颜色*/
            color: azure;
            /*无文字下划线*/
            text-decoration: none;
            /*设置右侧边距*/
            margin-right: 5px;
            /*上下居中*/
            font: bold 20px/50px Arial;
        }
        /*属性名「属性名 = 属性值（正则表达式）
            = 绝对等于
            *= 包含等于
            ^= 开头等于
            $= 结尾等于
        */
        /*选中带有id属性 的元素*/
        a[id]{
            background: gold;
        }
        /*选中id为egrdsaef的元素*/
        a[id = "egrdsaef"]{
            background: cyan;
        }
        /*选中class中包含dfgef的元素*/
        a[class *= dfgef]{
            background: cadetblue;
        }
        /*选中href中https开头的元素*/
        a[href ^= https]{
            background: olivedrab;
        }
        /*选中href中sb结尾的元素*/
        a[href $= sb]{
            background: #4c0e3d;
        }
    </style>

</head>
<body>
<p class="demo">
    <a class="dfgef efgrefg efeffg" href="https://www.minecraft.net/">1</a>
    <a class="dfgef efgrefg" href="https://www.minecraft.net/sb" >2</a>
    <a class="hthth" id="egrdsaef" href="">3</a>
    <a class="hthth" id="rgrgrg" href="">4</a>
    <a class="dfgef efgrefg efeffg" id="yhtje" href="">5</a>
    <a class="rhtjfe" id="rgtjrtg" href="">6</a>
    <a class="tuyuht" id="rthgbthyj" href="">7</a>
    <a class="rygthth" href="">8</a>
    <a class="rghjthth" href="">9</a>
</p>
</body>
</html>

1728968717069.png

3.美化网页元素

3.1 为什么要美化网页

1.有效传递页面信息

2.美化网页，页面漂亮才能吸引人

3.凸显页面主题

4.提高用户体验

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    #xuexi{
      /*字体大小*/
      font-size: 50px;
    }
  </style>
</head>
<body>
欢迎学习 <span id="xuexi">Java</span>
</body>
</html>

3.2 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    body{
      /*字体*/
      font-family: 楷体;
      /*字体原色*/
      color: #381473;
    }
    h1{
      /*字体大小*/
      font-size: 50px;
      /*字体颜色*/
      color: olivedrab;
    }
    .p1{
      /*字体粗细*/
      font-weight: bold;
    }
    .p2{
      color: darkkhaki;
    }
  </style>
</head>
<body>
<h1>基本信息</h1>
<p class="p1">《穿条纹睡衣的男孩》是由美国米拉麦克斯影业、英国盛日影业联合制作，马克·赫尔曼编剧、执导，阿沙·巴特菲尔德、杰克·塞隆、维拉·法梅加、大卫·休里斯等主演的剧情片。该片于2008年8月28日在英国卡内基电影节上映，9月12日在英国正式上映 [1] [20-21]。
</p>
<p class="p2">
  该片改编自约翰·伯恩所著同名小说，讲述了二战期间，德军军官的儿子布鲁诺和集中营中的犹太男孩什穆埃尔结下了友谊，当布鲁诺穿上了带有横条纹的睡衣，爬进集中营时，被纳粹军官错当成集中营的孩子关进了毒气室的故事 [1]。
2009年，该片获得第23届西班牙戈雅奖·最佳欧洲电影提名 [22]。截至2024年4月21日，该片在全球累计票房40416563美元 [23]。
</p>
</body>
</html>

1728971109600.png

3.3 文本样式

1.颜色 color rgb rgba

2.文本对其方式

      text-align: center; 居中
      text-align: left;   靠左
      text-align:right;   靠右

3.首行缩进

text-indent: 2em;

4.行高 单行文字上下居中

height: 300px;
line-height: 300px;

5.装饰

    /*下划线*/
      text-decoration: underline;

    /*中划线*/
      text-decoration: line-through;

    /*上划线*/
      text-decoration: overline;

6.文本图片水平对齐

<!--  水平对齐 ~ 参照物, a,b-->
    img,span{
      vertical-align: middle;
    }

1728975772705.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  水平对齐 ~ 参照物, a,b-->
  <style>
    img,span{
      vertical-align: middle;
    }
  </style>

</head>
<body>

<p>
  <img src="images/1.png" alt="">
  <span>adadadad</span>
</p>

</body>
</html>

愿这盛世 每一天

site logo

Hi,Friend

© 2024 喃喃污的小窝