码江湖之入门篇------CSS（OneDay）

2024-01-09 22:24:06

1.CSS定义？

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

????????书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
? ? ??
???????? 提示：属性名和属性值成对出现 → 键值对。
????????

2.CSS 引入方式？

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

????????????????? CSS 代码写在 style 标签里面

? ? ? ? 2.? 外部样式表： 开发使用
????????????????? CSS 代码写在单独的 CSS 文件中（ .css ）
????????????????? 在 HTML 使用 link 标签引入

????????
? ? ? ? 3.? 行内样式： 配合 JavaScript 使用
????????????????? CSS 写在标签的 style 属性值里

3.选择器？

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

????????基础选择器：
????????????????? 标签选择器
????????????????? 类选择器
????????????????? id 选择器
????????????????? 通配符选择器
?

? ? （1）标签选择器：

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

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

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

? ? ?（2）类选择器：

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

????????步骤：
? ? ? ? ????????? 定义类选择器 → .类名
????????????????? 使用类选择器 → 标签添加 class="类名“
????????
????????规则：
??????
????????????????? 类名自定义， 不要用纯数字或中文 ，尽量用英文命名
????????????????? 一个 类选择器可以供 多个标签 使用
????????????????? 一个标签可以使用 多个 类名，类名之间用 空格 隔开
????????开发习惯：类名 见名知意 ，多个单词可以用 - 连接，例如： news-hd

? ? （3）id选择器：

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

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

????????步骤：

????????????????? 定义 id 选择器 → #id名
????????????????? 使用 id 选择器 → 标签添加 id= "id名"
????????规则：
????????????????
????????????????? 同一个 id 选择器在一个页面只能使用一次

? ? （4）通配符选择器：

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

????????通配符选择器： * ， 不需要调用 ，浏览器 自动 查找页面 所有 标签，设置相同的样式。
????????经验：
????????????????? 通配符选择器可以 用于清除标签的默认样式 ，例如：标签默认的外边距、内边距。

? ? （5）画盒子：

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

??

4.文字控制属性？? ? ?

? ? （1）字体大小：? ? ??

????????? 属性名： font-size。
????????
????????? 属性值： 文字尺寸 ，PC 端网页最常用的单位 px。

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

? ? ? ? （2）字体粗细 ：

????????属性名： font-weight
????????
????????属性值
????????????????? 数字（开发使用）
????

????????????????? 关键字

?

? ? ? ? ? ? ? ?

? ? （3）字体样式（是否倾斜） ：

????????作用： 清除文字默认的倾斜效果
????????属性名： font-style
????????属性值
????????????????? 正常（不倾斜）：normal
????????????????? 倾斜：italic
??

? ? （4）行高：

????????作用：设置 多行文本的间距
????????属性名： line-height
????????属性值
????????????????? 数字 + px
? ? ? ? ? ? ? ? ? 数字 （当前标签 font-size 属性值的 倍数 ）

????????

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

? ? （5）行高-垂直居中：

????????垂直居中技巧： 行高属性值等于盒子高度属性值。
????????
????????注意：该技巧适用于单行文字垂直居中效果。
????????

? ? （6）字体族：

????????属性名：font-family

????????属性值：字体名

? ? （7）font 复合属性介绍：

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

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

? ? （8）文本缩进：

????????属性名： text-indent
????????
????????属性值：
????????????????? 数字 + px
????????????????? 数字 + em （推荐：1em = 当前标签的字号大小）

? ? （9）文本对齐方式 ：

????????作用： 控制内容水平对齐方式
????????属性名： text-align

? ? （10）水平对齐方式 – 图片：

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

? ?（11）文本修饰线：

????????属性名： text-decoration

? ? （12）color 文字颜色：

????????属性名： color

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

????????

5.调试工具？

????????调试工具–谷歌浏览? ? ? ??

? ? ? ? 点击F12出现调试工具 / 点击右键，下拉最后，点击检查? ? ?也可以查看调试工具。

结束！！！

????????小伙伴们，

????????下期间！！！！！！

2

文章来源:https://blog.csdn.net/2302_79079525/article/details/135417195
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。