CSS入门

最新推荐文章于 2024-04-14 13:23:10 发布
最新推荐文章于 2024-04-14 13:23:10 发布
阅读量1.5k 收藏 36
点赞数 45
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzh202206/article/details/136133485
版权

目录

1、什么是CSS

1.1、什么是CSS

1.2、CSS发展史

1.3、快速入门

1.4、CSS的三种引入方式

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、边框

4.3、内外边距

4.4、圆角边框

4.5、盒子阴影

5、浮动

5.1、标准文档流

5.2、display

5.3、float

5.4、父级边框

5.5、对比

6、定位

6.1、相对定位

6.2、绝对定位

6.3、固定定位

6.4、Z-index

1、什么是CSS

如何学习

  1. css是什么

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

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

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

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效效果）

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

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

1.2、CSS发展史

CSS1.0

CSS2.0 DIV(块)+CSS HTML与CSS结构分离的思想，网页变得简单

CSS2.1 浮动、定位

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

1.3、快速入门

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <!--规范，<style>可以编写css代码，每个声明最好使用逗号分离
         语法：
             选择器{
                 声明1；
                 声明2；
                 声明3；
                 }
            -->
     <style>
         h1{
             color: red;
         }
     </style>
     <link rel="stylesheet" href="../CSS/Note.css">
 </head>
 <body>
     <h1>我是标题</h1>
 </body>
 </html>

建议规范

css优势：

  1. 内容和表现分离

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

  3. 样式十分丰富

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

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

1.4、CSS的三种引入方式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 ​
   <!--内部样式-->
   <style>
     h1{
       color: red;
     }
   </style>
 ​
   <!--外部样式-->
   <link rel="stylesheet" href="./CSS/style.css">
 </head>
 <body>
   <!--行内样式-->
   <h1 style="color: green">I am title.</h1>
 </body>
 </html>

优先级：就近原则

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

  • 链接式

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

  • 导入式

@import是css2.1特有的！

 <!--导入式-->
   <style>
     @import "CSS/style.css";
   </style>
 ​

2、选择器

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

2.1、基本选择器

  1. 标签选择器

用法：选中标签直接使用即可-选择器 如h1{}--同一标签同一样式！

  1. 类选择器

用法：.class的名称{}--可使用标签归类 跨标签 可以复用！

  1. id选择器

用法：#id的名称{}--id必须保持全局唯一！

不遵循就近原则 固定的 id选择器>类选择器>标签选择器

2.2、层次选择器

1、后代选择器 所有后代

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

2、子选择器 一代 儿子

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

3、相邻兄弟选择器 同辈 只有一个 相邻-向下延伸

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

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

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

2.3、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*ul的第一个子元素*/
    ul li:first-child{
      color: red;
    }
    /*ul的最后一子元素*/
    ul li:last-child{
      color: orange;
    }

    /*选中p1:定位父元素，选择父级元素的第一个元素 并且是当前元素才生效  按顺序找*/
    p:nth-child(2){
      background-color: yellow;
    }

    /*选中父元素下的p元素的第二个 按类型找*/
    p:nth-of-type(2){
      background-color: green;
    }
  </style>
</head>
<body>
  <h4>h4</h4>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>

  </ul>
</body>
</html>

效果如下：

2.4、属性选择器

id选择器和类选择器的结合

<!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: green;
      text-align: center;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Arial;

    }

    /*属性名/属性名=属性值
    = 绝对等于
    *= 包含这个元素
    ^= 以这个元素开头
    $= 以这个结尾
    */


    /*a[id=name]{*/
    /*  color: red;*/
    /*}*/

    /*a[class*="link"]{*/
    /*  color: orange;*/
    /*}*/

    /*a[herf^="http"]{*/
    /*  color: yellow;*/
    /*}*/

    /*a[herf$="jpg"]{*/
    /*  color: green;*/
    /*}*/

  </style>
</head>
<body>
<p class="demo">
  <a href="http://www.baidu.com" class="links item last" id="name">1</a>
  <a href="http://blog.kuangstudy.com" class="link item">2</a>
  <a href="J.jpg" target="_blank" >3</a>
  <a href="W.doc">4</a>
  <a href="P.pdf">5</a>
  <a href="acs">6</a>
</p>

</body>
</html>

需记

 = 绝对等于
 *= 包含这个元素
 ^= 以这个元素开头
 $= 以这个结尾

