字节前端青训营-css简介

目录

css定义

Css基本式样包括：

页面中使用css的三种方法：

选择器selector

伪类

字体设置

---

css定义

Cascading Style Shee 用来定义页面元素的样式

设置字体和颜色

设置位置和大小

Css基本式样包括：

选择器selector，选择器property,属性值value，声明declaration

页面中使用css的三种方法：

1. 外链：

<link rel = “stylesheet” href=”地址”>

1. 嵌入

<style>

  Li {margin: 0; list-styles:none;}

  P{margin:lem 0;}

</style>

1. 内联

<p style=”margin:lem 0”>Example Content</p>

选择器selector

找出页面中的元素，以便给他们设置样式

找出多种方法选择元素：

按照标签名，类名或者id

按照属性

按照dom树中的位置

种类：

通配选择器：*

标签选择器

Id选择器：#“id”

类选择器：.”类名”

属性选择器

伪类

不基于标签和属性定位元素

几种伪类

状态伪类：处于特定的状态才会被选中，如：链接

颜色设置--RGB 相关函数：1.rgb(x,y,z)

--HSL 相关函数：hsl(x,y%,z%)

--alpha透明度调节

字体设置

font-family:”字体名字”，”字体名字”，，，，，”字体名字”

使用建议：

字体列表最后写上通用字体族

英文字体放在中文字体前面

font-size:

关键字：small，mediu，large

长度：px,em

百分数：相对于父元素字体大小

font-weight:字体粗细数值

Line-height：设置每行文字的间距

上面的属性可以写在一个font当中，格式是：

font:style(样式） weight（粗细） size（大小）/height（行高） family(字体族）

text-aligin文本对齐：left,center,right,justify

letter-space文本间距：字母之间的间距，word-space单词之间的间距

Text-indent缩进

text-decoration 文本修饰

white-space:

normal：在默认情况下,多个连续空白符会被合并为一个空百符，

nowrap:段落内的文字只在一行中展示

pre:保留字节写的所有内容

pre-wrap:一行内显示不下则换行

pre-line:合并空格