css学习笔记

如何学习

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

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">

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>

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>

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;
    }

<!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>

3.4阴影

        /*text-shadow：阴影颜色 水平偏移 垂直偏移*/
        #price{
            text-shadow: aquamarine 10px 10px;
        }

3.5超链接伪类

        /*默认的状态*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*悬停状态*/
        a:hover{
            color: #ffae00;
            font-size: 50px;
        }
        /*鼠标按住状态*/
        a:active{
            color: aquamarine;
        }

3.6列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>  <a href="#">音像</a>  <a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>  <a href="#">手机</a>  <a href="#">数码</a></li>
        <li><a href="#">电脑</a>  <a href="#">办公</a></li>
        <li><a href="#">家居</a>  <a href="#">加装</a>  <a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>  <a href="#">个人化妆</a>  <a href="#">数字商品</a></li>
        <li><a href="#">礼品箱包</a>  <a href="#">钟表</a></li>
        <li><a href="#">食品饮料</a>  <a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>  <a href="#">旅行</a></li>
    </ul>
</div>
</body>
</html>

#nav{
    width: 300px;
    background: rgba(135, 112, 112, 0.36);
}
.title{

    /*字体大小*/
    font-size: 18px;
    /*字体加粗*/
    font-weight: bold;
    /*字体缩进*/
    text-indent: 1em;
    /*行间距*/
    line-height: 35px;
    background: #ffae00;
}
/*ul{*/
/*    background: rgba(135, 112, 112, 0.36);*/
/*}*/
ul li{
    /*行高*/
    height: 30px;
    /*
    list-style
    none 去掉原点
    circle 空心圆
    decimal 有序列表
    square 正方形
    */
    list-style: none;
    text-indent: 1em;

}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orangered;
    text-decoration: underline;
}

3.7背景

背景颜色

背景图片

        div{
            width: 1000px;
            height: 500px;
            border: 1px solid red;
            /*默认平铺*/
            background-image: url("images/QQ20241015-130450.png");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
         }

3.8 渐变

格拉比恩特 (grabient.com)

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 50%, #FFCC70 100%);

4.盒子模型

4.1什么是盒子模型

margin：外边距

padding：内边距

border：边框

4.2 边框

1、边框的粗细

2、边框的样式

3、边框的颜色

CSS学习笔记

css学习笔记

1.CSS

1.1什么是css

1.2css发展史

1.3快速入门

1.4CSS的3种导入方式

2.选择器

2.1 基本选择器

2.2层次选择器

2.3 结构伪类选择器

2.4 结构选择器（常用）

3.美化网页元素

3.1 为什么要美化网页

3.2 字体样式

3.3 文本样式

3.4阴影

3.5超链接伪类

3.6列表

3.7背景

3.8 渐变

4.盒子模型

4.1什么是盒子模型

4.2 边框

喃喃污

css学习笔记

1.CSS

1.1什么是css

1.2css发展史

1.3快速入门

1.4CSS的3种导入方式

2.选择器

2.1 基本选择器

2.2层次选择器

2.3 结构伪类选择器

2.4 结构选择器（常用）

3.美化网页元素

3.1 为什么要美化网页

3.2 字体样式

3.3 文本样式

3.4阴影

3.5超链接伪类

3.6列表

3.7背景

3.8 渐变

4.盒子模型

4.1什么是盒子模型

4.2 边框

常用运行库（VC++、VB6、DirectX）必备运行库

HTML学习笔记

喃喃污