首页 > 技术文章 > css10.10

1014852131qq 2020-10-12 08:28 原文

CSS(层叠样式表)

定义如何显示HTML元素

1、CSS的三中引入方式:行内样式(内联),内部样式表,外部样式表

2、语法:CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。每条声明由一个属性和一个值组成。

3、选择器

3.1 元素选择器 div{}

3.3 类选择器 .cl{}

3.4 ID选择器 #id{}

3.5 属性选择器 [type=‘text’]{}

优先级问题:

内联 》 ID选择器 》类选择器 》元素选择器

4、尺寸(行内元素的宽和高不生效)

width:    max-width:    min-width;

height:   max-height;    min-height;

5、背景

background-color:

background-image:url(),url();

background-repeat:背景平铺

background-position:背景图位置;水平位置  垂直位置

background-attachment:背景图固定,是否滚动

background-size:背景图尺寸width height; cover全覆盖;contain扩展到最大尺寸;

多张背景图写法:background: url() no-repeat,url();

6、文本:改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

text-indent:首行缩进;

text-align:文本行对齐方式;

text-decoration:下划线underline、删除线line-through、顶划线overline;(装饰修饰)

line-height:高度固定后,可以设置垂直居中

word-break:单词换行

white-space: nowrap;文本不换行

overflow: hidden;

text-overflow: ellipsis;文本超出显示省略号

7、字体

font-family:字体类型;可以写多个,浏览器识别的第一个;

“Microsoft Yahei(微软雅黑),SimSun(宋体),SimHei(黑体)”

font-size:字体大小;chrome最小12px;

font-weight:字体粗细;bold加粗;bolder更粗;lighter更细;400等同于normal;700相当于bold;

font-style:斜体;normal正常;italic斜体;oblique倾斜(这两个斜体在浏览器看上去相同)

color;字体颜色;

推荐阅读