前端-css 基本使用方法

一 ，css-引用样式

第一种:在直接定义与引用样式

文章

第二种: 在头部加上下面代码(类似全局变量)，然后在引用:

c1

。

PS:(如果class="div", 那它就会去全局里找.cc样式。)

.div{

color: red;

font-size: 50px;

}

第三种：将需要引用的样式存放在其它文件(eg:commons.css文件)中

然后在head头部导入样式:

, 再在body调用样式:

c1

关于优先级，第一种最高(在body直接定义引用样式)，推存使用第三种。

二，css-选择器

选择器(即寻找标签): class选择器、标签选择器、ID选择器(这三种是重点，推荐使用class选择器)

1、class选择器（推荐）

.bt

不可点击

2、标签选择器

button

不可点击

3、id选择器

#button

不可点击

4、层级选择器

p div

第一层

第二层的内容

只让p里面的div标签应用样式，可多层嵌，类似于路径

5、组合选择器

p ，a

第一层

第二层

还有通用选择器，伪类选择器，兄弟选择器，子类选择器等，编写代码时，灵活运用就可以啦！

三，字体样式

font-size:字体大小

font-weight:字重,就是字体粗细 bold加粗/normal正常/lighter加细/100~900

line-height:行高.设置时大于等于字体大小,字体在行高中垂直居中显示

font-style:字体风格 normal正常/italic斜体

font-family:字族,设置字体类型,可设置多个值,如果前面的字体不存在或不起作用,会选择后面的字体 font:字重 风格 大小/行高 字族

长度

px:像素(pixel),屏幕上显示的最小单位

mm:毫米

cm:厘米

in:英寸

pt:点(point),一个标准的长度单位,1in = 72pt

em:相对长度,1em=16px

颜色

英文单词:如red,green,yellow等

rgb():r表示red,g表示green,b表示bule,色彩三原色,三个值可为[0-255]数值或百分比,以逗号相隔

rgba():前三个值可为像素或百分比,最后一个为[0,1]数值,表示透明度

hsl():h为Hue,表示色相,s为Saturation,表示饱和度,l为Lightness,表示明度,第一个值为[0,360]数值,后两个值为百分比

在#后跟六个十六进制数,如#AABBCC,每两位一整体,分别表示色彩三原色,可以简写为#abc

文本样式

color:文本颜色

text-decoration:字划线 underline下划线/line-through中划线/overline上划线

letter-spacing:字间距

word-spacing:词间距

text-align:文本对齐方式.横向排列 left居左/center居中/right居右

vertical-align：纵向排列

word-break:自动换行 normal默认换行规则/break-all允许在单词内换行

text-transform:英文字母大小写的转换 capitalize首字母大写/upercase所有字母大写/lowercase所有字母小写

text-indent:可以控制段落的首行缩进与缩进的距离

margin:设置段落之间的距离

就先写到这里吧，css中还有很多样式，在之后讲解吧！