CSS详解

于 2024-08-23 13:31:01 发布
阅读量404 收藏 8
点赞数 8
分类专栏： 高级编程 文章标签： css tensorflow 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiugtt6141121/article/details/141463559
版权

在html如何引入css

1.在html标签内部引入

<标签名 style="样式名:样式值;样式名:样式值;样式名:样式值;...."></标签名>

需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px 实线 边框颜色为红色。

步骤：

1.创建html页面

2.在html页面中书写div标签

3.在div标签中书写style属性，在style属性值中书写css样式

4.使用浏览器运行html页面查看结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px  实线 边框颜色为红色。
        在html页面中引入css方式一：
            <标签名 style="样式名:样式值;样式名:样式值;样式名:样式值;...."></标签名>
       说明：
        1.在css中字体颜色使用样式名：color
        2.在css中字体大小使用样式名：font-size
        3.在css中border-width表示边框宽度
        4.在css中border-style表示边框样式  实线(solid) 虚线 等
        5.在css中border-color表示边框颜色
    -->
    <div style="color: yellow;font-size: 100px;border-width: 1px;border-style: solid;border-color: red">div1</div>

    <!--
        对于上述针对边框我们可以使用css的复合样式，就是一个样式，同时使用多个样式值。
        border:1px solid red
    -->

    <div style="color: yellow;font-size: 100px;border:1px solid red">div1</div>
    <!--
        对于边框：样式必须书写，其他可以不写，颜色不写默认使用字体颜色
    -->
    <div style="color: yellow;font-size: 100px;border:solid">div1</div>
    <!--错误的，没有边框样式-->
    <div style="color: yellow;font-size: 100px;border:red 1px">div1</div>
    <!--
        在css中必须加单位
    -->
    <div style="color: yellow;font-size: 100px;border:solid 1px green">div1</div>
</body>
</html>

小结：

1.在html页面中标签内部引入css格式：

<标签名 style="样式名:样式值;样式名:样式值;样式名:样式值;...."></标签名>
注意：style的属性值中是css

2.在css中有如下样式：

1.字体颜色样式名：color
2.字体大小样式名:font-size
3.边框宽度样式名：border-width
4.边框样式的样式名：border-style  solid 表示实心
5.边框颜色样式名：border-color

3.注意：上述对于边框样式我们分别使用了宽度 样式 颜色，虽然可以实现，但是比较麻烦，在实际使用中我们对于边框使用css样式可以使用层叠样式，就是多个样式都作用在某一个标签上。

4.关于给边框设置css样式注意事项：

1.边框样式border-style是必须给的，边框颜色border-color可以不给，默认使用字体颜色。border-width可以不给具有默认宽度

<div style="color: green;font-size: 100px;border: solid ">div1</div>

5.在css中只要带单位的例如px不能省略

2.在head标签中使用一个标签:style引入 理解

上述引入方式弊端：

1.css样式和html标签耦合在一起

2.如果一个页面中具有多个标签使用同一个样式，那么css代码严重重复了

格式：

<style type="text/css">
    作用的标签{
        样式名:样式值;
        样式名:样式值;
        ......
    }
</style>

需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px 实线 边框颜色为红色。

步骤：

1.创建html页面

2.书写div标签

3.在head标签中书写css样式

