css基础知识

css基础知识

1.1 概述

css(cascading  style sheet)

层叠式样式表（关键字：层叠 样式表）

前端三层：

结构层：从html角度描述网页

样式层：从美化的角度描述网页css

行为层：从用户交互的角度书写网页的行为

1.2 css组成

css分为两部分：

1.选择器

2.样式属性

1.3  css作用

css作用：设置元素样式属性

书写css要求：

有什么样式书写什么属性。

每一条属性，逐条书写，每条属性结尾书写分号;

 

 

盒子属性：

width: 盒子宽度，单位是px（像素）

height: 盒子高度，单位是px（像素）

mso-para-margin-left:0.0000gd;text-indent:21.0000pt;mso-char-indent-count:0.0000;">短横连接的都是单一属性

background复合属性

border: 也是复合属性（边框）

复合写法属性值用空格隔开

border: 1px(边框线宽度)     solid（线的类型：实线）     #000（线的颜色）;

 

 

文字属性：

color: 文字颜色

font-size: 单一属性，文字大小（字号），单位也是px

font-family: 字体

可以同时设置多个字体（用逗号隔开），会从第一个字体开始匹配,字体名称用双引号包裹

先书写英文字体（Arial）

再书写中文，Microsoft Yahei(微软雅黑) 宋体（SimSun）

1 font-family: "Arial","微软雅黑","宋体";

如果要求网页加载更快，书写英文单词

1 font-family: "Arial","Microsoft Yahei","SimSun";

 

1.3 css书写位置

1.内嵌式《style>标签

2.行内式style属性

3.外链式《head》标签内部：《link rel=”stylesheet” type=”text/css” href=”路径”》

 

 

1.4 css杂项

css键值对：    k: v

每一条属性结束必须添加分号;

每一条属性独占一行。

css对空格，缩进，换行不敏感。

1 div {

2  /*盒子属性*/

3  width: 300px;

4  height: 300px;

5 

6  border: 10px solid red;

7  /*文字属性*/

8  color: white;

9  font-size: 30px;

10  font-family: "Arial","Microsoft Yahei","SimSun";

11 }