前端学习第三天--选择器，字体修饰

css

定义

层叠样式表(Cascading Style Sheets,缩写为CSS),是一种样式表 语言,用来描述HTML文档的呈现(美化内容)。

书写位置:

title标签下方添加 style双标签,style标签里面书写CSS代码。

css 引入方式

内部样式表:学习使用
● CSS 代码写在style标签里面

外部样式表:开发使用
● CSS代码写在单独的CSS文件中(.css)
● 在HTML 使用link 标签引入

行内样式:配合 JavaScript 使用

选择器

标签选择器

作用：使用标签名作为选择器–选中同名标签设置相同的样式

特点：选中同名标签设置相同的样式，无法差异化同名标签的样式

类选择器

作用:查找标签,差异化设置标签的显示效果。

步骤:
定义类选择器 → . 类名
使用类选择器 → 标签添加class="类名 “

注意:

· 类名自定义,不要用纯数字或中文,尽量用英文命名

· 一个类选择器可以供多个标签使用

· 一个标签可以使用多个类名,类名之间用空格隔开

开发习惯:

​ 类名见名知意

​ 多个单词可以用-连接,例如:news-hd

id选择器

作用:查找标签,差异化设置标签的显示效果。

场景:id选择器一般配合JavaScript使用,很少用来设置CSS样式

步骤:

· 定义id 选择器→#id名

· 使用id选择器→标签添加 id=“id名”

规则:

· 同一个id选择器在一个页面只能使用一次

通配符选择器

作用：查找页面所有标签，设置相同样式

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同样式

画盒子

目标：选用合适的选择器画盒子

新属性：

属性名	作用
width	宽带
height	高度
background-color	背景色

字体修饰属性

文字大小

属性名：font-size

属性值：文字尺寸，pc端网页最常用的单位px

文字粗细

属性名：font-weight

属性值：

数字（开发使用）：

正常	400
加粗	700

关键字：

正常	normal
加粗	bold

字体倾斜

作用：清除文字默认的倾斜效果

属性名：font-style

属性值：

正常（不倾斜）：normal

倾斜：italic

行高

作用：设置多行文本的间距

属性名：line-height

属性值：

1. 数字 + px
2. 数字（当前标签font-size属性值的倍数）

垂直居中

作用：使文字垂直居中

技巧：行高属性值等于盒子高度属性值

字体族

属性名：font-family

属性值：字体名

font 复合属性

使用场景：设置网页文字公共样式

复合属性:属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

div {
font: italic 700 30px/2 楷体;

}

注意:字号和字体值必须书写,否则font属性不生效

文本缩进

属性名：text-indent

属性值：

1. 数字 + px

2. 数字 + em （推荐：1em = 当前标签的字号大小1）

文本对齐方式

作用：控制内容水平对齐

属性名： text-align

属性值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

text -align本质是控制内容的对齐方式，属性要设置给内容的父级

文本修饰线

属性名：text-decoration

属性值：

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线

color 文字颜色

属性名:color

属性值：

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	red. green, blue …	学习测试
rgb表示法	rgb(r, g, b)	r,g,b表示红绿蓝三原色,取值:0-255	了解
rgba表示法	rgba(r, g, b, a)	a表示透明度,取值:0-1	开发使用,实现透明色
十六进制表示法	#RRGGBB	#000000,#ffcc00,简写:#000,#fc0	开发使用(从设计稿复制)