WEB_Day02(CSS简介、样式规则、字体样式属性、选择器、注释、外观属性、样式表、标签的显示模式、复合选择器)
CSS简介
CSS 通常称为CSS样式表或者层叠样式表(级联样式表)。主要用于设置HTML页面中的文本内容(字体 大小 对齐方式) ,图片(宽度、高度、边框、边距等) 版面的布局.
CSS是以HTML为基础,提供丰富的各种功能 ,字体、颜色、背景、的控制,整体的排版,而且还可以针对不同的浏览器设置不同的样式。
CSS样式规则
<style>
h1 {
color: red;
font-size: 20px;
}
body {
background-color: seagreen;
}
</style>
规则:
- h1 和body 是选择器 用于指定css样式作用的HTML对象,花括号内部是对该对象设置的具体的样式。
- 属性和属性值以键值对的形式出现
- 属性是对指定的对象设置样式属性。
- 属性和属性值之间以英文的冒号连接
- 多个键值对之间按使用英文的分号区分。
CSS字体样式属性
字体的大小 font-size:
设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位,其中相对长度单位比较常见,推荐使用px(像素)
可以使用绝对长度:
px像素,in 英寸,cm 厘米,mm 毫米,pt 点
字体的设置 font-family:
在表示字体的时候,可以使用英文,也可以使用中文字体,如果当我们使用英文字体名称的时候,此时如果字体的名称是由一个单词组成,则可以直接写,如果是由多个单词组成,则需要加双引号或者单引号
中文字体名一般都需要使用单引号或者双引号引起来
font-family: '华文中宋', Courier, monospace;
- 在网页中,普遍使用的字号为14px
- 尽量使用偶数的数字字号,因为在ie6中 对奇数的支持有bug
- 各种字体之间必须使用英文的逗号分割
- 中文字体需要加上英文的引号
- 可以同时设置多个字体,多个字体之间是一种备选关系。
- 在使用字体的时候尽量使用一些系统默认的常规字体
字体的粗细 font-weight:
<b>字体的粗细程度</b>
<strong>这是第二种设置字体的粗细</strong>
使用CSS实现字体的粗细程度的设置可选的值:
数字的范围:100-900
属性值:normal(400) bold(700) bolder lighter
字体的风格 font-style:
主要设置字体是否倾斜,相应的标签 i 和 em
<b><i>字体的粗细程度</i></b>
<strong><em>这是第二种设置字体的粗细</em></strong>
Nomal:默认值,浏览器显示为标准字体
Italic:斜体的字体
Oblique:显示为倾斜
字体的综合设置:
font: oblique 700 40px "楷体";
具体语法:选择器:{font: font-style font-weight font-size font-family}
在使用的过程中,必须严格遵循上边的语法,顺序不能更换
其中的一些属性是可以省略,省略之后可以取它的默认值,但是必须保留 font-size 和 font-family ,否则font属性将不起作用
选择器(重点)
标签选择器(元素选择器):
使用HTML标签名作为选择器。
语法:
标签名【元素名】{属性:属性值;属性:属性值}
<div>
<b><i>字体的粗细程度</i></b>
<strong><em>这是第二种设置字体的粗细</em></strong>
</div>
<div>
使用CSS来改变字体的粗细程度
</div>
div {
/* font-size: 35px;
font-weight: 400;
font-style: oblique; */
font: 40px "楷体";
}
类选择器:
类选择器使用“.”(英文的点号) 进行标识,后面紧跟类名
语法:
.类名{属性:属性值;属性:属性值}
完成上边google样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: cadetblue;
width: 500px;
height: 200px;
}
span {
font-size: 100px;
font-weight: 800;
}
.blue {
color: blue;
/* color 设置前景色 字体颜色*/
}
.red {
color: red
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<div>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class