|
前端学习笔记教程不定时更新中，传送门： 前端HTML第1天：什么是网页？什么是HTML？网页怎么形成？HTML标签大全前端学习：表格学习，附练习+源码前端学习之列表，附送全套源码CSS入门最全笔记
上一期的CSS入门笔记无更新完，最后一下知识点在本篇内容。
1、CSS样式表
根据CSS样式书写的位置（或引入的方式）CSS样式能够分成三类
1.1 行内样式表（行内式）
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式. 语法：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈爱情</div>
1.style 其实便是标签的属性
在双引号中间，写法要符合 CSS 规范
2.能够掌控当前的标签设置样式
3.因为书写繁琐，并且无表现出结构与样式相分离的思想，因此不举荐海量运用，仅有对当前元素添加简单样式的时候，能够思虑运用 4.运用行内样式表设定 CSS，一般亦被叫作为行内式引入
1.2 内部样式表（嵌入式）
内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个
标签中
语法：
<style>
div {
color: red;
font-size: 12px;
}
</style>
1.
标签理论上能够放在 HTML 文档的任何地区，但通常会放在文档的标签中
2.经过此种方式，能够方便掌控当前全部页面中的元素样式设置
3.代码结构清晰，然则并无实现结构与样式完全分离 4.运用内部样式表设定 CSS，一般亦被叫作为嵌入式引入，这种方式是咱们练习时常用的方式
1.3 外边样式表（链接式）
实质研发都是外边样式表. 适合于样式比较多的状况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中运用.
引入外边样式表分为两步：
1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，运用 标签引入这个文件。 语法：
<link rel="stylesheet" href="css文件路径">
2、Chrome调试工具
1.Ctrl+滚轮 能够放大研发者工具代码体积。
2.左边是 HTML 元素结构，右边是 CSS 样式。
3.右边 CSS 样式能够改动数值（上下箭头或直接输入）和查看颜色。
4.Ctrl + 0 复原浏览器体积。
5.倘若点击元素，发掘右侧无样式引入，极有可能是类名或样式引入错误。
6.倘若有样式，然则样式前面有黄色叹号提示，则是样式属性书写错误。
本期结束了，本文内容均来自黑马程序员讲义，倘若有雷同是知识点相同。搬运麻烦标明出处，感谢支持原创内容。
| 
发表于 2024-6-30 08:11:23
