css笔记

1、引用css样式

   <link rel=”stylesheet” type=”text/css” href=””/>

2、Import

   Import+空格+url(css文件路径)

3、css里注释/**/

4、选择器

• 标签选择器 ：如p，a等标签
• 通配符选择器：*{}。。。全局选
• 类选择器：.类名{ }
• Id选择器：#id名{}

5、复合选择器

• 标签指定式选择器 ： h3.class名{ }
• 后代选择器 ：.类名 li{}; ul li{}
• 并集选择器:p,a,span{}
• 子元素选择器:div>p{}  只有有div下的p标签。

注释：子元素选择器使用大于号">"做为连接符，子元素选择器只能选择作为某元素子元素的元素，而后代选择的两则之间可以加标签，但父子元素中间如果加标签就找不到了

6、属性选择器   H1[id]{……}

7、伪类

  ：first-line     .类名:first-line{colo=”red”}

  :first-letter

  :first-child

  :before

  :after

 

A:link{} 用于未被访问过的标签

A:hover{}用于鼠标悬停时状态设置

A:active{}用于元素被激活后

A:visited{}用于已被访问过的

A:focus{}用于元素拥有焦点时

 

 

 

 

8、层叠性

   样式叠加和覆盖，按照css优先级

9、继承性

   当设置div样式的时候，其下子标签p，也跟着一起生效

10、css优先级

• 内嵌样式>嵌入样式>外部样式
• id选择器>类选择器>标签选择器>通配符选择器

11、Display

元素值

none	此元素不会被显示
block	元素会被设为块级元素
inline	默认值，此元素会被设置行内元素
Inline-block	行内块元素

 

 

 

   

 

12、Font

   Font-family:字体类型，什么字体

   Font-size：字体大小

   Font-weight：字体厚度

   Font-style：字体样式（斜体……）

Font：font-style font-weight font-size font-family (font:itline 700 12px “黑体”)

 

13、字符和文字间距

Letter-spacing:字间距

Word-spacing：单词间距

14、text-decoration:文本装饰

none;去掉文字样式

Underline：下划线

Overline：上划线

Line-through：删除线

15、行高

行高=文字的高度+行间距

Font:12px/1.5em “宋体”

Font:12px/150%“宋体”

Font:12px/1.5 “宋体”

Font:12px/20px “宋体”

行高加单位是先计算后继承，以父为基准

行高不加单位先继承后计算，以子的字体大小为准

Line-height：文本垂直居中，一般设置为何height一样值，文本垂直居中，左右居中用text-aline.

16、

text-align：水平对齐

 Text-indent：首行缩进    logo会设置负值

17、white-space：设置文本换行控制

  Normal：默认值，自动换行（一连串不间隔的字母除外）

  Pre：预格式化，把当前文档的书写格式保留

  Nowarp：强制不换行

18、word-break设置单词换行控制

Normal：使用浏览器默认的换行规则

Break-all：允许在单词内换行

Keep-all：只能在半角空格或连字符处换行

 

 

 

19、Div

           Border：1px  silver red;

           Padding:20px 0 10px 5px;

           Padding:20px 50px;

           Padding:0 auto;

           Margin:200px 20px 20px 10px

           Margin:20px; 0px;

 

二、css部分编程技巧

1.让子div在父div中垂直左右居中

  . 父div{

Postion:relative;

 

}

.子div{

Posetion:absolute;

Top:0;left:0;top:0;bottom:0;

Margin:auto;

}

2.首先建站的时候要设置header cenet 和footer的宽度，一般为760。Header和footer分离出来