菜单 搜索
首页 前端知识 前端三剑客之一--CSS

前端三剑客之一--CSS

2025-02-25 13:02:51 前端知识 前端哥 160 258 我要收藏

目录

1.什么是CSS

1.1什么是CSS

1.2发展史

1.3快速入门

1.4CSS3种导入方式

2.选择器

2.1基本选择器

2.2层次选择器

2.3结构伪类选择器 

2.4属性选择器(常用)

3.美化页面元素

3.1字体样式

3.2文本样式

3.3超链接伪类

3.4列表

3.5背景

4.盒子模型

4.1什么是盒子模型

4.2 边框

4.3内外边距

4.4圆角边框

4.5阴影

5.浮动

5.1标准文档流

5.2display

5.3 float

5.4父级边框塌陷的问题

5.5对比

6.定位

6.1相对定位

6.2绝对定位

6.3固定定位

6.4z-index

1.什么是CSS

如何学习

  1. css是什么

  2. css怎么用(快速入门)

  3. css选择器(重点+难点)

  4. 美化网页(文字,阴影,超链接,列表,渐变)

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画(特效效果)

1.1什么是CSS

Cascading Style Sheet层叠样式表

CSS:表现层(美化网页)

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

1.2发展史

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;
            声明2;
            }
     -->
    <style>
        h1{
        color:red;
        }
    </style>
</head>
<body>
<h1>我是</h1>
</body>
</html>

建议使用这种规范

css的优势:

  1. 内容和表现分离

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

  3. 样式十分丰富

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

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

1.4CSS3种导入方式

<!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>
        h2{
            color: aliceblue;
        }<!-- 以下两种都是第三种方式-->
        @import url("../CSS/demo1.css");
    </style>
    <link rel="stylesheet" href="../CSS/demo1.css">
</head>
<body>
    <!-- 重复了采用就近原原则
     优先级就近原则
     -->
     行内样式
    第一种导入方式
    <h1 style="color: black;">你好</h1> 
    第二种导入方式 内部样式
    <h2>你好</h2>
    第三种导入方式 外部样式
    <h3>你好</h3>
</body>
</html>
  • @import 规则必须放在 CSS 文件的开头，否则可能会导致样式不生效。
  • 与 <link> 标签相比，@import 规则的性能可能会稍差一些，因为它会在页面加载完成后再加载外部样式表。因此，建议优先使用 <link> 标签来导入外部样式表。

2.选择器

2.1基本选择器

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

  1. 标签选择器 选择一类标签

  2. 类 选择器 class 选择所有class属性一致的标签,跨标签

  3. id 选择器 全局唯一

<!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>
        /* id>class>标签*/
        /*标签选择器,会选择到页面上所有的这个标签的元素*/
        h1{
            color: blue;
            background: yellow;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
        /*类选择器格式  .class的名称{} 好处,可以多个标签归类,是同一个class,可以复用*/
        .a1{
            color: aqua;
            background: black;
        }
        /*id选择器*/

        #b1{
            color: greenyellow;
            background: red;
        }
    </style>
</head>
<body>
    <h1>学Java</h1>
    <p>听姜霁轩</p>
    <h2 class="a1">CLASS选择器</h2>
    <h3 id="b1">id选择器</h3>
</body>
</html>

生效方式:

id>class>标签

2.2层次选择器

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

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

2.子选择器 一代 儿子

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

3.相邻兄弟选择器 相邻向下只有一个 需要.class选择器

 .active+p{
            background: yellow;
         }

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

.active~p{
background:black;
}

2.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>
        ul li:first-child{
            color: rebeccapurple;
        }
        ul li:last-child{
            color: rebeccapurple;
        }
       /* 选择其父元素下的第一个子元素且该子元素为 p 元素，设置文字颜色为 rebeccapurple */
        p:nth-child(1){
             color: rebeccapurple;
        }
        /* 选择其父元素下的第一个 p 类型元素，设置文字颜色为 rebeccapurple */
         p:nth-of-type(2){
             color: rebeccapurple;
        }
    </style>
