本帖最后由 玉兔捣药 于 2023-2-7 19:55 编辑
今天学习内容:
CSS的引入方式:1.行内样式表(行内式):在元素的标签内部的style属性中,设定CSS样式,适用于简单的样式修改。
2.内部样式表(嵌入式):内部样式表就是在<head></head>标签中的<style></style>标签中书写样式
3.外部样式表(链接式)(开发中最常用,实现了结构和样式的完全分离)
使用步骤:1、创建css文件
2、使用link标签引入css文件即可(link标签一般写在head标签中)
3.rel 定义当前文档与被链接的文档之间的关系,stylesheet表示被链接文档是一个样式表文件
4.href 定义链接的文件的路径(URL),可以使用绝对路径也可以使用相对路径
Emmet语法:
- 作用:可以提高HTML和CSS的编写速度
- 常用的语法有
- CSS的复合选择器
- 常用的复合选择器
- 后代选择器
- 后代选择器又叫做包含选择器,是选择某个父元素下面的子元素。
- 语法:元素1 元素2 {样式声明} 选择元素1中的所有元素2(所有复合条件后代都可以被选中不局限于到底是儿子还是孙子)
- 子选择器
- 子元素选择器就是只能选择复合条件的最近的一级子元素,简单来说就是选亲儿子元素
- 语法 元素1 > 元素2 {样式声明} 表示选择元素1里面最近的一级元素2
- 并集选择器
- 并集选择器就是用多组标签来构成,同时为他们定义相同的样式,通常用于集体样式声明,并集选择器中的各选择器之间用逗号隔开。
- 伪类选择器
- 链接伪类选择器
- 例 尽量采取 link visited hover active 的顺序。(lovehate)
- 焦点伪类选择器
- :focus 伪类选择器用于选取获得焦点的表单元素,一般情况下在<input>表单元素中使用
- 伪类选择器的总结
- 伪类选择器和css的类一样,可以附加在其他的选择器之上
- 如果想使用伪类选择器,首先选择器选中的标签必须要支持这种伪类状态
- CSS的元素显示模式
- 什么是元素的显示模式
- html里面的元素(标签)是以什么方式进行显示的,比如<div>自己占一行,比如一行可以放多个<span>
- 元素显示模式的分类
- 块元素
- 常见的块元素
- <h1>~<h6>、<p>、<div>、<ul>、<ol>、<dl>等等
- 特点:
- 4、块级元素内可以放行内元素、行内块元素或者块元素
- 5、文字类的元素中不要使用块元素(如果使用会造成语义混乱)
- 行内元素
- 常见的行内元素
- <span>、<strong>、<em>、<ins>等等
- 注意点:
- 特殊情况下如果<a>标签中需要放块级元素,可以将<a>标签转化为块级元素更安全
- 行内块元素
- 常见的行内块元素
- <img>、<input>、<td>等等,同时具有块元素和行内元素的特点。
- 特点:
- 1、相邻的行内块元素在一行上显示,但是它们之间会有空白间隙。(行内元素特点)
- 元素模式的转换
- 转化为行内块元素:display:inline-block;
|