CSS 入门教程六分之三篇
没办法, 我直播教小伙伴 CSS 入门, 属性讲完, 准备说定位的时候, 他们就喊停, hold 不住了... 所以先写到六分之三, 23333333
要点 | 解释 |
---|---|
引用 | 如何使用定义的 CSS 样式方式 |
选择器 | 指明被定义样式的标签 |
属性 | 样式定义时具体定义的内容 |
定位 | 如何将标签放置到具体的位置(下篇) |
盒模型 | 面试经典题(下篇) |
显示 | 如何显示标签与标签布局(下篇) |
引用
内联
开标签或自闭合标签的 style 属性上写明对应的 CSS 定义内容, 即为内联方式引用, 如下:
<div style='color: red;'> 普通内容 </div>
相关效果见: CodePen https://codepen.io/zweizhao/pen/vaERWb
内部标签
定义在 head 标签下的 style 标签内容, 即为内部标签方式引用, 如下:
- #head-style {
- color: green;
- }
- id='head-style'>
普通内容
相关效果见: CodePen https://codepen.io/zweizhao/pen/vaERWb
外部链接
定义在 head 标签下的 link 标签属性, 即为外部链接方式引用, 如下:
<link rel='stylesheet' href='anypath/any.css'>
any.css 内容如下:
- #out-link {
- color: blue;
- }
对应适用标签如下:
<div id='out-link'> 普通内容 </div>
相关效果见: CodePen https://codepen.io/zweizhao/pen/vaERWb
以上为三种引用方法, 不包括 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 https://codepen.io/zweizhao/pen/vaERWb
表达式关键词:: 特性
属性
属性即 CSS 样式定制的具体样式, 比如定制宽高, 分别为 width 与 height 等.
相同的属性在不同的定位于显示中会有不同的表现, 这里暂不表述过多, 此处将属性大致分为四类, 如下:
可继承属性
普通标签可能存在子标签的情况, 因此在给一个普通标签定义可继承属性时候, 若子标签未定义覆盖父级定义的属性, 则继承父级属性的值, 如 font 标签.
如存在如下代码关系:
<div class='father'>
我是父级标签
<div class='son'>
我是子级标签
<div class='grandson'>
我是孙子标签
定义 CSS 如下:
- .father {
- color: purple;
- }
相关效果见: CodePen https://codepen.io/zweizhao/pen/vaERWb
不可继承属性
不可继承性则比较好理解, 就是只对自己生效.
如存在如下代码关系:
<div class='father'>
我是父级标签
<div class='son'>
我是子级标签
<div class='grandson'>
我是孙子标签
定义 CSS 如下:
- .father1 {
- border: 1px solid red;
- }
相关效果见: CodePen https://codepen.io/zweizhao/pen/vaERWb
与定位相关的属性
定位下篇会说, 这里只提一下主要相关属性:
- position(定位方式)
- top(距离上方距离)
- right(距离右边距离)
- bottom(距离下方距离)
- left(距离左边距离)
与显示相关的属性
显示下篇会说, 这里只提一下主要相关属性:
- display(显示方式)
- width(宽度)
- height(高度)
- flex(弹性)
其他 flex 相关
完整测试代码
- lang="en">
- charset="UTF-8">
- name="viewport" content="width=device-width, initial-scale=1.0">
- http-equiv="X-UA-Compatible" content="ie=edge">
CSS 快速入门
- #id {
- color: red;
- }
- #testH2 {
- color: red;
- }
- .testClass1 {
- color: red;
- }
- /* 伪类 */
- .vir1 {
- color: green;
- }
- .vir1:hover {
- color: yellow;
- }
- /* h2 {
- color: red;
- } */
- rel="stylesheet" href="./index.css">
- style='background: #eee'>
class="vir1"> 选择器 (优先级排序)
- id='id'>id(标记)
- class='class'>class(类)
class='vir'>: 特性 (伪类)
> 标签
> 属性
选择器 {
属性 A: 值 A;
属性 B: 值 B;
- }
- </pre>
- </footer>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2681783.html