HTML 是页面的骨,CSS 就是页面的样式,就是皮,就是描述了任意一个网页的元素:大小、字体、颜色、背景、边框。
每一个 CSS 包含两个部分:选择器+应用的属性键值:
这里就是键值对结构,p 就是选择器,大括号里面就是键值对结构,每个键值对就对应一个 CSS 的属性。CSS 代码可以放到 HTML 当中(通常是放在 style 当中),然后 style 标签可以放到 HTML 中的任意位置。
<style>
p {
color: red;
}
</style>
span标签
<span>标签是一个无语义的标签。
CSS 的引入方式
-
行内样式:写在标签的styel属性中
<body>
<p style="color: brown">
hello world
</p>
</body>
-
内部样式表,通过 style 标签来写 CSS(可以写在文件的任何位置,通常写在head标签中)
<head>
<style>
p {
color: red;
}
</style>
</head>
-
外联样式:写在一个单独的.css文件中(需要通过link标签在网页中引入)
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<p>
hello world
</p>
</body>
css选择器
css选择器是用来选取需要设置样式的标签
优先级:id选择器>类选择器>标签选择器
1.标签选择器:将所有标签p的内容全部修改
2.id选择器:先给被选中的元素,设定一个 id 属性。id 在一个页面中,不能重复,因此 id 选择器只能选中一个元素,不能选中多个。
3.类选择器:可以随心选中多个元素,将多个内容纳入同一个类中,通过类名来指定样式。
4.通配符选择器:就是 * 直接选中了页面上的所有元素,最大的用途就是取消浏览器的默认样式。不同的浏览器,默认样式不一样,所以前端开发的时候,就要取消默认样式。
通过调试工具来查看CSS属性
我这里通过 edge 浏览器来演示,打开调试模式:
- 按 F12,或者 Fn+F12
- 右键鼠标,检查
查看属性
调试模式里面选中元素,就可以查看对应的属性了:
盒子模型
HTML页面中的元素(标签)可以看成是一个盒子,由盒子中的元素包含在矩形中,通过盒子的视角进行页面布局。
组成:内容区域(content),内边距区域(padding),边框区域(border),外边框区域(margin)
CSS属性:
元素的显示模式
元素的显示模式有很多:块级元素,行内元素,行内块元素。
块级元素(独占一行,可以设置宽度和高度) 【div,h1-h6,p,ul,li,table】
行内元素(不独占一行,不能设置宽度和高度) 【span,a,em,i…】
行内块元素(相当于是一个杂交种:不独占一行,但是能设置高度和宽度) 【input,img…】
上面都是标签的默认的显示模式,也就是说可以通过 CSS 的 display 属性 来修改元素的显示模式 。常见的用法就是把行内元素改成块级元素。