前端Web开发(2)
CSS引入方式
CSS：一种样式表语言，用来描述HTML文档的呈现(美化内容)
内联样式：配合JavaScript使用
直接在HTML元素的style属性中编写CSS规则。
<p style="color: red; font-size: 16px;">示例文本</p>内部样式表：学习使用
在HTML文档的<head>部分(title标签下方)使用<style>标签定义CSS规则。
<head> <style> p { color: blue; font-size: 14px; } </style> </head>外部样式表：开发使用
通过<link>标签引入独立的.css文件。
<head> <link rel="stylesheet" href="styles.css"> </head>选择器
作用：查找标签，设置样式
基础选择器：标签选择器、类选择器、id选择器、通配符选择器
标签选择器
使用标签名作为选择器—>选中同名标签设置相同的样式
类选择器
作用：查找标签，差异化设置标签的显示效果。
- 定义类选择器—>.类名
- 使用类选择器—>标签添加class="类名"
<style> /*定义类选择器*/ .red { color: red; } </style> <!--使用类选择器--> <div class="red">这是div标签</div>注：一个类名可以给多个标签使用，一个标签可以使用多个类名，class属性值写多个类名用空格隔开。
id选择器
作用：查找标签，差异化设置标签的显示效果。
场景：一般配合JavaScript使用，很少用来设置CSS样式。
- 定义id选择器—>#id名
- 使用id选择器—>标签添加id="id名"
<style> /*定义id选择器*/ #red { color: red; } </style> <!--使用id选择器--> <div id="red">这是div标签</div>注：同一个id选择器在一个页面只能使用一次
通配符选择器
作用：查找页面所有标签，设置相同样式
通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
例如：
* { color: red; }就是将所有标签内的全部内容都变成红色。
画盒子
目标：使用合适的选择器画盒子
| 属性名 | 作用 |
|---|---|
| width | 宽度 |
| height | 高度 |
| backgroung-color | 背景色 |
文字修饰属性
| 描述 | 属性 | 效果 |
|---|---|---|
| 字体大小 | font-size | |
| 字体粗细 | font-weight | 文字&文字 |
| 字体倾斜 | font-style | 文字&文字 |
| 行高 | line-height | 文字 文字 |
| 字体族 | font-family | |
| 字体复合属性 | font | 复合属性 |
| 文本缩进 | text-indent | 前端开发也叫客户端开发，主要负责网站、APP、小程序所有能看得见、摸得着、能交互的界面部分。 |
| 文本对齐 | text-align | 对齐方式 |
| 修饰线 | text-decoration | 文字&文字& |
| 颜色 | color | 文字&文字 |
字体大小
PC网页常用单位为px
字体粗细
数字：正常：400 加粗：700
关键字：正常：normal 加粗：bold
字体倾斜
正常：normal 倾斜：italic
行高
属性值：数字+px 或 数字(当前标签font-size值的倍数)
测量方法：从一行文字的顶端(底端)到下一行文字的顶端(底端)
当行高(line-height)=高度(height)，文字便可垂直居中，但只适用于单行文字
字体族
font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左到右依次查找
font复合属性
属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开
font：是否倾斜 是否加粗 字号/行高 字体 (必须按顺序书写)
注意：字号和字体值必须书写，否则font属性不生效
文本缩进
属性值：
- 数字 + px
- 数字 + em（推荐:1em=当前标签字号大小)(常用)
文本对齐方式
| 属性值 | 效果 |
|---|---|
| left | 左对齐(默认) |
| center | 居中对齐(居中的是字而不是标签) |
| right | 右对齐 |
文本修饰线
| 属性值 | 效果 |
|---|---|
| none | 无（去掉修饰线） |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
color文字颜色
| 颜色表示方式 | 属性值 | 说明 | 使用场景 |
|---|---|---|---|
| 颜色关键字 | 颜色英文单词 | red、green、blue... | 学习测试 |
| rgb表示法 | rgb(r,g,b) | r,g,b表示红绿蓝三原色，取值：0-225 | 了解 |
| rgba表示法 | rgba(r,g,b,a) | a表示透明度，取值：0-1 | 开发使用，实现透明色 |
| 十六进制表示法 | #RRGGBB | #000000,#ffcc00,简写:#000,#fc0 | 开发使用(从设计稿复制) |