3、美化网页元素

3.1、为什么要美化网页

  1. 有效传递页面信息

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

  3. 凸显页面主题

  4. 提高用户的体验

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

3.2、字体样式

font-family; 字体类型

font-size;字体大小

font-weight;字体粗细

color;字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    font-family; 字体类型
    font-size;字体大小
    font-weight;字体粗细
    color;字体颜色
    -->

  <style>
    body{
      font-family: "Arial Black",楷体;
      color: green;
    }
    h1{
      font-size: 50px;
    }
    .p1{
      font-weight: bolder;
    }
  </style>
</head>
<body>
    <h1>biaoti</h1>
    <p>
      这是一个故事
    </p>

    <p>
      It needs English to write.
    </p>
</body>
</html>

3.3、文本样式

  1. 颜色

  2. 文本对齐方式

  3. 首行缩进

  4. 行高

  5. 装饰

  6. 文本图片水平对齐

<!--
    颜色：
        单词
        RGB 0~F
        RGBA A:0~1
    text-align:center;排版 居中
    text-index:2em;段落首行推进
    line-height:行高 和快的高度一致即可上下居中line-height=height
    text-decoration: overline;//上划线
    text-decoration: line-through;//中划线
    text-decoration: overline;//下划线
	text-decoration: none;//超链接去下划线
	vertical-align: middle;//文本图片水平对齐
-->

3.4、阴影

/*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
    #id{
      text-shadow: aliceblue 10px -10px 2px;
    }

x轴以右为正、y轴以下为正

3.5、超链接伪类

/*默认的颜色*/
    a{
      text-decoration: none;
      color: green;
    }
    /*鼠标悬浮的状态（hover、active）*/
    a:hover{
      color: orange;
      font-size: 50px;
    }

3.6、列表

html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/style2.css">
</head>
<body>
    <div id="nav">
        <h2 class="title">商品分类</h2>
        <ul>
            <li><a href="">你好 请登录</a> <a href="" class="register">免费注册</a></li>
            <li><a href="">我的订单</a></li>
            <li><a href="">我的京东</a></li>
            <li><a href="">京东会员</a></li>
            <li><a href="">京东会员</a></li>
            <li><a href="">企业采购</a></li>
            <li><a href="">手机京东</a></li>
            <li><a href="">关注京东</a></li>
            <li><a href="">客服服务</a></li>

        </ul>
    </div>

</body>
</html>

对应css：

#nav{
    width: 300px;
    background: gray;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*
list-style
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
    background: gray;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;

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

3.7、背景

背景颜色 --background-color: #fff;

背景图片 --background-image: url("image/购物车.png");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 1000px;
      height: 700px;
      border: 1px solid red;
      background-image: url("image/购物车.png");
    /*  默认全部平铺*/
    }
    .div1{
      background-repeat: repeat-x;
    }
    .div2{
      background-repeat: repeat-y;
    }
    .div3{
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

3.8、渐变

可查询：Grabient

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

4、盒子模型

4.1、什么是盒子模型

margin：外边距

padding：内边距

border：边框

4.2、边框

  1. 边框的粗细

  2. 边框的样式

  3. 边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*!*body总有一个默认的外边距  常见操作如下*!*/
    /*h1,ul,li,a,body{*/
    /*  margin: 0;*/
    /*  padding: 0;*/
    /*  text-decoration: none;*/
    /*}*/

    /*border:粗细 样式 颜色*/
    #box{
      width: 300px;
      border:1px solid red;
    }
    form{
      background: green;
    }

    h2{
      font-size: 16px;
      background-color: #00f;
      line-height: 30px;
      color: white;
      text-align: center;
    }
    div:nth-of-type(1) input{
      border: 3px solid black;
    }
    div:nth-of-type(2) input{
      border: 1px dashed red;
    }
    div:nth-of-type(3) input{
      border: 3px solid gray;
    }
  </style>
</head>
<body>
<div class="box">
  <h2>会员登陆</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码:&nbsp;&nbsp;</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱:&nbsp;&nbsp;</span>
      <input type="text">
    </div>
  </form>
</div>
</body>
</html>

4.3、内外边距

margin：外边距

padding：内边距

各四个参数，分别对应上左下右（顺时针旋转->也可两个参数 表上下和左右->也可以一个参数表上下左右

计算方式：margin+border+padding+内容宽度

4.4、圆角边框