</head>
<body>
     <p>p1</p>
     <p>p2</p>
     <p>p3</p>
   <ul>
    <li>p1</li>
    <li>p2</li>
    <li>p3</li>
   </ul>
</body>
</html>

2.4属性选择器(常用)

id+class结合~

3.美化页面元素

3.1字体样式

<!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>
        /* family字体
        size大小
        weight粗细
        color字体颜色 */
        body{
            font-family: 楷体;
            color: black;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <h1>黑神话悟空</h1>
    <p>今日（2月1日），曾在《人民的名义》中饰演“丁义珍”的知名演员许文广在抖音发布短视频，表示自己最近在玩《黑神话：悟空》。“昨天晚上打到4点，终于走出黄风岭了！”原抖音地址>>>
        </p>
        <p>他还对游戏中的“陕北名歌”赞不绝口：“好听！特别喜欢！”并在视频中亲自献唱了一段“黄风岭，八百里，曾是关外富饶地”。
            此外他还提到，一开始打黄风大圣特别难，后来看了攻略才知道要拿定风珠，半小时就过关了。</p>
</body>
</html>

3.2文本样式

  1. 颜色 color rgb rgba

  2. 文本对齐模式 text-align=center

  3. 首行缩进 text-indent:2em

  4. 行高 line-height:

  5. 装饰 text-decoration:

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

<!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>
        /* 颜色:单词 RGB 0~F
        rgba a:0~1 
        text-align 排版居中
        text-indent 2em,段落首行缩进 
        行高,和  块的高度一致,就可以上下居中
        */
       h1{
        color: rgba(0, 255, 255,0.1);
        text-align: center;
       }
       .p1{
        text-indent: 2em;
       }
       .p3{
        background: #2700ff;
        height: 300px;
        line-height: 300px;
       }
       /* 下划线 */
       .a1{
        text-decoration: underline;
       }
       /* 中划线 */
       .a2{
        text-decoration: line-through;
       }
       /* 上划线 */
       .a3{
        text-decoration: overline;
       }
       a{
            text-decoration: none;
       }
       img,span{
        vertical-align: middle;
       }
    </style>
</head>
<body>
    <a href="">123</a>
    <p class="a1">123</p>
    <p class="a2">456</p>
    <p class="a3">789</p>
    <h1>黑神话悟空</h1>
    <p1>今日（2月1日），曾在《人民的名义》中饰演“丁义珍”的知名演员许文广在抖音发布短视频，表示自己最近在玩《黑神话：悟空》。“昨天晚上打到4点，终于走出黄风岭了！”原抖音地址>>>
        </p1>
        <p>他还对游戏中的“陕北名歌”赞不绝口：“好听！特别喜欢！”并在视频中亲自献唱了一段“黄风岭，八百里，曾是关外富饶地”。
            此外他还提到，一开始打黄风大圣特别难，后来看了攻略才知道要拿定风珠，半小时就过关了。</p>
            <p class="p3">jaisdjaisofhjwioehgjfiwenguwihjghjwijgewefgwe4gwe</p>
</body>
</html>
<!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>
       img,span{
       vertical-align: middle;/*不调会在底下对齐*/
       }
    </style>
</head>
<body>
    <img src="../img/1.jpg" alt="">
    <span>文章内容</span>
    
</body>
</html>

3.3超链接伪类

主要用hover

<!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;
        color: black;
      }
      /*鼠标悬浮的颜色(重点)*/
      a:hover
      {
        color: orange;
        font-size: 50px;
      }
      /*鼠标按住未释放的状态*/
      a:active{
        color: greenyellow;
      }
      /* 阴影颜色 水平偏移 垂直 阴影半径 */
      #price{
        text-shadow: red 10px 10px 1px;
      }
    </style>
</head>
<body>
 <a href="#">
  <img src="../img/1.jpg" alt="">
 </a>
 <p>
  <a href="">作者:孤独求败</a>
 </p>
 <p>
  <a href="">码出搞效,Java开发手册</a>
 </p>
 <p>
  <a href="" id="price">$111</a>
 </p>
</body>
</html>

3.4列表

