摘要：入门教程六分之三篇没办法，我直播教小伙伴入门，属性讲完，准备说定位的时候，他们就喊停，不住了。。。选择器表达式如下相关效果见表达式关键词特性属性属性即样式定制的具体样式，比如定制宽高，分别为与等。
CSS 入门教程六分之三篇
没办法，我直播教小伙伴CSS入门，属性讲完，准备说定位的时候，他们就喊停，hold不住了。。。所以先写到六分之三，23333333
| 要点 | 解释 |
|---|---|
| 引用 | 如何使用定义的CSS样式方式 |
| 选择器 | 指明被定义样式的标签 |
| 属性 | 样式定义时具体定义的内容 |
| 定位 | 如何将标签放置到具体的位置（下篇） |
| 盒模型 | 面试经典题（下篇） |
| 显示 | 如何显示标签与标签布局（下篇） |
内联
开标签或自闭合标签的style属性上写明对应的CSS定义内容，即为内联方式引用，如下：
普通内容
相关效果见：CodePen
内部标签
定义在head标签下的style标签内容，即为内部标签方式引用，如下：
普通内容
相关效果见：CodePen
外部链接
定义在head标签下的link标签属性，即为外部链接方式引用，如下：
any.css内容如下：
#out-link {
color: blue;
}
对应适用标签如下：
普通内容
相关效果见：CodePen
以上为三种引用方法，不包括JS选择器
id选择器
唯一性，原则上通篇文件有且仅有一个id名称，不可重复
任意标签的id属性，其属性值即为其唯一id，此id其他标签不可再用。
如：
xxx
CSS选择器表达式如下：
#first-id {
}
表达式关键词：#
class选择器
任意标签的class属性，其属性值即为其class，此class与其他标签可共用，定义后所有同class标签一起生效。
如：
xxx
CSS选择器表达式如下：
.first-class {
}
表达式关键词： .
标签选择器
任意标签的标签名本身就是其选择器，由于标签的可复用性，所以使用标签选择器即为对所有同标签生效。
CSS选择器表达式如下：
div {
}
表达式关键词：无
伪类
伪类不算是选择器，但是因为独特，这里拎出来说一下
在选择器选中的基础上，对该标签的某种特性时段定义相关CSS属性，如hover（鼠标覆盖过程中），active（激活过程中）等等。
CSS选择器表达式如下：
div:hover {
color: yellow;
}
相关效果见：CodePen
表达式关键词：:特性属性
属性即CSS样式定制的具体样式，比如定制宽高，分别为width与height等。
相同的属性在不同的定位于显示中会有不同的表现，这里暂不表述过多，此处将属性大致分为四类，如下：
可继承属性
普通标签可能存在子标签的情况，因此在给一个普通标签定义可继承属性时候，若子标签未定义覆盖父级定义的属性，则继承父级属性的值，如font标签。
如存在如下代码关系：
我是父级标签我是子级标签我是孙子标签
定义CSS如下：
.father {
color: purple;
}
相关效果见：CodePen
不可继承属性
不可继承性则比较好理解，就是只对自己生效。
如存在如下代码关系：
我是父级标签我是子级标签我是孙子标签
定义CSS如下：
.father1 {
border: 1px solid red;
}
相关效果见：CodePen
与定位相关的属性
定位下篇会说，这里只提一下主要相关属性：
position（定位方式）
top（距离上方距离）
right（距离右边距离）
bottom（距离下方距离）
left（距离左边距离）
与显示相关的属性
显示下篇会说，这里只提一下主要相关属性：
display（显示方式）
width（宽度）
height（高度）
flex（弹性）
其他flex相关
完整测试代码CSS快速入门 选择器(优先级排序)
- id(标记)
- class(类)
- :特性(伪类)
- 标签
属性
选择器 { 属性A: 值A; 属性B: 值B; }
感谢阅读，如果对你有任何帮助，深感荣幸。
如有问题，请留言。
如果觉得文章不错，还请关注一下，谢谢
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116862.html
摘要：盒模型要点知识务必注意看，这可是前端面试必定会遇到的问题。盒模型的主要属性，除继承外有两个值这里不再细说历史原因，只说其作用。严格来说与标签大小无关，但是影响视觉上的位置。具象化需调试指出，如下其中的最外圈的黄色区域就是了。 盒模型要点知识 务必注意看，这可是前端面试 必定会遇到 的问题。 box-sizing 盒模型的主要CSS属性，除继承外有两个值： content-box...
摘要：盒模型要点知识务必注意看，这可是前端面试必定会遇到的问题。盒模型的主要属性，除继承外有两个值这里不再细说历史原因，只说其作用。严格来说与标签大小无关，但是影响视觉上的位置。具象化需调试指出，如下其中的最外圈的黄色区域就是了。 盒模型要点知识 务必注意看，这可是前端面试 必定会遇到 的问题。 box-sizing 盒模型的主要CSS属性，除继承外有两个值： content-box...
摘要：盒模型要点知识务必注意看，这可是前端面试必定会遇到的问题。盒模型的主要属性，除继承外有两个值这里不再细说历史原因，只说其作用。严格来说与标签大小无关，但是影响视觉上的位置。具象化需调试指出，如下其中的最外圈的黄色区域就是了。 盒模型要点知识 务必注意看，这可是前端面试 必定会遇到 的问题。 box-sizing 盒模型的主要CSS属性，除继承外有两个值： content-box...
摘要：内部样式表内部样式表一般写在头部，在标签内用标签括起来。外部样式表外部样式表是单独将样式写到一个文件中，并在头部引用。使用外部样式表时要注意如果出现多重样式时样式覆盖带来的问题。CSS 引入共有三种方式：内部样式表，内联样式（行内样式）表，外部样式表，当然也可以使用多重样式 内联样式 内联样式表 内联样式 直接把样式卸载html代码行内，一般仅仅在此样式仅仅只在当前元素上应用时使用，其他...
摘要：下文称位置属性即为。注意，不会脱离文档流，具体见下面的图示。直译为修正，简单粗暴，直接相对浏览器窗口显示区域定位。 Position定位 个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute，当年可是被虐的不轻。当然了，现在爱上了这个属性，谁用谁知道。 position属性 position是CSS的一个属性，地位较高，也是我们重点要说的一个属性。 对应了四...
阅读 2859·2021-10-12 10:12
阅读 4757·2021-09-26 10:20
阅读 1346·2021-07-26 23:38
阅读 2602·2019-08-30 15:54
阅读 1520·2019-08-30 13:45
阅读 1808·2019-08-30 11:23
阅读 2879·2019-08-29 13:49
阅读 589·2019-08-26 18:23
