2023 【黑马程序员】CSS 第一天

已于 2023-12-15 19:11:34 修改
阅读量73 收藏
点赞数
文章标签： css 前端
于 2023-12-15 19:09:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abeijixingdeye/article/details/135006116
版权

目录

一、CSS 初体验

1. CSS 定义

2. CSS 引入方式

二、选择器

1. 标签选择器

2. 类选择器

3. id 选择器

4. 通配符选择器

5. 画盒子

三、文字控制属性

1. 字体大小

2. 字体粗细

3. 字体样式

4. 行高

5. 字体族

6. font 复合属性

7. 文本修饰属性

8. color 文字颜色

 四、调试工具 – 谷歌浏览器

 五、综合案例

 电影详情

一、CSS 初体验

1. CSS 定义

  • 层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码

<style>

        /* 选择器 { } */

        p {

            /* CSS 属性 */

            color: red;

        }

 </style>

 <p>体验 CSS</p>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器 { } */
        p {
            /* CSS 属性 */
            color: red;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p>体验 CSS</p>
</body>

</html>

 网页运行结果：

2. CSS 引入方式

1.内部样式表：学习使用 

  • CSS 代码写在 style 标签

2.外部样式表：开发使用

  • CSS 代码写在单独的 CSS 文件中（.css）
  • 在 HTML 使用 link 标签引入

  • <link rel="stylesheet" href="./my.css">

3.行内样式：配合 JavaScript 使用

  • CSS 写在标签的 style 属性值

  • <div style="color: red; font-size:20px;">这是 div 标签</div>


/* css代码 */
p {
    color: red;
    font-size: 20px;
}
<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./my.css">
</head>

<body>
    <p>猫猫</p>
    <div style="color: green;font-size: 30px;">犬犬</div>
</body>

</html>

网页运行结果：

二、选择器

作用：查找标签，设置样式

基础选择器:

  • 标签选择器
  • 类选择器
  • id 选择器
  • 通配符选择器

1. 标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式

例如：p, h1, div, a, img

<style>

        p {

            color: red;

        }

 </style>

注意：标签选择器无法差异化同名标签的显示效果

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>

<body>
    <p>小犬犬</p>
    <p>强壮犬</p>
    <p>打嗝犬</p>
    <p>犬犬国王</p>
</body>

</html>

网页运行结果：

2. 类选择器

作用：查找标签，差异化设置标签的显示效果

步骤：

  • 定义类选择器 → .类名
  • 使用类选择器 → 标签添加 class="类名“

<style>

    /* 定义类选择器 */

    .red {

        color: red;

    }

</style>

<!-- 使用类选择器 -->

<div class="red">这是 div 标签</div>

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .size {
            font-size: 40px;
        }
    </style>
</head>

<body>
    <p class="red">小犬犬</p>
    <p class="red size">强壮犬</p>
    <p class="green">ac犬</p>
</body>

</html>

网页运行结果：

注意：

  • 类名自定义，不要用纯数字或中文，尽量用英文命名
  • 一个类选择器可以供多个标签使用
  • 一个标签可以使用多个类名，类名之间用空格隔开 

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd

3. id 选择器

作用：查找标签，差异化设置标签的显示效果

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

  • 定义 id 选择器 → #id名
  • 使用 id 选择器 → 标签添加 id= "id名

<style>

    /* 定义 id 选择器 */

    #red {

    color: red;

    }

 </style>

    <!-- 使用 id 选择器 -->

    <div id="red">这是 div 标签</div>

注意：同一个 id 选择器在一个页面只能使用一次

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        #red {
            color: red;
        }

        #size {
            font-size: 40px;
        }
    </style>
</head>

<body>
    <p id="red">小犬犬</p>
    <p id="red size">强壮犬</p>
</body>

</html>

网页运行结果：

4. 通配符选择器

作用：查找页面所有标签，设置相同样式

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式 

* {

    color: red;

}

经验：

  • 通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距
<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>