4.使用浏览器运行html页面查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入css代码-->
    <style type="text/css">
        /*使用css样式作用的标签*/
        div{
            /*字体为黄色，*/
            color: yellow;
            /*字体大小100px， */
            font-size: 100px;
            /*边框为 1px  实线 边框颜色为红色。*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!--
        需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px  实线 边框颜色为红色。
        在html页面中引入css方式二：
            <style type="text/css">
            作用的标签{
                样式名:样式值;
                样式名:样式值;
                ......
            }
        </style>
    -->
    <div>div1</div>
    <div>div1</div>
    <div>div1</div>
    <div>div1</div>
    <div>div1</div>

</body>
</html>

小结：

在html页面中引入css的第二种方式：

在head标签内部引入：

<style type="text/css">
    作用的标签{
        样式名:样式值;
        样式名:样式值;
        ......
    }
</style>

3.在head标签中使用link标签引入外部的css文件 （重点）

在html页面中使用第二种引入css的弊端：

1.css样式和html标签耦合在一起，我们希望html页面就是用来书写html标签的，而第二种方式在html页面中还书写了css样式，没有完全解耦合

2.如果多个页面中具有多个标签使用同一个样式，那么css代码严重重复了

解决问题：

在html页面的外部创建一个css文件，在该文件中书写css样式，然后在html页面内部使用link标签引入外部的css文件。

使用步骤：

1.在外部创建一个css文件

2.创建一个html页面

3.在html中使用标签link来引入css文件

 <!--引入外部的css文件-->
    <!--
        1.使用link标签引入外部的css文件
        2.rel="stylesheet" 表示css层叠样式表，这个属性必须书写
        3.type="text/css" 表示当前引入的是一个css文件，可以不写
        4.href="../css/demo02.css" 表示引入外部的css文件
    -->
    <link rel="stylesheet" type="text/css" href="../css/demo02.css">

4.书写html标签

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

        引入外部的css文件，在head标签内部使用link标签引入外部的css文件
        1.使用link标签引入外部的css文件
        2.rel="stylesheet" 表示css层叠样式表，这个属性必须书写
        3.type="text/css" 表示当前引入的是一个css文件，可以不写
        4.href="../css/demo02.css" 表示引入外部的css文件
         <link rel="stylesheet" type="text/css" href="外部css文件地址">
    -->
    <link rel="stylesheet" href="../css/demo01.css" type="text/css">

</head>
<body>
    <!--
        需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px  实线 边框颜色为红色。
        在html页面中引入css方式三：
         <link rel="stylesheet" type="text/css" href="外部css文件地址">
    -->
    <div>div1</div>
    <div>div1</div>
    <div>div1</div>
    <div>div1</div>
    <div>div1</div>

</body>
</html>

5.使用浏览器运行查看效果

小结：

在html页面中引入外部的css文件格式：

 <link rel="stylesheet" type="text/css" href="引入外部的css文件路径">

3. CSS选择器(理解)

1.概念：

css选择器，就是让我们的css样式选择作用在哪一些具体的标签之上。

2.常见选择器

2.1标签名选择器 掌握

标签名{
	样式名:样式值;
	样式名:样式值;
	......
}

举例：
 	div {
            color: yellow;
            /*字体大小100px*/
            font-size: 100px;
            /*边框为 1px  实线 边框颜色为红色*/
            border: 1px solid red;
        }

2.2.ID选择器 掌握

需求： 页面上多个div，让第二个div：字体红色 字体大小50px，边框为1px，实线，红色

格式：

#id属性值{
    样式名:样式值;
	样式名:样式值;
	......
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入外部的css-->
    <link rel="stylesheet" href="../css/demo02.css">
</head>
<body>
    <!--需求： 页面上多个div，让第二个div：
    字体红色 字体大小50px，边框为1px，实线，红色-->
    <div>div1</div>
    <div id="two">div2</div>
    <div>div3</div>
</body>
</html>

/*
    id选择器：
        #id属性值{
            样式名:样式值;
            样式名:样式值;
            ......
        }
 */
#two{
    /*字体红色*/
    color: red;
    /*字体大小50px， */
    font-size: 50px;
    /*边框为 1px  实线 边框颜色为红色。*/
    border: 1px solid red;
}

小结：

1.id选择器格式：

#id属性值{
    样式名:样式值;
	样式名:样式值;
	......
}

2.id选择器特点：只能作用在某一个标签上，因为id是唯一的

2.3class类选择器 掌握

格式：

.class属性值{
     样式名:样式值;
	 样式名:样式值;
	 ......
}

注意：如果不是所有标签，并且大于一个标签的情况下可以考虑使用class类选择器。

需求：页面上有多个div，让第二和第三个div以同样的样式去显示： 字体颜色红色，50px字体大小，边框1px 实线 红色。

步骤：

1.创建html页面

2.书写标签

3.书写css样式

4.使用浏览器查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入外部的css-->
    <link rel="stylesheet" href="../css/demo03.css">
</head>
<body>
    <!--需求：页面上有多个div，让第二和第三个div以同样的样式去显示：
    字体颜色红色，50px字体大小，边框1px  实线  红色。-->
    <div>div1</div>
    <div class="three">div2</div>
    <div class="three">div3</div>
</body>
</html>

/*
    class类选择器：
        .class属性值{
            样式名:样式值;
            样式名:样式值;
            ......
        }
 */
.three{
    /*字体红色*/
    color: red;
    /*字体大小50px， */
    font-size: 50px;
    /*边框为 1px  实线 边框颜色为红色。*/
    border: 1px solid red;
}

小结：

1.类选择器格式：

.class属性值{
     样式名:样式值;
	 样式名:样式值;
	 ......
}

4.CSS常用的样式(理解,自学)

1.标签的高度、宽度以及标签的边框样式

【1】width：用于设置标签的宽度

【2】height：标签的高度

【3】边框的css样式：

1)边框样式：border-style solid 实线 dashed 虚线 none 无边框默认 样式必须书写

2)边框宽度：border-width 必须加单位px

3)边框颜色：border-color

需求：给页面某个div设置：宽度200像素，高度200像素，1像素实线黑色的框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            /*标签宽度200像素*/
            width: 200px;
            /*高度200像素*/
            height: 200px;
            /*1像素实线黑色的框*/
            border: 1px solid black;
            /*border: 1px dashed black;*/
        }
    </style>
