前端学习day3--CSS（基础选择器，字体样式，调试方式）

目录

CSS引入方式有三种：

1.写在html的title下面用style标签

2.单独放在.css文件，link仍放在title下面

3.行内样式

CSS的书写规则：

CSS的基本选择器：

标签选择器：

类选择器：

id选择器：

通配符选择器：

属性选择器：

画盒子：

width

height

background-color(盒子颜色)​编辑

多种文字控制属性，有些属性图片也适用：

字体大小font-size[要加单位px！]：

属性值：数字+单位px

字体粗细font-weight：

属性值 400 or 700

字体倾斜font-style：

属性值：normal or italic

行高line-height：

字体族font-family:

属性值：字体名

​编辑

字体复合属性font：

属性值：按顺序的各种属性值

本缩进text-indent：

属性值：2em(一般)

文本对齐方式text-align（水平方向上）：

center

left

right

文本修饰线text-decoration：

none(去掉下划线)

underline

line-through

overline

文本颜色color：

调试工具：

几个小注意点：

CSS用来美化网页默认格式

CSS引入方式有三种：

1.写在html的title下面用style标签

2.单独放在.css文件，link仍放在title下面

3.行内样式

rel是指html与引入的东西的关系的意思，使用css时rel都可写stylesheet；

工作中常用外部样式。

CSS的书写规则：

选择器 {

属性名：属性值

}

CSS的基本选择器：

选择器的作用：查找标签，设置样式

标签选择器：

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

类选择器：

不可以定义多个类属性名，但一个类属性名可以供多个类选择器来使用。

id选择器：

通配符选择器：

不需要调用，设置了则浏览器自动查找；

开发项目初期，清除项目样式的时候会使用它。

属性选择器：

[type=search]

写法一：表示选中input标签中有value属性的标签。

写法二：表示选中input选择器中不仅有type属性并且还要特定属性值的标签。

画盒子：

width

height

background-color(盒子颜色)

background-color

多种文字控制属性，有些属性图片也适用：

字体大小font-size[要加单位px！]：

属性值：数字+单位px

谷歌浏览器中默认字体大小为16px;

字体粗细font-weight：

属性值 400 or 700

字体倾斜font-style：

属性值：normal or italic

行高line-height：

属性值：数字+px

小技巧：在盒子中垂直居中

但只能是单行文字垂直居中

字体族font-family:

属性值：字体名

这行长的代码工作中到淘宝京东这些网页去复制即可

字体复合属性font：

属性值：按顺序的各种属性值

本缩进text-indent：

属性值：2em(一般)

indentation缩进

文本对齐方式text-align（水平方向上）：

属性值：

center

left

right

align对齐方式，文字水平居中text-align，垂直居中，让行高等于盒子宽。

文本修饰线text-decoration：

属性值：

none(去掉下划线)

underline

line-through

overline

文本颜色color：

一般设计师会给十六进制表示法

调试工具：

发现错误了可以开启调试工具来看看！

调试工具之html和css的用法

几个小注意点：

加粗在CSS中有样式、在html中有标签，若内容是强调的，则选择html中的strong标签。

span无法用text-align进行居中，需在其span样式中设置display:block伸展为整行块元素才可居中。

一行中的样式不一样，则在这一行中可以使用span标签再用css更改(即使用了嵌套标签的形式)。