<body>
    <p>小犬犬</p>
    <h2>强壮犬</h2>
    <div>ac犬</div>
</body>

</html>

网页运行结果：

5. 画盒子

目标：使用合适的选择器画盒子

新属性：

属性名作用
width宽度
height高度
background-color背景色
<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .green {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <p class="red">小犬犬</p>
    <div class="green">ac犬</div>
</body>

</html>

网页运行结果：

三、文字控制属性

1. 字体大小

  • 属性名：font-size

  • 属性值：文字尺寸，PC 端网页最常用的单位 px

p {

    font-size: 30px;

}

  • 经验：谷歌浏览器默认字号是16px

2. 字体粗细

属性名：font-weight

属性值:

  • 数字（开发使用）：正常400，加粗700
  • 关键字：正常 normal，加粗 bold

/* 不加粗 */

font-weight: 400;

/* 加粗 */

font-weight: 700;

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-weight: 700;
        }

        h3 {
            font-weight: 400;
        }
    </style>
</head>

<body>
    <p>小犬犬</p>
    <h3>大犬犬</h3>
</body>

</html>

网页运行结果：

3. 字体样式

作用：清除文字默认的倾斜效果

属性名：font-style

属性值

  • 正常（不倾斜）：normal
  • 倾斜：italic 
<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        em {
            font-style: normal;
        }

        div {
            font-style: italic;
        }
    </style>
</head>

<body>
    <em>小犬犬</em>
    <div>大犬犬</div>
</body>

</html>

网页运行结果：

4. 行高

作用：设置多行文本的间距

属性名：line-height 

属性值:

  • 数字 + px
  • 数字（当前标签font-size属性值的倍数）

line-height: 30px;

/* 当前标签字体大小为16px */

line-height: 2;

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            /* line-height: 30px; */
            line-height: 2;
        }
    </style>
</head>

<body>
    <p>好的谢谢姐妹！我刚刚有看到姐妹在鹅组写的关于前端学习的帖子，上面有写到《JS
        DOM编程艺术》这本书，但是我去搜了一下发现这本书是2010年的，又看了很多评价说现在可能有点过时了，看姐妹的帖子是2018年的那请问这本书现在作用还大吗？</p>
</body>

</html>

 网页运行结果：

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果 

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            height: 100px;
            background-color: aquamarine;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <p>小犬犬</p>
</body>

</html>

网页运行结果:

5. 字体族

属性名：font-family

属性值：字体名

font-family: 楷体

拓展：

  • font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif 
  • font-family 属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
  • font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体
<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            font-family: 楷体;
        }
    </style>
</head>

<body>
    <h2>小犬犬</h2>
</body>

</html>

 网页运行结果：

6. font 复合属性

使用场景：设置网页文字公共样式

div {

        /* 文字倾斜 */

        font-style: italic;

        /* 文字加粗 */

        font-weight: 700;

        /* 字体大小是30px */

        font-size: 30px;

        /* 行高为字号的2倍 */

        line-height: 2;

        /* 字体是楷体 */

        font-family: 楷体

    }

 或者：

div {

    /* font: 是否倾斜 是否加粗 字号/行高 字体; */

    font: italic 700 30px/2 楷体;

}

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。 font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写） 

注意：字号和字体值必须书写，否则 font 属性不生效

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* font: italic 楷体; */
            font: italic 700 30px/2 楷体;
        }
    </style>
</head>

<body>
    <div>小犬犬</div>
</body>

</html>

 网页运行结果：

7. 文本修饰属性

文本缩进

属性名：text-indent

属性值：

  • 数字 + px
  • 数字 + em（推荐：1em == 当前标签的字号大小）

p {

     text-indent: 2em;

}

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <div>我理解的“过时”是指一些以前的技术、方法放在现在已经完全被废弃了，比如讨论如何兼容IE6。在这个角度，这本书是不过时的。并且这本书的编排很用心，学练结合，对初学者是非常好的JS入门书</div>
</body>

</html>

网页运行结果：