</head>
<body>
    <!--需求：给页面某个div设置：宽度200像素，高度200像素，1像素实线黑色的框。-->
    <div>div1</div>
</body>
</html>

小结：

1.标签高度：height

2.标签宽度：width

3.边框样式：border-style 边框宽度 border-width 边框颜色 border-color

2. 转换：display(掌握)

在css中对于高度和宽度只使用于块级标签(单独占一行的标签)(div p br hn等)，不适用于行内标签(共处一行input span等)。如果我们希望高度和宽度可使用在行内标签上我们可以使用display样式将行内标签转换为块级标签。

display作用：

1.可以将行内标签转换为块级标签。display:block

2.可以将块级标签转换为行内标签。display:inline

3.可以对于某个标签进行隐藏：display:none

需求：定义几个行内元素span，其中将一部分转换为块级标签，进行对比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span{
            /*高度*/
            height:100px;
            /*宽度*/
            width: 100px;
            /*边框*/
            border:1px solid red;
            /*转换为块级标签*/
            display: block;
        }


        div{
            /*高度*/
            height:100px;
            /*宽度*/
            width: 100px;
            /*边框*/
            border:1px solid red;
            /*转换行内标签*/
            display: inline;
        }
    </style>
</head>
<body>
    <!--需求：定义几个行内元素span，其中将一部分转换为块级标签，进行对比。
        注意：
            1.高度和宽度只适用于块级标签，不适用于行内标签
            2.display: block 块级标签
            3.display: inline 行内标签
            4.display: none 隐藏标签
     -->
    <span>span1</span>
    <span style="display: none">span2</span>


    <div>div1</div>
    <div>div2</div>
</body>
</html>

小结：

1.display样式可以实现标签之间的转换并且实现标签的隐藏

1.可以将行内标签转换为块级标签。display:block
2.可以将块级标签转换为行内标签。display:inline
3.可以对于某个标签进行隐藏：display:none 掌握

3.字体、行高 line-height

1.字体颜色：color

2.字体大小：font-size

3.行高：line-height ，通过设置行高可以让某个子标签居中显示

需求：书写两个div标签，然后在div标签中写两个span标签。在span标签中演示字体颜色和行高。

分别给2个div设置style样式：height: 50px; width: 200px; border: 1px solid #000;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--需求：书写两个div标签，然后在div标签中写两个span标签。在span标签中演示字体颜色和行高。
    分别给2个div设置style样式：height: 50px; width: 200px; border: 1px solid #000;-->
    <div style="height: 50px; width: 200px; border: 1px solid #000;">
        <span style="color: red;font-size: 10px">柳岩</span>
        <span>杨幂</span>
    </div>
    <div style="height: 50px; width: 200px; border: 1px solid #000;">
        <!--
            行高：line-height设置为父标签一样的高度可以让子标签上下居中显示
        -->
        <span style="line-height: 50px">马蓉</span>
        <span>李小璐</span>
    </div>
</body>
</html>

小结：

1.字体颜色：color

2.字体大小：font-size

3.行高：line-height ，通过设置行高可以让某个子标签上下居中显示。子标签的行高的值和父标签的高度值一致

4.背景： 掌握

1.背景颜色样式：background-color

2.引入的背景图片：background-image: url(图片的路径地址);

3.引入图片的平铺方式(展现形式)：background-repeat

背景平铺方式取值：
no-repeat： 不平铺
repeat-x ： 横向平铺
repeat-y ： 纵向平铺
默认的是铺满整个标签

