菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: CSS学习_陈佳乐_20230207 [打印本页]

作者: StandBmCR 时间: 2023-2-8 00:08
标题: CSS学习_陈佳乐_20230207

CSS体系

一.今天学习的内容

9:00-20:00

1.文字属性

①字体外观

②字体粗细

③字体的复合属性

2.文本属性

①文本颜色

②RGB代码

③文本对齐

3.文本装饰

使用属性是text-decoration

4.文本缩进

属性是text-indent 控制首行缩进

5.行间距

属性是line-heigth

6.文本换行

属性white-space

7.CSS的引入方式

①行内样式表（行内式）

②内部样式表（嵌入式）

③外部样式表（链接式）

8.Emmet语法

可以提高HTML和CSS的编写速度

输入div 按tab键能快速补全标签

①一次生成多个标签 div*5

②生成父子级关系标签 div>p

③生成兄弟关系标签 div+p

④生成带有类名为demo的p标签 p.demo

⑤生成带有id属性的标签

⑥使用自增符号生成顺序内容

⑦生成标签时直接添加内容

⑧快速生成css代码

9.CSS的复合选择器

对基础选择进行组合而形成的选择器

①后代选择器

后代选择器又叫做包含选择器，是选择某个父元素下面的子元素。

语法：元素1 元素2 {样式声明} 选择元素1中的所有元素2（所有复合条件后代都可以被选中不局限于到底是儿子还是孙子）

②子选择器

子元素选择器就是只能选择复合条件的最近的一级子元素，简单来说就是选亲儿子元素

语法元素1 > 元素2 {样式声明} 表示选择元素1里面最近的一级元素2

③并集选择器

并集选择器就是用多组标签来构成，同时为他们定义相同的样式，通常用于集体样式声明，并集选择器中的各选择器之间用逗号隔开。

④伪类选择器

链接伪类选择器

:link 选择所有未访问过的链接

:visited 选择所有已经被访问的链接

:hover 选择鼠标指针悬浮的链接

:active 选择所有鼠标点击时的链接

⑤焦点伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素，一般情况下在<input>表单元素中使用

10.元素显示模式

①块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<dl>等等

自己独占一行

高度宽度可以自由设置

宽度默认是父级宽度的100%

块级元素内可以放行内元素、行内块元素或者块元素

文字类的元素中不要使用块元素（如果使用会造成语义混乱）

②行内元素

<span>、<strong>、<em>、<ins>等等

相邻的行内元素在一行上显示，一行可以显示多个

宽和高设置无效

默认的宽度是它本身内容的宽度

行内元素只能容纳文本或者其他行内元素

③行内块元素

<img>、<input>、<td>等等，同时具有块元素和行内元素的特点。

相邻的行内块元素在一行上显示，但是它们之间会有空白间隙。（行内元素特点）

宽高可以设置（块级元素特点）

默认宽度是它本身内容的宽度（行内元素的特点）

④元素模式的转换

转换为块元素：display:block;

转换为行内元素：display:inline;

转化为行内块元素：display:inline-block;

21:00-23:00

1.img图像标签

属性名：src

属性值：图片的路径

属性名：alt

属性值：替换文本

作用：在图片不能正常显示的情况下的文本提示

属性名：title

属性值：文本

作用：鼠标停留在图片上时的提示文本

属性名：width

属性值：像素

作用：设置图片宽度

属性名：height

属性值：像素

作用：设置图片的高度

属性名：border

属性值：像素

作用：给图片添加边框

2.超链接语法和分类

①外部链接

②内部链接：网站内部页面之间的链接

③空链接：如果没有确定链接目标时，可以使用空链接

如果href的地址时一个文件或者压缩包，那么点击之后会下载这个文件

网页元素作为链接入口：在页面中的各种网页元素，比如文本、图片、表格、音频、视频等等都可以添加超链接

锚点链接：点击某个链接，跳转到当前页面的某个位置

④表格标签

表格的基本语法

<table></table>标签用于定义表格

<tr></tr>标签用于定义表格中的行（table row），必须要嵌套在<table></table>中

<td></td>标签用于定表格中的单元格（table data），必须要嵌套在<tr></tr>中

<th></th>标签用于定义行中的内容是表头内容，表头内的字体会加粗并且居中对齐

3.表格的属性

align 规定表格的对齐方式

属性值：left、center、right

border 规定表格的边框

属性值：1或者""

width 规定表格的宽度

属性值：像素值

cellspacing 控制单元格之间的空白，默认是2像素

属性值：像素值

cellpadding：控制单元格里面的内容和单元格边框之间的空白，默认是1像素

属性值：像素值

4.表格的结构标签

表格中用<thead></thead>标签来表示头部区域，<tbody></tbody>来表示表格的主体区域，这样可以更好的区分表格结构，方便后期的元素定位。

合并单元格

先找到目标单元格

跨行合并使用rowspan=“合并单元格的个数” 跨列合并使用colspan=“合并单元格的个数”

将被合并的单元格删除掉

二.今天遇到的问题

1.逻辑符号打错导致无法生成页面

2.英语单词写错

三.问题解决方法

1.多复习,多练习,把复杂的代码都记住

2.不懂的单词和代码抄写下来,每天利用时间背诵

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)