声享正努力加载中...
超文本标记语言
不是一种编程语言,而是一种标记语言,不能进行数学或逻辑运算,只能够用来描述网页的内容和结构
HTML简要发展史
前端开发,根本上是在操作HTML标签
内容概要
小扩展:一些有趣的🌰
css是什么
Cascading Style Sheets
层叠样式表
css在页面中的使用
css的组成规则
h1 {
color: white;
font-size: 14px;
}
选择器(Selector)
属性(Property)
属性值(Value)
声明(Declaration)
css选择器
选择器用来从页面中选择元素,以给它们定义样式。
css选择器
简单选择器
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)
继承和优先级
优先级之重要性
有些声明非常重要,超过了其他所有的声明,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布局模型
常规流中的布局
块级元素(Block-level Elements)
行级元素 (Inline-level Elements)
display 属性
浮动 (float)
clear
clearfix
.clearfix::after {
content: ' ';
display: block;
clear: both;
height:0;
overflow: hidden;
}定位和堆叠
position
z-index 堆叠层次
display: flex
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的滑动开关按钮实现
饼状进度条的实现
聊天气泡的实现
渐变
投影
结束语
谢谢大家~
