1.样式有几种引入方式? link
和@import
有什么区别?
I. 样式在HTML中有三种引入方式,分别是
- 内联样式,样式作为元素的
style
属性写在元素开始标签内。例如:
内联样式
采用内联样式的标题
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
效果:
- 内部样式,嵌入样式应用于整个网页文档,这些样式放在
head
部分的元素中。例如:
内部样式
采用内部样式的标题
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
效果
- 外部样式,外部样式是包含CSS样式规则的文本文件,使用.css扩展名。这种.css文件同服哦link元素与网页关联,因此,多个网页可以关联同一个.css文件。.css文件中部包含任何HTML标记,他只包含CSS样式规则。例如:
HTML
外部样式
采用外部样式的标题
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
CSS
.div1 {
background-color:#333;
}
.div1 h1 {
font-size:30px;
color:#11bbaa;
}
.div1 p{
font-size:16px;
color:#ff22bb;
}
效果:
II.
link
元素位于HTML文本的
head
部分,用于将外部CSS文件链接到该文件。而
@import
用作将外部样式导入内部样式或者导入另一个外部样式表。
2.文件路径../main.css 、./main.css、main.css有什么区别
../main.css指向当前目录的上一层目录下的的main.css文件;./main.css、main.css指向当前目录下的main.css文件。link
元素没有兼容性问题,而@import
则从CSS2.1才开始支持。
3.console.log是做什么用的
console.log用于调试javascript,并将信息展示在控制台上。
4.text-align
有几个值,分别有什么作用
text-align属性配置文本和内联元素在块元素中的对齐方式,属性值包括:
left(默认):左对齐
right:右对齐
center:水平居中
justify:两端对齐
代码:
text-align属性
text-align:left
In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.
text-align:right
In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.
text-align:center
In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.
text-align:justify
In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.
实现效果:
5.px
、em
、rem
分别是什么?有什么区别?如何使用?
-
px
:像素(显示屏幕上的一个点) -
em
:em是一种相对字体单位,在网页中,em相对于父元素(通常是网页的body元素)所用的字体字号。1em=当前字体尺寸,2em=2倍当前字体尺寸。 -
rem
:rem类似于em,也是一种相对单位,不过是相对于根元素字体大小(在HTML元素上设置的字体大小)的单位。
6.对chrome 审查元素的功能做个简单的截图介绍
7.如下代码,设置p
为几 rem,让h1
和p
的字体大小相等?
浏览器默认字体大小为16px,则该网页根元素(HTML)字体大小为16px*62.5=12px,即1rem=12px,由于h1
字体大小为60px,所以设置p
为5rem时h1
和p
字体大小相等。
代码:
```
饥人谷
饥人谷
```
本教程版权归王康和饥人谷所有,转载需要说明来源。