CSS 入门教程六分之三篇
没办法，我直播教小伙伴CSS入门，属性讲完，准备说定位的时候，他们就喊停，hold不住了。。。所以先写到六分之三，23333333
| 要点 | 解释 |
|---|---|
| 引用 | 如何使用定义的CSS样式方式 |
| 选择器 | 指明被定义样式的标签 |
| 属性 | 样式定义时具体定义的内容 |
| 定位 | 如何将标签放置到具体的位置（下篇） |
| 盒模型 | 面试经典题（下篇） |
| 显示 | 如何显示标签与标签布局（下篇） |
引用
内联
开标签或自闭合标签的style属性上写明对应的CSS定义内容，即为内联方式引用，如下：
<div style=‘color: red;‘>普通内容</div>相关效果见：CodePen
内部标签
定义在head标签下的style标签内容，即为内部标签方式引用，如下：
<head> ???<style> ???#head-style { ???????color: green; ???} ???</style></head><body> ???<div id=‘head-style‘> ???????普通内容 ???</div></body>相关效果见：CodePen
外部链接
定义在head标签下的link标签属性，即为外部链接方式引用，如下：
<link rel=‘stylesheet‘ href=‘anypath/any.css‘>any.css内容如下：
#out-link { ???color: blue;}对应适用标签如下：
<div id=‘out-link‘>普通内容</div>相关效果见：CodePen
以上为三种引用方法，不包括JS
选择器
id选择器
唯一性，原则上通篇文件有且仅有一个id名称，不可重复
任意标签的id属性，其属性值即为其唯一id，此id其他标签不可再用。
如：
<div id=‘first-id‘>xxx</div>CSS选择器表达式如下：
#first-id {}表达式关键词：#
class选择器
任意标签的class属性，其属性值即为其class，此class与其他标签可共用，定义后所有同class标签一起生效。
如：
<div class=‘first-class‘>xxx</div>CSS选择器表达式如下：
.first-class {}表达式关键词： .
标签选择器
任意标签的标签名本身就是其选择器，由于标签的可复用性，所以使用标签选择器即为对所有同标签生效。
CSS选择器表达式如下：
div {}表达式关键词：无
伪类
伪类不算是选择器，但是因为独特，这里拎出来说一下
在选择器选中的基础上，对该标签的某种特性时段定义相关CSS属性，如hover（鼠标覆盖过程中），active（激活过程中）等等。
CSS选择器表达式如下：
div:hover { ???color: yellow;}相关效果见：CodePen
表达式关键词：:特性
属性
属性即CSS样式定制的具体样式，比如定制宽高，分别为width与height等。
相同的属性在不同的定位于显示中会有不同的表现，这里暂不表述过多，此处将属性大致分为四类，如下：
可继承属性
普通标签可能存在子标签的情况，因此在给一个普通标签定义可继承属性时候，若子标签未定义覆盖父级定义的属性，则继承父级属性的值，如font标签。
如存在如下代码关系：
<div class=‘father‘> ???我是父级标签 ???<div class=‘son‘> ???????我是子级标签 ???????<div class=‘grandson‘> ???????????我是孙子标签 ???????</div> ???</div></div>定义CSS如下：
.father { ???color: purple;}相关效果见：CodePen
不可继承属性
不可继承性则比较好理解，就是只对自己生效。
如存在如下代码关系：<div class=‘father‘> ???我是父级标签 ???<div class=‘son‘> ???????我是子级标签 ???????<div class=‘grandson‘> ???????????我是孙子标签 ???????</div> ???</div></div>定义CSS如下：
.father1 { ???border: 1px solid red;}相关效果见：CodePen
与定位相关的属性
定位下篇会说，这里只提一下主要相关属性：
- position（定位方式）
- top（距离上方距离）
- right（距离右边距离）
- bottom（距离下方距离）
- left（距离左边距离）
与显示相关的属性
显示下篇会说，这里只提一下主要相关属性：
- display（显示方式）
- width（宽度）
- height（高度）
- flex（弹性）
- 其他flex相关
完整测试代码
<!DOCTYPE html><html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>CSS快速入门</title> ?<style> ???#id { ?????color: red; ???} ???#testH2 { ?????color: red; ???} ???.testClass1 { ?????color: red; ???} ???/* 伪类 */ ???.vir1 { ?????color: green; ???} ???.vir1:hover { ?????color: yellow; ???} ???/* h2 { ?????color: red; ???} */ ?</style> ?<!-- ../ 上级目录(../../../../) ???./当前目录 ???/根目录 --> ?<link rel="stylesheet" href="./index.css"></head><body style=‘background: #eee‘> ?<h2 class="vir1">选择器(优先级排序)</h2> ???<ol> ?????<li id=‘id‘>id(标记)</li> ?????<li class=‘class‘>class(类)</li> ?????<li class=‘vir‘>:特性(伪类)</li> ?????<li>标签</li> ???</ol> ?<h2>属性</h2> ?<pre> ???选择器 { ?????属性A: 值A; ?????属性B: 值B; ???} ?</pre> ?<footer></footer></body></html>感谢阅读，如果对你有任何帮助，深感荣幸。
如有问题，请留言。
如果觉得文章不错，还请关注一下，谢谢
CSS入门之引用、选择器、属性（六分之三）
原文地址：https://www.cnblogs.com/ZweiZhao/p/9297331.html