18号CSS学习
一、CSS简介
1.HTML局限性
- 只关注内容的语义。
- “丑”
2.CSS-网页的美容师
- CSS是层叠样式表的简称，也称为CSS样式表或级联样式表。
- 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽度、边框样式、边距等）以及版面的布局和外观显示样式。
- 美化HTML。
- HTML主要做结构，显示元素内容。
- CSS美化HTML，布局页面。
- CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。
3.CSS语法规范
- CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
-
<style> p { color:red; font-size: 12px; } </style> <body> <p>有点意思</p> </body>
4.CSS代码风格
- 以下代码书写风格符合实际开发
- 样式格式书写：紧凑风格和展开风格，推荐展开风格。
- 样式大小写：提倡小写字母。
- 空格规范：属性值前冒号后，保留一个空格；选择器（标签）和大括号之间保留一个空格。
二、CSS基础选择器
1.CSS选择器的作用
- 选择标签用的。
- 分为基础选择器和复合选择器。
- 标签选择器
- 类选择器（最常用）
- 类选择器-多类名
- id选择器
- 通配符选择器
三、CSS字体属性
- 使用font-family属性定义字体。
- 使用font-size属性定义字体大小。（谷歌浏览器一般默认16px）
- 使用font-weight属性定义字体粗细。
- 使用font-style属性定义文字样式。（italic/normal）
- 复合属性 font: font-style font-weight font-size font-family（ 必须保持这个顺序，不设置的属性可省略，size和family属性必须有）
四、文本属性
- 文本的外观
- 文本颜色（颜色值、十六进制、RGB，十六进制最常用）
- 对齐文本text-align属性
- 装饰文本text-decoration属性（可以给文本添加常用下划线underline、不常用删除线line-through、几乎不用上划线overline、最常用默认none）
- 文本缩进text-indent属性（text-indent: 20px; text-indent: 2em;）
- 行间距line-height属性（line-height: 26px;）(PastStone Capture软件测量)
五、CSS引入方式
- CSS的三种样式表：按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类。
1.行内样式表（行内式）
- 在元素标签内部的style属性中设定CSS样式（<p style="color: red";> </p>）
- 控制当前的标签样式设置。
2.内部样式表（嵌入式）
- 写到HTML页面内部，是将所有CSS代码抽取出来，单独放到一个<style>标签中。理论上<style>标签可以放在html文档的任何地方，但一般放在<head>标签中。
- 方便控制当前整个页面的元素样式设置。
- 代码结构非常清晰，但并没有实现结构与样式完全分离。
3.外部样式表（链接式）
- 实际开发中使用，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
- 两步：1.新建一个后缀为.css的样式文件，把所有CSS代码都放入此文件。2.在HTML页面中，使用<link>标签引入这个文件。
-
<link rel="stylesheet" href="css文件路径">
六、Emment语法
- 来提高HTML/CSS编写速度，Vscode内部已经集成该语法。
- 快速生成HTML结构语法
- 生成标签，直接输入标签名按tab键即可。
- 若想生成多个标签，加上*即可，div*5。
- 父子级关系ui>li。
- 兄弟级关系div+p。
- .nav按tab键生成class="nav";#nav生成id="nav";默认生成div标签。其他的可p.nav。
- 自增符号$，生成有顺序的加上$即可，.demo$*5。
- 标签里面显示文字用{}即可，div{直接写内容}。
- 快速生成CSS样式语法
- 比如w200 按tab键 可以生成width: 200px。
- 比如lh26px 按tab键 可以生成line-height: 26px。
- 格式化代码。
