一.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(合并空格但换行)等。