CSS网页样式和样式属性

一、网页样式：HTML页面添加CSS样式：CSS（层叠样式表）

特点：层叠的意思就是“权重”、“覆盖”、“继承”，通过良好的层级命名更好的实现效果，以更少的代码实现更多的功能；

1、内部样式：在head内部应用；

将CSS定义在head内部，利用<style></style>标签包含起来，叫内部样式表；

格式：

<style type="text/css">

选择器{属性：属性值；}

</style>

2、行内样式(内联)，只能针对当前标签生效；

<div style="属性：属性值"></div>

二、样式属性

解释：CSS和HTML一样，也是一种标记语言，代码简单，通过浏览器解释执行，CSS可以很方便的用来控制网页的外观。

1、width：数值PX；宽度

2、height：数值PX；高度

3、margin：外间距

元素实现居中的条件：给盒子一个固定的宽度值，同时写上margin:0 auto;

4、float：浮动

左浮动 left | 右浮动 right | 取消浮动 none;

原理：

a)做水平布局是所有元素都需要设置浮动；

b)元素设置浮动后，本身是不会占位了，需要给父级盒子固定高度，这样父级的兄弟元素就不会往上跑了(暂时的解决方法)；

c)拥有浮动元素的宽度之和不能大于父级盒子，否则最后一个就会被挤下去；

d)盒子加上浮动属性后宽度会从100%变成自适应；

5、background-image:url（图片路径）;

背景图：保存时不能是中文，否则引用路径乱码；

a)背景图不会占位，所有背景图片需要给高度；

b)默认会在盒子整个范围内水平和垂直方向重复平铺；

c)背景图是写在样式中，只是起到了修饰的作用；

6、background-color:#fff; 背景色：色值注意加#

7、color：文字颜色；

8、text-align：文本对齐方式(只对文字和图片生效)

左对齐 left | 居中对齐 center | 右对齐 right

9、border：线的粗细  线的类型  线的颜色；外边框线

线条类型：soild 实线｜dashed 虚线｜dotted 点状线｜double 双线

10、background-repeat：背景图重复

repeat-x 水平方向平铺｜repeat-y 垂直方向平铺｜no-repeat 背景图不重复

11、background-position:水平方向 垂直方向； 背景图定位

水平方向X轴：left 左｜center 中｜right 右｜绝对像素值

垂直方向Y轴：top 顶｜center 中｜bottom 下|绝对像素值

12、margin：外间距 -盒子边框与盒子边框之间的距离(不包括边框的像素)

当给一个值时：指的是四个方向；当给两个值时：指的是上下、左右；

当给三个值时：指的是上、左右、下；当给四个值时：指的是上、右、下、左；

13、padding：内填充 -盒子边框与内容之间的距离

当给一个值时：指的是四个方向；当给两个值时：指的是上下、左右；

当给三个值时：指的是上、左右、下；当给四个值时：指的是上、右、下、左；

注意点：如果盒子有固定尺寸应用padding后，需要减去padding值，因为padding值会使自身变大；

经验：当margin和padding同时生效时，优先使用padding；

14、line-height:30px；文字行高，在给定的行高范围内垂直方向居中；

15、text-transform：字母转换

capitalize：首字母大写｜uppercase：全部大写｜lowercase：全部小写

16、font-size:14px； 字号大小英文：基数偏多；中文：偶数偏多

17、font-family<字体族>:“微软雅黑”,"宋体"；

网页安全字（装系统时就有的字体）：

中文：微软雅黑、宋体、黑体；英文：arial,其他罗马字

a)多个字体用逗号隔开，后面的字体属于备用字体；

b)中间有空格的英文字体或中文字体，需要加引号；

c)中英文混排时，一般英文字体放在前面；

18、font-weight:normal; 字体加粗

normal 不加粗 ｜ bolder 加粗 ｜ bold 加粗

19、font-style:normal; 字体斜体

normal 不加粗 ｜ italic 斜体 ｜ oblique 倾斜

20、text-decoration:none; 文本装饰线

underline 下划线｜line-throught 删除线｜overline 上划线

21、display:block; 显示为(转换)

block 块级元素 ｜ inline 行级元素