Web前端开发入门学习笔记之CSS 29-38 --新手超级友好版-网页文字样式篇

   Foreword写在前面的话：

  大家好，我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得，希望能和同样在学习HTML的朋友们分享。由于我的知识有限，文章中可能存在错误或不准确的地方，欢迎大家在评论区提出建议和指正。我非常期待大家的反馈，以便我能不断学习和进步。同时，我也会在文章中注明参考的资料，以示对原作者的尊重。

PS：本帖以记录学习心得和课堂笔记为主，没有其他大博主那么专业，但是简单易懂^-^

本贴的其他相关学习笔记资料可以通过订阅专栏获取，喜欢的小伙伴可以多多点赞+关注呀！后续会 持续更新相关资源的~

  课程学习资源：根据b站‘前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员’ 视频学习记录而成。原视频网址：前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员_哔哩哔哩_bilibili

第二十九课：html标签的作用：在网页中摆放内容（带默认效果）

如何更好的规划网页？用css美化

css基础选择器（找标签-美化内容），文字控制属性（控制文字外观）

让标题在网页正中间显示：用css

浅色文字小文字：用css

段落文字的缩进：用css

CSS-Cascading Style Sheets全称：层叠样式表，一种样式表语言用来描述html的呈现（美化语言）。

第三十课：css

书写位置：title标签下方添加style双标签，style里书写css代码。(就是style标签放在head里面，title下面）

<title>css体验</title>

<style>

选择器+大括号组成

p{

    /*css属性*/

    color: red;

}

...

</style>

写属性的习惯：敲回车，一个属性占一行，美观

工作时设计师会给设计稿，对于颜色直接复制粘贴就可以，英语单词不用记

一个选择器里面可以放多个css属性

front-size属性：改变字体大小，值一般是px像素，变大30px

特点：css代码中属性名与属性值成对出现--键值对。

第三十课：css引入方式

内部样式表  css代码在style标签里面-适合基础代码少的情况

外部样式表  适合开发使用

        css代码放在单独的css文件中（.css文件）

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

        <link href="..." rel="stylesheet">

对于css文件中的代码如何注释？也是Ctrl+/ 只不过效果是/*。。。*？而已

如何在css文件中书写代码？原先在style标签中怎么写就在css文件中怎么写，也就是选择器+大括号+键值对。

在css文件中写完代码后，记得在html文件中title下head里面的style标签里面加上link标签 给出css文件的href即可。

行内样式：配合js使用

css直接写在标签的style属性值中

行内样式顾名思义就是直接将div标签+style属性写在body部分，简单粗暴，div双标签包裹要改变样式的内容。

工作中最常用的是外部样式表-可以用link引入

第三十一课：选择器-标签和类

选择器作用：查找标签，设置样式。

基础选择器：

1. 标签选择器 p

        使用标签名作为选择器，选中同名标签设置相同的样式。--无法差异化同名标签的样式。

        如：p，h2，div，img，a，h1

2. 类选择器--可以差异化同名标签的样式

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

        方法：1.定义类选择器--.类名； 2. 使用类选择器-- 标签添加class="类名"

        

        类选择器本质就是在style标签内定义类，然后在body里面的任意标签中加上属性class=类名即可。

        且被定义的类属性可以被多次不同标签使用。

一个标签也可以用多个类选择器属性！！方法：style里面定义多个，然后要运用的话class属性值写多个类名，双引号内用空格隔开不同类名即可。

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

3. id选择器

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

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

        步骤：定义+使用

                        定义id选择器---#id名（也是在style里面定义，只不过前面是#定义）

                        使用id选择器---标签添加id=”id名“

        注意：同一id在一个页面只能使用1次

                

4. 通配符选择器

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

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

*{

    red

}

通配符选择器的实际应用：开发初期用来快速清除标签的默认样式，需要多少再自己设置。

第三十四课：画盒子

目标：使用合适的选择器画出差异化的盒子。

选择类选择器.name + class ="name"

新属性：

width 宽度

height 高度

background-color 背景色

有设计稿时，是多大写多大即可。

div双标签特点：效果独占一行。

第三十五课：文字控制属性（文字 美化）

字体大小 粗细 倾斜 行高 字体族 复合属性 缩进 对其 修饰线 颜色

字体大小：属性名：font-size 值：文字尺寸，pc端网页最常用单位px像素

font-size: 30px 是font！！！！！

注意：px单位是一定要写的，必须要有单位，否则属性不生效

经验：谷歌浏览器默认浏览文字大小为16px

打开网页调试工具：右键+spect

点击右上方蓝色箭头可以选中具体文字，检查它的性质（字体大小）

字体粗细效果：

font-weight 可去除加粗效果也可以添加加粗效果

属性值：1. 数字（开发使用）正常400，加粗700

                2. 英语关键字 正常normal，加粗bold

字体倾斜：font-style

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

属性值：正常不倾斜：normal

                倾斜：italic

实际工作中normal属性值用的多。

行高：用来调整两行文字之间的举例。

line-height 设置多行文本的间距

属性值：1. 数字+px

                2. 直接写数字（表示当前标签font-size属性值的倍数）

直接写数字就是表示倍数，一般文字默认大小为16px，所以写2的画就是32px大小的行高。

行高的原理：行高由上间距+文本高度+下间距组成。真正行高的大小是这三者之和。

工作中应该用设计稿量出行高具体大小，再填入font-height

量行高：两行文字之间的间距是由上行文字的下间距+下行文字的上间距组成。

懂得原理求和测量即可。

实际中量行高，从一行文字最顶端量到下一行文字最顶。（顶到顶）

行高-实现垂直居中效果：

技巧：行高属性值=盒子高度属性值

操作前代码：

垂直居中后：

垂直居中技巧：高度height属性值=行高属性值

注意：如果内容之间有br换行符号，则效果失败----只能是单行文字垂直居中！！

控制文字字体（字体族）font-family

属性值：字体名

font-family: 楷体;

font-family属性值可以书写多个字体名，用逗号隔开，电脑会从左到右查找字体，如果有就执行，没有就继续查找，都没有就按照默认显示。

为了保证多端网页字体的统一性，其属性最后会设置一个字体族名，网页开发建议无衬线字体。

无衬线字体族名：sans-serif

第三十七课：font复合属性 简写操作控制字体样式

使用场景：网页开发初期，设置网页文字的公共样式，之后再个别更改即可

这些属性可以直接到网页端复制，比如一些大网站的前端代码spect课获得

复合属性：简写，一个属性对应多个值，各个属性值之间空格隔开。

格式：font: 是否倾斜 是否加粗 字号/行高/ 字体 （必须按顺序书写）

（倾斜italic 加粗700不加粗400 

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

记住：后面两个属性值字号和字体是必填项！！

font复合属性是控制文字样式的，所以要在style里面写，style要在title下head内写，这个其实也就是css代码

font属性工作中不需要自己写，直接再大网站中复制即可。

最后，感谢每一位阅读这篇文章的朋友，你们的反馈对我来说非常宝贵。如果有任何问题或建议，请随时告诉我。让我们一起学习和进步吧！如果您喜欢我的内容，别忘了点赞和关注哦，我会定期分享更多有价值的信息。