css基础知识

css学习来源--黑马pink讲前端

                                                                                                                ---素材内容均来自pink老师

css初识

设置html文本内容(字体，大小，对齐方式)，图片外形(宽高，边框样式，边距)及版面布局和外观显示样式

选择器：指定css样式html标签，花括号是对该对象的具体样式

一.选择器

分类:

1.基础选择器

a.标签选择器

b.类选择器(class属性)

 

c.id选择器(只能出现一次)

d.通配符选择器

2.复合选择器

a.后代选择器

b.子选择器

c.并集选择器

d.伪类选择器

二.字体属性

字体大小：font-size

字体粗细： font-weight

 

字体样式： font-style 

em,i 改为不斜体

字体复合属性 font:font-style font-weight font-size(!)/line-height font-family(!)

三.文本属性

1.颜色 color

2.对齐文本 text-align

 3.装饰文本 text-decoration

4.文本缩进 text-indent 一般首行缩进

em: 相当于一个文字的大小

5.行间距 line-height

四.css引入样式

 1.行内样式(行内式)

2.内部样式表(嵌入式)

3.外部样式表(链接式)

 

四.元素显示模式

1.块元素

2.行内元素

3.行内块元素

显示模式转换

五.背景

1.背景颜色 background-color

2.背景图片 background-image 

3.背景平铺 background-repeat

4.背景图片位置 background-position

5.背景图像固定 background-attachment

6.背景复合写法

7.背景半透明

垂直居中

 

六.三大特性

1.层叠性

2.继承性

3.优先级 

七.盒子模型 

网页布局：1.准备好相关网页元素(box)      2.利用css设置盒子样式,摆放相应位置     3.装内容

                   css本质为一个盒子，封装html元素 

1. 边框

border-style :  solid 实线边框     

                      dashed 虚线边框

                      dotted 点线边框

a.边框的简写

 

b.边框分开写

c.层叠性

d.细线边框

合并相邻边框，是公共边与单个边框粗细相同

e.边框影响盒子大小

2.内容

3.内边距(padding)

边框和内容间的距离

 a.简写

b.内间距影响盒子大小

内边距会影响盒子模型的大小，内间距会加宽高得最后的宽高

特殊情况：如果盒子本身没有指定width/height属性，则姿势padding不会撑开盒子大小

div p 不写长宽，继承父亲，不会撑大盒子

4.外边距(margin)

a.简写方式与padding相似

b.实现水平居中（行块元素）

1.必须指定宽度width

2.左右外边距都设置为auto

margin: 0 auto;

（行内元素/行内块元素）给其父元素       水平居中: text-align: center;

c.外边距合并 

margin定义块元素的垂直外边距，可能出现外边距的合并

d.嵌套块元素垂直外边距的塌陷   153

e.清除内外边距

网页元素会自带默认的内外边距，不同浏览器默认值不同

行内元素尽量只设置左右内外边距

文件保存自动对齐设置