CSS常见样式(一)

有一些标记带了一些缺省默认的样式,所有的默认的样式都是可以被CSS替代或者修改的。所有的标记我们会放弃它的默认样式,除非它的默认样式满足了我们的需求。虽然html结构的标签有缺省的样式,但是我们会控制它的样式,并且我们所有的样式由CSS给出,而不是由默认的html标记给出。标签只是表明了结构,结构表示了语义,标签不应该表明任何的样式,任何的样式应该由CSS给出。

字体样式

font-size:字体的大小

xx-small | large
单位:px(像素),em(字体高的整数倍),%

font-family:字体集

字体:字符的编码(二进制数) <=> 图片
1,字体的名字里有中文,特殊字符,字体的名字需要用双引号包裹
2,在一个font-family中可以设定多个字体(考虑中英文),用逗号分隔

font-weight:字体的粗细

normal:400,bold:700
推荐:使用数字

font-style:字体的斜体

normal, italic, oblique

font

统一性写法
1. font: font-style font-weight font-size/line-height font-family */
2. 有些值是可以省略, font-style font-weight line-height, font-size和font-family必须有,否则font不起作用 */

CSS常见样式(一)

color

color: 颜色
颜色有三种表示方法:
1. 名称:red,darkred,green …
2. 十六进制数来表示:RGB (red红色,green绿色,blue蓝色)
三位十六进制数:0~9,  a~f 红色#f00,绿色#0f0,     黑色#000,     白色#fff
六位十六进制数:         #ff0000             #00ff00           #000000         #ffffff
3. rgb() 0~255                rgb(255,0,0)     rgb(0,255,0)    rgb(0,0,0)         rgb(255,255,255)
百分比                         rgb(100%,0%,0%)

第四个参数:alpha:透明度  rgb(0, 255, 255, .9)

为什么用RGB能表示所有的颜色?
1. 你能看到颜色,说明有带有颜色的光,进入你的眼睛
2. 光的颜色,是由光的振动频率决定的
3. 太阳的白光通过三棱镜,频谱连续,但是显示器的白光,通过三棱镜,只有R,G,B三条谱线,为什么?
4. 眼睛只能看到R,G,B三种颜色的光
5. 颜料:黄颜色 + 蓝颜色 = 绿颜色 蓝色光 + 绿色光 = 黄色光

text-align

设定内容在盒子中的对齐方式
left,center,right

line-height

设定行高
一般来说,比字体大7\8px

让一段文字居中
水平方向:text-align: center
垂直方向:line-height 设定成和容器一样高

text-indent

缩进 使用单位是em

text-decoration

修改文字的修饰
none:什么都没有
underline:下划线
overline: 上划线
line-through: 删除线

  • 使用CSS实现文本格式化

strong    em    del    ins

CSS常见样式(一)

background背景样式

背景颜色 background-color

  • background-color: #0ff;

背景图片 background-image

  • background-image: url(image/me.jpg);

平铺模式 background-repeat

  • repeat; 平铺
  • no-repeat: 不平铺
  • repeat-x: 延水平方向平铺
  • repeat-y: 延垂直方向平铺
  • background-repeat: no-repeat;

平铺图片的位置 background-position

1. 左中右,上中下 left,right,center,top,bottom,center

background-position: bottom right;

2. px 先水平方向(x),再垂直方向(y)

background-position: 15px 30px;

  • 问题,左右方向偏移30px,垂直方向居中?

background-position: 30px center;  这是是网站显示图标的一般办法

统一性写法

background: 背景颜色 背景图片地址 平铺 背景位置;

background: rgb(0, 255, 255, .9) url(image/me.jpg) no-repeat 30px center;

CSS常见样式(一)

注:CSS Sprite,CSS精灵,CSS雪碧图

面试题:原理:当网页需要多张背景的小图时,将多张背景图合并为一张大图, 一次请求拉到本地,然后不同元素使用CSS的background-position进行定位。

优点

  • 减少请求次数,缩短页面加载时间

缺点

  • 开发过程繁琐
  • 维护过程繁琐
  • 当组合的图片过大且排列不当时,会消耗过多的内存

本站技术原创文章,是由作者:常春 创作,如若转载请注明原文及出处:https://www.aiyouseo.com/jianzhan/1528.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注