声享正努力加载中...
HTML基础
HyperText Mark-up Language
超文本标记语言
不是一种编程语言，而是一种标记语言，不能进行数学或逻辑运算，只能够用来描述网页的内容和结构
HTML简要发展史
请选取图片区域
请选取图片区域
前端开发，根本上是在操作HTML标签
CSS基础
内容概要
- css是什么
- css的使用和基本语法
- css选择器
- 继承和优先级
- css布局模型
小扩展：一些有趣的🌰
css是什么
Cascading Style Sheets
层叠样式表
css在页面中的使用
请选取图片区域
css的组成规则
h1 {
color: white;
font-size: 14px;
}
选择器(Selector)
属性(Property)
属性值(Value)
声明(Declaration)
css选择器
选择器用来从页面中选择元素，以给它们定义样式。
css选择器
简单选择器
- 通配选择器 *
- 标签选择器 E
- 类选择器 .class-name
- ID选择器 #id_name
css选择器
高级选择器
- 属性选择器
- 组合选择器
- 后代选择器
- 多组选择器
- 伪类选择器
css选择器
属性选择器
/* 具有某个属性 */
[disabled]
/* 属性为指定的值 */
[type="checkbox"]
/* 属性值包含某个字符串 */
[href*="example"]
/* 属性值以某个字符串开头 */
[href^="http:"]
/* 属性值以某个字符串结束 */
[href$="jpg"]
/* 属性值以空格分割后包含某个字符串 */
[lang~＝"zh-cn"]css选择器
组合选择器
<!--HTML-->
<p class="warning">这是一条警告信息</p>
<div class="warning icon">这是另外一条警告信息</div>// css
p.warning {
color: #ff6700;
}
.warning {
font-size: 30px;
}css选择器
后代选择器
<!--HTML-->
<ul class="list">
<li>item1</li>
<li>
item2
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
</ul>
</li>
<li>item3</li>
</ul>// css
.list li {} /* 后代选择器*/
.list > li {} /* 亲子选择器*/
li + li {} /* 兄弟选择器 */css选择器
同时为一组选择器定义样式
// css
p {
padding: 20px;
margin: 20px;
color: red;
font-size: 18px;
}
.demo {
padding: 20px;
margin: 20px;
color: red;
}
#demo2 {
padding: 20px;
margin: 20px;
color:red;
}// css
p, .demo, #demo2 {
padding: 20px;
margin: 20px;
color: red;
}
p {
font-size: 18px;
}css选择器
伪类
a:link { ... } /* 未访问过的链接 */
a:visited { ... } /* 已访问过的链接 */
a:hover { ... } /* 鼠标移到链接上的样式 */
a:active { ... } /* 鼠标在连接上按下时的样式 */
a:focus { ... } /* 获得焦点时的样式 */
input:disabled { ... } /* 禁用时的样式 */
input:checked { ... } /* 选中时的样式 */css选择器
结构性伪类
:first-child
:last-child
:nth-child
:first-of-type
:last-of-type
:nth-of-type
:emptycss选择器
伪元素
::after
::before
::first-letter
::first-line继承和优先级
下面哪条规则生效？
<!--HTML-->
<h1 id="title" class="text">段落文字</h1>//css
#title { font-size: 18px; }
h1.text { font-size: 14px; }继承和优先级
优先级的规则：取决于选择器的特殊性（Specificity）
- 对于选择器中给定的各个 ID 属性值，加 0，1, 0 ,0
- 对于选择器中给定的各个类属性值，属性选择或伪类，加 0, 0，1，0
- 对于选择器中给定的各个元素和伪元素，加 0,0,0,1
- 结合符（>）和通配选择符（*）对特殊性没有任何贡献
- 内联样式特殊性为最高 1，0 ，0 ，0
- 特殊性值从左往右读
继承和优先级
优先级之重要性
有些声明非常重要，超过了其他所有的声明，css2.1 称其为重要声明，其并没有特殊的特殊性，通过 ！important 来标志
注：！important 必须放在声明语句结束分号之前，其他位置会使整个声明无效
继承和优先级
继承
某些属性会自动继承其父元素的值，除非显示指定一个值
<!--HTML-->
<p>
这是一个继承
<em>的测试 </em>看下面的
<strong>颜色</strong>
</p>// css
p {
color: #d0d0d0;
}
em {
color: #ff6700;
}继承完全没有特殊性，0 特殊性都比没有特殊性强，避免胡乱使用通配选择器
// HTML
<p>
<em>i love front end</em>
</p>
// css
*{
color: red;
}
p {
color: #d0d0d0;
}css布局模型
- 常规流
- 浮动
- 绝对定位
- Flexbox
- Grid
常规流中的布局
块级元素(Block-level Elements)
- 会被格式化成块状的元素，在常规流中独占一行
- 例如 p、div、section 等
- 将 display 设置为 block、list-item、table 使元素变为块级
行级元素 (Inline-level Elements)
- 让其内容分布在多行中
- display 设置为 inline、inline-block、inline-table 使元素变为行级
display 属性
- block 生成块级盒
- inline 生成行级盒
- inline-block 生成行级盒，为其内容生成块级盒
- none 在排版时将元素忽略
浮动 (float)
- 浮动元素从常规流中脱离，被漂浮在容器(包含块)左边或右边
- 浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒
- 浮动元素不会影响其后面的流内块级盒
- 但是浮动元素后面的行级盒子会变短以避开浮动元素
clear
- 指定元素哪一边不能与之前的浮动框相邻
- 取值: left | right | both
clearfix
.clearfix::after {
content: ' ';
display: block;
clear: both;
height:0;
overflow: hidden;
}定位和堆叠
position
- static 非定位，默认值
- relative 相对定位（相对自己）
- absolute 绝对定位，相对非 static 祖先元素定位
- fixed 相对于视口绝对定位
z-index 堆叠层次
- 为定位元素指定其在 z 轴的上下等级
- 用一个整数表示，数值越大，越靠近用户
- 初始值为 auto，可以为负数、0、正数
请选取图片区域
display: flex
- 将元素变为 Flexbox
- 子元素在容器内水平(默认)或垂直摆放
- 通过子属性控制子元素摆放
display: grid
<header>This is header</header>
<article>The list properties describe basic
visual formatting of lists: they allow
style sheets to specify the marker type
(image, glyph, or number), and the marker
position with respect to the principal box
(outside it or within it before content).
</article>
<aside>aside</aside>
<footer>This is footer.</footer>
<style>
body {
margin: 0;
display: grid;
grid-template: "h h" 3em
"m a" 1fr
"f f" 3em / 1fr 10em;
height: 100vh;
}
header {
grid-area: h;
background: yellowgreen;
}
article {
grid-area: m;
background: coral;
}
aside {
grid-area: a;
background: lightblue;
}
footer {
grid-area: f;
background: lime;
}
</style>学习 CSS
几个有趣的小🌰
ios的滑动开关按钮实现
饼状进度条的实现
聊天气泡的实现
渐变
投影
结束语
谢谢大家～