文本对齐方式 

作用：控制内容水平对齐方式

属性名：text-align

text-align: center;

属性值：

属性值效果
left左对齐（默认）
center居中对齐
right右对齐
<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-align: center;
        }
    </style>
</head>

<body>
    <div>bug犬</div>
</body>

</html>

网页运行结果：

水平对齐方式 – 图片 

text-align本质是控制内容的对齐方式，属性要设置给内容的父级

<style>

    div {

        text-align: center;

    }

</style>

<div>

    <img src="./images/1.jpg" alt="">

</div>

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <img src="./miaowu.gif">
    </div>
</body>

</html>

网页运行结果：

文本修饰线 

属性名： text-decoration

属性值：

属性值效果
none无
underline下划线
line-through删除线
overline上划线
<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }

        div {
            text-decoration: underline;
        }

        p {
            text-decoration: line-through;
        }

        span {
            text-decoration: overline;
        }
    </style>
</head>

<body>
    <a href="#">a 标签，去掉下划线</a>
    <div>div 标签，添加下划线</div>
    <p>p 标签，添加删除线</p>
    <span>span 标签，添加顶划线</span>
</body>

</html>

网页运行结果：

8. color 文字颜色

属性名：color

提示：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色

属性值： 

颜色表示方式属性值说明使用场景
颜色关键字颜色英文单词red、green、blue...学习测试
rgb表示法rgb(r,g,b)r,g,b 表示红绿蓝三原色：取值：0-255了解
rgba表示法rgba(r,g,b,a)a表示透明度，取值：0-1开发使用，实现透明色
十六进制表示法#RRGGBB#000000,#ffcc00，简写：#000，#fc0开发使用（从设计稿复制）

 四、调试工具 – 谷歌浏览器

作用：检查、调试代码；帮助程序员发现代码问题、解决问题

1. 打开调试工具

  • 浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查
  • F12

2. 使用调试工具

3. 测试工具的细节

  • 如果是错误的属性，有黄色叹号
  • CSS 属性的前面有多选框，如果勾选，这个属性生效；如果没有勾选，这个属性不生效；

 

 五、综合案例

 电影详情