四个角为主场：右上 左上 左下 右下

div{
      width: 200px;
      height: 100px;
      border:10px solid red;
      border-radius: 100px;
    }

4.5、盒子阴影

margin:0 auto;//居中 要求：块元素有固定的宽度。

div{
      width: 200px;
      height: 100px;
      box-shadow:10px 10px 100px yellow;
    }

5、浮动

5.1、标准文档流

块级元素：独占一行

h1-h6 p div 列表……

行内元素：不独占一行

span a img strong……

行内元素可包含在块级元素中，反之不可。

5.2、display

block：块元素

inline：行内元素

inline-block；行内块元素（可内联的块元素）

5.3、float

float 左右浮动--脱离限制漂浮起来

float：left;

float：right;

5.4、父级边框

<!-- 清除浮动
    
1.给浮动的父元素加一个高度
2、给浮动下面建一个空白的div，起名clearfix
3.在父级元素增加一个 overflow：hidden/auto;
4.父类增加伪类after
    -->
.big{
        height: 300px;
    } 

<div class="big">
    
    </div>

ul{
        overflow: hidden;
   }

ul::after{
     clear: both;
     display: block;
     content: "";
        }

小结：

1.浮动元素后面增加空div

简单，但代码中尽量避免空div。

2.设置父元素的高度

简单，但元素设有了固定高度就会被限制。

3.overflow

简单，但下拉的一些场景避免使用。

4.父类添加一个伪类：after（推荐）

写法复杂，但没有副作用。

5.5、对比

  • display

方向不可控制

  • float

漂浮起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

6、定位

6.1、相对定位

position:relative;

相对于原来的位置进行指定的偏移，相对定位进行后他仍然在标准文档流中，原来的位置仍然会被保留

相对定位：position:relative; 参照物：自身左上角的位置（原点） 结论： 1.特点：没有固定在浏览器上 会随页面滚动而滚动 只调整了我们给值的位置 2.占实际位置 位置不会被下面元素占去 说明：没有脱离标准文档流 3.调整定位位置的取值 top：离原点上边距离 left：原点左边框 right：原点右边框 bottom：原点下边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .out{
            width: 300px;
            background-color: aquamarine;
        }
        .inbox{
            width: 100px;
            height: 100px;
            background-color: coral;
            position: relative;
            /* top: 100px; */
            /* left: 200px; */
            right: 40px;
            bottom: 20px;
        }
    </style>

</head>
<body>
    <div class="out">
        <div class="inbox"></div>
        <h1>我是第1个h1</h1>
        <h1>我是第2个h1</h1>
        <h1>我是第3个h1</h1>
        <h1>我是第4个h1</h1>
        
    </div>
</body>
</html>

定位如下：

top: 100px; 
left: 200px;
right: 40px;
bottom: 20px;

6.2、绝对定位

position: absolute;

结论：

1.绝对定位脱离了标准流

参照物：

1.如果绝对定位元素的父元素没有设置过任意定位，

参照物是最外边元素的左上角（浏览器的左上角）

2.如果绝对定位元素的父元素有任意定位，

参照物就是离最近设置了定位的父类元素的左上角