3.5背景

 <style>
    div{
      width: 1000px;
      height: 700px;
      border: 1px solid black;
      background-image:url(../img/1.jpg) ;
      /* 默认是全部平铺的*/
    }
    .div1{
      background-repeat:repeat-x ;/*垂直方向只有一次,水平铺满位置*/
    }
  </style>

4.盒子模型

4.1什么是盒子模型

padding内边距 border边距 margin外边距

4.2 边框

  1. 边框粗细

  2. 边框样式

  3. 边框颜色

4.3内外边距

4.4圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border-radius: 10px;/*10px为半径*/
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.5阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 100px;
            border: 5px solid red;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5.浮动

5.1标准文档流

块级元素:独占一行

h1~h6 p div 列表...

行内元素:不独占一行

span a img strong

行内元素可以被包含在块级元素中,反之,则不可以

5.2display

也是一种实现行内元素排列方式,但是我们很多情况用float

行内排列：元素会像行内元素一样，在一行内依次排列，不会强制换行。多个 display 属性值为 inline-block 的元素可以在同一行显示，除非这一行没有足够的空间

<style>
        /* block 块元素
        inline 行内元素
        inline-block 是块元素,但是可以内联,在一行
        none */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>

5.3 float

.a1{
    float: right;
}

5.4父级边框塌陷的问题

clear

clear:right右侧不允许有浮动元素
left左侧不允许有浮动元素
both两次不允许有浮动元素
none允许浮动元素

解决方法:

  1. 增加父级高度(不建议)

  2. 增加一个空的div标签,清除浮动 在浮动父级的下面

.clear{
clear:both;
margin:0;
padding:0;
}

    3.overflow 在父级元素中增加一个 overflow:hidden

    4.父类添加一个伪类:after 避免创建一个div

#father:after{
content:''; 加一个空的内容很小
display:block;变成块div
clear:both;
}

小结:

  • 浮动元素后面增加空的div 简单,代码中尽量避免空div

  • 设置父元素高度 简单,元素假设有了固定高度,就会被限制

  • overflow 简单,下拉的一些场景,避免使用

  • 父类添加伪类 写法稍微复杂一点,但是没有副作用推荐使用

5.5对比

  • display

    方向不可以控制

  • float

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

6.定位

6.1相对定位

原来的位置相对于现在的位置向上偏移5px

.b1{
    height: 100px;
    position: relative;/*相对定位*/
    top: 5px;
}

相对定位:position:relative

6.2绝对定位

定位:基于xxx定位,上下左右

  1. 没有父级元素定位的前提下,相对于浏览器定位

  2. 假设父级元素存在定位,我们通常会相对于父级元素进行偏移

  3. 在父级元素范围内移动

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

position:absolute

6.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>
        body{
            height: 10000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: rebeccapurple;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: red;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
  <div >a</div>
  <div>b</div>
</body>
</html>

6.4z-index

z-index默认是0,最高无限

opacity=0.5背景透明度

转载请注明出处或者链接地址：https://www.qianduange.cn//article/21318.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Python如何处理excel中的空值和异常值

2025-02-25 13:02:33

Python CDSAPI 批量下载ERA5再分析数据

2025-02-25 13:02:33

局部变量和全局变量（Python）

2025-02-25 13:02:32

Python｜Windows 系统安装 triton 的方法

2025-02-25 13:02:32

通过 Ollama 本地部署 DeepSeek-r1:1.5b 模型后，用 Python 调用推理并生成基于 pytest PO 设计模式的 Playwright 自动化测试文件

2025-02-25 13:02:31

如何在 Python 代码中抛出异常

2025-02-25 13:02:30

python调用ollama库详解

2025-02-25 13:02:30

IsaacLab 从入门到精通（一） 环境配置和依赖安装

2025-02-25 13:02:30

python 中 Class（类）的详细说明，通俗易懂

2025-02-25 13:02:29

阿布量化：基于 Python 的量化交易框架

2025-02-25 13:02:28

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
3

CSS常用属性（文本属性）

2024-11-04 09:11:111000
4

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
5

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
6

vue使用datav echarts

2024-09-06 00:09:381000
7

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
8

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
9

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
10

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！