一.CSS三种样式表
1、内联式、行内式：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
2、文档式、嵌入式、内嵌式：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
3、外部样式表：
a:链入式：
<head>
<link href=”css文件的路径” type=”text/css” rel=”stylesheet”/>
</head>
b：导入式：
<style type=”text/css”>
@import url(css文件的路径);或@import”css文件的路径”;
/*在此还可以存放其他css样式*/
</style>
4：问题：
1.更推荐哪一种方式？为什么？
原因： 外部样式表是指将CSS样式统一写在一个.css文件中，通过将HTML中的链接到这个文件，使得所有页面都能够使用这个样式表。这种方式可以实现样式的重用，在多个页面中引用同一个样式表，简化了页面代码，同时也便于修改和维护。
而内联样式表是指将CSS样式直接写在HTML标签的style属性中，这种方式虽然简单方便，但是不方便管理复杂样式，并且对于整个页面的样式一旦变化需要逐个修改，不太灵活。
内部样式表是指将CSS样式写在文档头部的标签之间，这种方式将CSS样式写在HTML文件中，可以集中管理，但是仅限于某一个HTML文件内部使用。
2.外部样式表中的链入式和导入式更推荐哪一种方式？为什么？
我觉得更推荐链入式。
1.性能优化：链入式方式可以并行加载多个样式表，从而提高网页加载速度。同时，它也可以被浏览器缓存，使得后续的页面加载更加高效。而导入式方式需要等待前一个样式表加载完毕后才能加载下一个，从而影响性能。
2.优先级控制：使用链入式方式，你可以在<head>部分根据样式表的顺序设置优先级。这样，后面的样式表可以覆盖前面的样式表，更好地满足页面的样式需求。导入式方式不能很好地控制样式表的顺序和优先级。
3.兼容性：大多数浏览器对链入式方式的支持更好，导入式方式在一些旧版本浏览器中可能会有兼容性问题。
3.外部样式表在html文档内任何位置引用都会生效，但是正确引用外部样式表的位置是？为什么？
外部样式表应该在HTML文档的<head>标签中引用。
1.外部样式表放在<head>标签中可以确保浏览器在加载HTML内容之前就开始加载CSS文件，减少页面加载的延迟时间。
2.将CSS代码放在外部文件中，可以让HTML文档更加清晰简洁，易于阅读和理解。同时，如果需要对样式进行修改或扩展，只需要在外部样式表中进行修改，而无需修改每个HTML文件。
3.将样式表放在外部文件中，可以被多个HTML页面共享。我们可以多利用那个页面，方便我们网页，还节省了时间。
二、CSS基本选择器：
1、元素选择器
标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
2、类选择器
.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
上课学到的e.g: .my-class"选择器将匹配所有使用了"class"属性并且属性值为"my-class"的元素
3、id选择器
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
上课学到的e.g: #my-id"选择器将匹配使用了"id"属性并且属性值为"my-id"的元素。
4、通配符选择器
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
可以使用类选择器和元素选择器组合，如".my-class p"来选择所有<p>元素且其父元素有"class"属性为"my-class"。使用ID选择器与类选择器等也可以根据需要进行组合使用。
5、问题
1.什么是元素默认属性？
元素的默认属性是指在没有应用任何CSS样式之前，元素所具备的属性和样式。这些属性和样式是由浏览器默认提供的，用于确保页面的基本结构和外观。
2.如何查看元素默认属性？
查看元素的默认属性可以通过浏览器的开发者工具来实现。大多数现代浏览器都提供了开发者工具，可以通过右键点击元素并选择“检查”或“检查元素”，打开开发者工具面板。在面板中，你可以看到元素的属性和样式，其中包括默认属性。默认属性通常会以灰色显示，以区别于通过CSS样式定义的属性。
3.通配符选择器常用于做什么？
重置或规定全局样式。它可以选择页面上的所有元素，并应用相应的样式。它可以初始化样式表，清除浏览器默认模式，我们可以更好控制页面样式。
三、CSS字体属性
1. font-family（属性写法：font-family: value;）
- 适用于所有元素
- 属性值：指定字体的名称，可以是具体的字体名称，也可以是字体族列表。例如："Arial"、"Helvetica"、"宋体"、"Arial, Sans-serif"等。
2. font-size（属性写法：font-size: value;）
- 适用于所有元素
- 属性值：指定字体的大小。常用单位有px（像素）、em（相对于父元素字体大小的倍数）、rem（相对于根元素字体大小的倍数）等。
3. font-weight（属性写法：font-weight: value;）
- 适用于所有元素
- 属性值：指定字体的粗细程度。常用的属性值有：normal（普通）、bold（加粗）、bolder（更粗）、lighter（更细）等。
4. font-style（属性写法：font-style: value;）
- 适用于所有元素
- 属性值：指定字体的风格。常用的属性值有：normal（常规）、italic（斜体）、oblique（倾斜）等。
5. font-variant（属性写法：font-variant: value;）
- 适用于所有元素
- 属性值：指定字体的变体效果。常用的属性值有：normal（常规）、small-caps（小型大写字母）等。
6. font（属性写法：font: value;）
- 适用于所有元素
- 属性值：将字体属性（font-family、font-size、font-weight、font-style、font-variant）合并为一个属性进行设置。例如："italic bold 12px Arial, sans-serif"。
四、CSS文本属性
1. color（属性写法：color: value;）
- 适用于所有元素
- 属性值：指定文本的颜色。可以使用命名颜色（例如："red"、"blue"）或十六进制值（例如："#FF0000"、"#0000FF"）。
2. letter-spacing（属性写法：letter-spacing: value;）
- 适用于所有元素
- 属性值：指定字符间的间距。常用单位有px（像素）、em（相对于父元素字体大小的倍数）等。
3. word-spacing（属性写法：word-spacing: value;）
- 适用于所有元素
- 属性值：指定单词间的间距。常用单位有px（像素）、em（相对于父元素字体大小的倍数）等。
4. text-align（属性写法：text-align: value;）
- 适用于块级元素（block-level elements）
- 属性值：指定文本的对齐方式。常用的属性值有：left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）等。
5. text-decoration（属性写法：text-decoration: value;）
- 适用于所有元素
- 属性值：指定文本的装饰效果。常用的属性值有：none（无装饰）、underline（下划线）、overline（上划线）、line-through（中划线）等。
6. text-transform（属性写法：text-transform: value;）
- 适用于所有元素
- 属性值：指定文本的大小写转换方式。常用的属性值有：none（不转换）、uppercase（转换为大写）、lowercase（转换为小写）、capitalize（每个单词首字母大写）等。
7. text-indent（属性写法：text-indent: value;）
- 适用于块级元素（block-level elements）和行内块元素（inline-block elements）
- 属性值：指定文本的缩进。常用单位有px（像素）、em（相对于父元素字体大小的倍数）等。
8. line-height（属性写法：line-height: value;）
- 适用于所有元素
- 属性值：指定文本行高，即行间距。常用单位有px（像素）、em（相对于父元素字体大小的倍数）等。
9. white-space（属性写法：white-space: value;）
- 适用于所有元素
- 属性值：指定文本的处理方式。常用的属性值有：normal（默认处理方式）、nowrap（不换行）、pre（保留空格和换行符）、pre-wrap（保留空格但换行）、pre-line（合并空格但换行）等。
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