相对于父级或浏览器的位置，进行指定偏移，绝对定位进行后他不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .out{
            width: 300px;
            background-color: blueviolet;
            /* position: fixed;
            top: 100px;
            left: 300px; */
        }

        /* 子绝父相
        子元素是绝对定位 父元素就必须是相对定位 */
        .b{
            width: 200px;
            height: 200px;
            background-color: crimson;
            position: relative;
            top: 10px;
            left: 10px;
        }
        .in{
            width: 100px;
            height: 100px;
            background-color: bisque;
            position: absolute;
            top: 10px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="b">
            <div class="in"></div>
        </div>
        
        <h1>我是第1个h1</h1>
        <h1>我是第2个h1</h1>
        <h1>我是第3个h1</h1>
        <h1>我是第4个h1</h1>
        
    </div>
</body>
</html>

6.3、固定定位

固定定位：position:fixed;

参照物：浏览器屏幕

结论：

1.特点：固定在浏览器上 不会随页面滚动而滚动

2.不占实际位置 位置被下面元素占去

说明：脱离标准文档流

3.调整定位位置的取值

top：离浏览器上边框距离

left：浏览器左边框

right 浏览器右边框

bottom：浏览器下边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .out{
            width: 300px;
            background-color: burlywood;
        }
        .inbox{
            width: 100px;
            height: 100px;
            background-color: brown;
            position: fixed;
            /* top: 100px; */
            /* left: 200px; */
            bottom: 100px;
            right: 300px;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="inbox"></div>
        <h1>我是第1个h1标签</h1>
        <h1>我是第2个h1标签</h1>
        <h1>我是第3个h1标签</h1>
        <h1>我是第4个h1标签</h1>
        
    </div>
</body>
</html>

6.4、Z-index

z-index-->改变层次的优先级：最低是0，无上限。（正常情况下是一层一层往上铺对下部层级进行遮罩）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素定位脱标后的优先级</title>

    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .a{
            width: 500px;
            height: 500px;
            background-color: blanchedalmond;
        }
        .b{
            width: 400px;
            height: 400px;
            background-color: rgb(237, 122, 28);
        }
        .c{
            width: 300px;
            height: 300px;
            background-color: rgb(21, 216, 44);
            z-index: 1;
        }
        .d{
            width: 200px;
            height: 200px;
            background-color: rgb(203, 38, 236);
            z-index: 2;
        }
        div{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
</body>
</html>

背景透明度：opacity：0.5；

‘乊丆’
关注
  • 45
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS零基础快速入门（详细教程）
小杨的博客
05-20 5385
CSS是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言；CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；CSS还能够对网页中元素位置的排版进行像素级精确控制。
CSS基础
weixin_43366437的博客
07-27 143
css基础内容
CSS快速入门
最新发布
cool_tao6的博客
04-14 2699
CSS（Cascading Style Sheet），层叠样式表，用于控制页面的样式。CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。CSS可以理解为 “东方四大邪术” 之化妆术，可以对页面的展示进行 “化妆”。
快速入门CSS
weixin_72388638的博客
04-04 191
主要用于网页的美化。
CSS入门PPT
01-19
CSS入门，适合初学者，基础的CSS操作 CSS(Cascading Style Sheet)级联样式单（层叠样式表） HTML5建议把页面外观交给CSS控制。 优点： 表达效果丰富 （元素样式、精确定位） 文档体积小（重复定义 提高传输速度 ...
css入门入门入门入门
05-23
css入门入门入门入门
CSS入门讲解
10-11
WEB项目第二天，HTML和CSS入门讲解，内容还是比较详细的
CSS入门教程篇
10-30
CSS入门教程
css 入门基础教程
09-25
css 入门基础，适合刚开始学习css的朋友，最好先有一定的html编写经验。
html+css快速入门教程 一周时间轻松上手
11-08
html+css快速入门教程 一周时间轻松上手
CSS入门（全）
qq_43476880的博客
05-08 1588
1、什么是CSS 如何学习 1、CSS是什么 2、CSS怎么用 3、CSS选择器 4、美化网页（文字、阴影、超链接、渐变…） 5、盒子模型 6、浮动 7、定位 8、网页动画（特效效果） 1.1什么是CSS CSS 指层叠样式表 (Cascading Style Sheets) CSS:表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动… 1.2CSS发展史 CSS1.0 CSS2.0 DIV（块）+CSS,HTML与CSS结构分离思想，网页变得简单，SEO
Css经典笔记
热门推荐
飘
04-24 1万+
# 课程目标: &gt; 1. 学会使用CSS选择器 &gt; 2. 熟记CSS样式和外观属性 &gt; 3. 熟练掌握CSS各种选择器 &gt; 4. 熟练掌握CSS各种选择器 &gt; 5. 熟练掌握CSS三种显示模式 &gt; 6. 熟练掌握CSS背景属性 &gt; 7. 熟练掌握CSS三大特性 &gt; 8. 熟练掌握CSS盒子模型 &gt; 9. 熟练掌握CSS浮动 &gt; 10.熟练...
CSS超基础，快速入门
weixin_57654074的博客
11-27 288
CSS基础，快速入门。
CSS常见选择器
qq_63218110的博客
12-04 2136
本篇博客主要介绍CSS的引入方式，选择器，常见的元素属性，以及弹性布局
tailwindcss 入门
03-29
入门Tailwind CSS需要以下步骤： 1. 安装：使用npm或yarn安装Tailwind CSS。 2. 配置：创建一个配置文件（通常是`tailwind.config.js`），在其中定义你的自定义样式和配置选项。 3. 引入：在你的HTML或CSS文件中引入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值