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>
感谢阅读,如果对你有任何帮助,深感荣幸。
如有问题,请留言。
如果觉得文章不错,还请关注一下,谢谢
原文地址:https://www.cnblogs.com/ZweiZhao/p/9297331.html