一只北极星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记-黑马程序员CSS
01-09
前端学习笔记-黑马程序员CSS
Pinyougou_html_css_黑马程序员_
09-29
品优购项目实例 黑马程序员 适合新手 静态网页
CSS学习第一天总结.pdf
10-11
CSS学习第一天总结
前端基础css第一天,对应博客
04-03
css第一天学习内容,可对照博客
css第一天.xmind
08-10
css第一天.xmind
CSS实现一个雨滴滑落效果
云加速
05-28 1243
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css让padding、border不占据宽度
于忠会的博客
05-29 438
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。则包含 padding，div 的实际宽度为 120px。CSS3 新增了 box-sizing 属性。则 div 的实际宽度为 120px。以前，如果指定 div 的宽度为。
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
lbcbjtlhmjq的博客
05-30 720
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
【JS实战案例汇总——不定时更新版】
微木
05-30 334
练习JS的实用案例，倒计时算法、定时轮播图
CSS学习笔记之高级教程（四）
wz_1992的博客
05-30 734
19、CSS 用户界面 19.1 CSS 调整大小：resize resize 属性规定元素是否应（以及如何）被用户调整大小。 resize: horizontal;水平方向可改变大小 resize: vertical;垂直方向可改变大小 resize: both;水平+垂直方向都可改变大小 20、CSS 变量：var()函数 var() 函数用于插入 CSS 变量的值。 var() 函数的语法如下：var(name, value)，变量名称必须以两个破折号（--）开头，且区分大小写！ 20.1 C
tailwindcss 最简单的使用方式
前端蜗牛君
05-30 427
从头开始使用Tailwind CSS的最简单和最快的方法是使用Tailwind CLI工具。
【推荐】用scss循环zoom缩放比例，解决可视化大屏在不同分辨率屏幕下的适配问题
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-30 221
指定几种常规屏幕宽度（用这种方式就必须要强制用户全屏查看页面，在固定的宽度下才能达到比较不错的显示效果）从像素1024循环到2560宽度的情况（会导致很多冗余的css代码，但是基本上所有的宽度情况都囊括了）
CSS中inset属性详细讲解
2301_79858914的博客
05-31 1020
inset属性：用于同时设置toprightbottom和left四个定位属性。正值：元素从包含块的边缘向内偏移。负值：元素从包含块的边缘向外偏移，可能超出包含块的边界。使用场景：通过正值和负值的组合，灵活地控制元素相对于其包含块的位置，从而实现各种布局效果。可以更加简洁和方便地定位和调整元素的位置，使代码更易读和维护。
8. CSS弹性布局基础
一名全栈开发工程师
05-29 1402
弹性布局（Flexbox）是一种一维布局模型，主要用于在一个方向上（水平或垂直）排列子元素。它能够让我们更轻松地创建各种复杂的布局，包括居中对齐、等宽列和灵活的项目排列。
css移动端开发
2303_80137294的博客
05-30 761
二倍图（@2x images）是指其分辨率是标准分辨率图像的两倍的图像。例如，如果标准图像的尺寸是100x100像素，那么二倍图的尺寸则是200x200像素。
CSS-in-JS学习
天涯学馆
05-29 51
CSS-in-JS 是一种编写样式的方法，它允许开发者在JavaScript组件内部定义样式，通常使用类似于CSS的语法。这种方式提高了代码的可复用性和可维护性，因为它将样式与组件逻辑紧密关联。
CSS中z-index不生效的原因和解决办法
最新发布
2301_79858914的博客
05-31 629
了解堆叠上下文的创建：识别哪些属性会创建新的堆叠上下文，并了解它们对z-index的影响。管理堆叠顺序：确保在同一个堆叠上下文内正确使用z-index值，以达到预期效果。检查元素属性：如果z-index不生效，检查元素是否创建了新的堆叠上下文，调整属性如positionopacitytransform等。避免不必要的堆叠上下文：尽量减少不必要的堆叠上下文创建，使用其他方法如translate等实现视觉效果。通过理解和管理堆叠上下文，可以有效地解决z-index。
【介绍下SCSS的基本使用】
cz88888888666的博客
05-30 511
🌱这些只是SCSS的一些基本用法，你可以进一步探索SCSS的功能和概念，例如条件语句、循环等。要将SCSS转换为纯CSS，你需要使用SASS编译器或与构建工具（例如Webpack）集成使用。🛸SCSS（Sassy CSS）是CSS的一个扩展版本，它引入了一些有益的功能和概念，使得CSS更加方便和可维护。SCSS允许你在样式规则内嵌套其他规则，这样可以更清晰地组织你的样式。SCSS中的混合器允许你定义一组样式，并在需要的地方进行重用。SCSS允许你声明并使用变量，这样可以重复使用相同的值。
前端 CSS 经典：多行文本擦除效果
weixin_64684095的博客
05-29 308
前言：使用动画实现更改变量 --p，实现多行文本擦除效果，css 动画逻辑，什么样的动画是生效的，一定是一个数值类的 CSS 属性。--p 只是个变量，不是 CSS 属性，通过 Houdini API 使它变成一个属性。
黑马程序员css笔记
08-18
黑马程序员的CSS笔记涵盖了一些关于CSS的内容。在CSS中，可以使用＜i＞和＜em＞标签或CSS来实现字体倾斜效果，并可以使用＜ｂ＞和＜strong＞标签或CSS来实现字体加粗效果。值得注意的是，CSS本身是没有语义的，它只是一种样式定义语言。要想将CSS样式应用于特定的HTML元素，需要使用选择器。其中，标签选择器（元素选择器）是一种常用的选择器，用于选取指定的HTML元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [黑马程序员pink老师_CSS学习笔记](https://blog.csdn.net/weixin_46764819/article/details/123336658)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值