需求：给body设置浅灰色(#eee)的背景色。在body中定义1个div标签，给div标签添加宽度、高度、设置背景颜色为白色(#fff)并加边框，最后设置背景图片，演示背景平铺方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*给body设置浅灰色(#eee)的背景色*/
        body {
            background-color: #eee;
        }

        div {
            /*宽度*/
            width: 500px;
            /*高度*/
            height: 500px;
            /*设置背景颜色为白色(#fff)并加边框*/
            background-color: #fff;
            /*边框*/
            border: 1px black solid;
            /*引入的背景图片：background-image: url(图片的路径地址); */
            background-image: url("../img/lyf.png");
            /*
                1.图片默认的是铺满整个标签，图片填充了整个标签内部
                2.no-repeat 不平铺 正常显示一张图片
                3.repeat-x 横向平铺  图片在x轴上显示
                4.repeat-y 纵向平铺 图片在y轴上显示
            */
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
<!--需求：给body设置浅灰色(#eee)的背景色。在body中定义1个div标签，
给div标签添加宽度、高度、设置背景颜色为白色(#fff)并加边框，最后设置背景图片，演示背景平铺方式。-->
<div>div1</div>
</body>
</html>

小结：

1.背景颜色：background-color

2.背景图片：background-image: url(图片的路径地址);

3.背景图片的平铺方式：background-repeat，具有如下四种情况：、

1.图片默认的是铺满整个标签，图片填充了整个标签内部
2.no-repeat 不平铺 正常显示一张图片
3.repeat-x 横向平铺  图片在x轴上显示
4.repeat-y 纵向平铺 图片在y轴上显示
攒了一袋星辰
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
DIV+CSS详解
03-06
关于DIV与CSS技术详细说明，PHP开发技术的必需品。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
css详解box-sizing.zip
01-06
综上所述，"css详解box-sizing.zip"这个压缩包是一个全面学习和理解CSS Box Sizing特性的资源集合，包括了理论解释、实例演示和相关联的CSS属性，对于想要深入掌握CSS布局的开发者来说非常有价值。通过这些资料，...
divcss详解实例
11-02
【div+css详解实例】 在Web开发中，`div+css`是一种常见的布局技术，它结合了HTML的`div`标签和CSS（层叠样式表）来实现网页的结构化和美化。`div`标签主要负责定义网页上的区块，而CSS则用来控制这些区块的样式和...
CSS Hack详解
09-25
CSS Hack是一种技术手段，用于解决由于不同浏览器对CSS解析不一致导致的页面渲染问题。由于各个浏览器厂商对CSS规范的实现可能存在差异，特别是在早期版本的Internet Explorer与其他浏览器之间，这种差异尤为明显。...
CSS的:host伪类：精粹自定义Web组件选择艺术
2401_85702623的博客
08-18 568
Web组件是一种自定义HTML元素，允许开发者封装HTML、CSS和JavaScript，创建可重用的组件。影子DOM为这些组件提供了样式和DOM结构的封装。:host伪类允许CSS选择器穿透影子DOM，选择自定义元素的宿主元素。
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 714
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
2402_85758349的博客
08-17 916
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
CSS+JS实现一个鼠标移动的高亮边框效果
流绪@微梦
08-19 537
我们再在 .card::before 加上一个 transform属性，同时在 .card 上加上 overflow: hidden属性，观察浏览器，神奇的效果出现了！想要实现高亮的效果，我们还需要在 .card 和 .inner 之间再插入一层，这一层是我们实现高亮的关键！假如图中的小圆圈为鼠标位置，当鼠标移动到此位置时，只需要计算把每张卡片中间层的中心偏移到鼠标的位置即可。在Windows系统里有一个很棒的细节效果，元素的渐变高亮边框是可以感知鼠标的，边框的高亮部分会跟随鼠标的移动而移动。
探索tailwindcss多主题切换
xuefeng11111的博客
08-18 441
探索tailwind+css变量切换主题
CSS 对齐
wjs2024的博客
08-19 366
CSS对齐是网页设计和布局的关键部分。通过掌握文本对齐、块级元素对齐、Flexbox对齐和Grid对齐，开发者可以创建出既美观又响应式的网页布局。每种方法都有其适用场景，选择合适的对齐方式可以大大提高开发效率和页面性能。
原神4.8版本重点培养和抽到角色数据表：修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列
lulei5153的博客
08-22 126
当用户修改某个字段（等级、命座、天赋）时，不仅更新当前表格的数据，还会找到另一个表格中对应的角色，并更新其数据。最后，重新渲染两个表格以显示最新的数据。这样可以确保两个表格的数据始终保持一致。
响应式 Web 设计：纯 HTML 和 CSS 的实现技巧
windowshht的博客
08-22 608
响应式 Web 设计是现代网页开发的重要组成部分，能够为用户提供一致的体验。通过使用纯 HTML 和 CSS，您可以实现灵活的布局、适应不同设备的图像和样式。本文介绍的技巧和示例将帮助您在项目中有效地应用响应式设计。希望您能在实践中不断探索和优化，创造出更好的用户体验。如需深入了解响应式设计的更多内容，建议参考相关书籍和在线资源，持续学习和实践。
css加载中动画
程序员
08-19 222
css加载中动画
“CSS”第一步——WEB开发系列13
一条晒干的咸鱼的博客
08-19 625
​CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
不同分辨率下vue页面的高度自适应
weixin_72439307的博客
08-19 216
html高度自适应
响应式web设计,纯HTML和CSS的实现技巧( 9 种)
最新发布
呼叫6945的博客
08-22 434
响应式Web设计（Responsive Web Design，RWD）旨在使网站能够在各种设备和屏幕尺寸上良好地显示和操作。
css 文字图片居中及网格布局
m0_69254007的博客
08-16 348
【代码】css 文字图片居中及网格布局。
CSS实现鼠标hover展开菜单
p_s_p的博客
08-22 128
【代码】CSS实现鼠标hover展开菜单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攒了一袋星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值