CSS基本使用方法

1.行内样式，引入style样式

2.内部样式表

在head标签里，统一改想改的标签

<style>
            h4 {
                color: aqua;
            }
        </style>

3.外部样式表:在css文件里写

需要一个连接<link href="style.css" type="text/css" rel="stylesheet"/>

 4.css选择器是选择标签的

5.类选择器  .nav{}

 在一个标签内部只能有一个class

6.id选择器

#pink {

        color :pink

}

<p id="pink">

7.通配符选择器(更改全部样式)

*{

        color:pink;

}

8.font字体

8.1font-size字号大小

8.2font-family用于设置哪一种字体

8.3Arial字体，Microsoft Yahei 可以指定多个字体，如果找不到就接着往下找

8.4字体粗细font-weight:bold;

 9.字体倾斜 italic

font-style:normal;    斜体变的不倾斜

10.font 字体连写有顺序，不能随意换位置

11.文本水平对齐方式

 12.行间距line-height

text-indent首行缩进

p{
                line-height: 24px;
                text-indent: 2em;//首行缩进
            }

13.复合选择器（快速高效）

13.1后代选择器      .nav a{

                                  color :pink;

                                        }

13.2子元素选择器(只选亲儿子那一级)

div>strong{

        color:pink;       

}

13.3交集选择器

并且的关系  p.one{  }

13.4并集选择器(用逗号隔开)

p,

span，

.red{ 

        color:red;

}

14.链接伪类选择器（写的时候顺序不要颠倒）

text-decoration: none;取消下划线

15.div是一个盒子，块内元素，p h dt标签里不能包含div

 16.行内元素

 17.行内块元素<img><input>

在一行内显示，可以在css里设置宽度和高度

总结

 18.标签转换模式

display：block；把行内元素转换为块级元素

display：inline;把块级元素转换为行内元素

display：inline-block块、行内元素转换为行内元素

19.行高

line-height:18px;

20.背景颜色background-color；

背景图片background-image：url(图片);

背景图片不平铺：background-repeat：no-repeat;

背景图片水平平铺：background-repeat：repeat-x;

背景图片纵向平铺：background-repeat：repeat-y;

 21.背景位置

background-position：right top(10px  50px);(x,y)

22.背景附着

background-attachment：fixed；背景固定

23.背景透明

background：rgba(0,0,0,0.3);//a取值范围在0-1之间

背景总结

 24.权重

 25.盒子模型

25.1盒子边框（border）

border-color

boder-style

boder-width

25.2取消边框

border-top：none；

简化border：none；

      border-bottom：1px dashed red;

25.3合并相邻的边框collapse

25.4内边距（四个px顺时针）

padding:20px;//上下左右都是20px

padding:20px 10px;//上下是10px左右是20px

padding:20px 10px 30px;//上20  左右10 下30

26.padding不撑开盒子时

特殊情况，如果这个盒子没有宽度，则padding不会撑开盒子

27.外边距 (magin)

margin-left：100px;

简写：margin:100px;上下左右都100

28.块级盒子居中显示

要有宽度width:600px;

左右外边距设置为auto  margin-left:auto;

                                     margin-right:auto;

                          简写为margin:auto;

               还可以写为：margin:0  auto;

29.盒子里面文字、行内元素、行内块居中对齐

text-align:center;

30.在盒子内插入图片，通过padding、margin移动

    背景图片通过background-position：30px  30px移动

31.清楚元素内外默认边距

*{

        padding：0;

        margin: 0;

}

span行内尽量只设置左右内外边距不要设置上下边距

32.外边距合并

相邻两个盒子，尽量只给一个盒子加margin

嵌套时会出现塌陷现象

33.浮动元素不会超过父亲元素的内边框也不会超过内边距

34.清除浮动

clear属性用于清除浮动

34.1额外标签法，加一个clear标签

.clear {

        clear:both;

}

34.2父级添加overfiow属性方法

 在父级添加 overflow:hidden;

34.3使用after伪元素

 

34.4双伪元素清除浮动

 浮动总结

35.固定定位 position：fixed

36.定位模式

 36.1静态定位（几乎不用）

相当于border里的none

36.2相对定位（在原来标准流的位置还占有，后面的盒子不能占用）

36.3绝对定位（无需转换，直接给大小就行） position：absolute；

如果父级没有定位，子盒子以浏览器为准

子级绝对定位，父亲相对定位

36.4固定定位fixed

不随滚动条滚动而滚动，完全脱标不占位置，跟父亲定位没有关系，只认浏览器的可视窗口

37.堆叠顺序z-index：2；（没有单位）

38.矩形设置四个角

 可简写为border-radius:15px 0 0 15px

定位总结

39.元素的显示和隐藏

39.1display显示

display：none；隐藏

display：block；这里除了转换为块级元素以外，还显示

39.2可见性visibility

visibility：hidden；隐藏并留着位置

visibility：visible;显示

39.3溢出overflow

 显示与隐藏的总结

 40.鼠标样式

 41.轮廓线outline：0/none；取消轮廓线

42.防止拖拽文本域

resize：none;

43.垂直对齐vertical-align:middle;（只对行内块或者行内元素有效）

图片底部有缝隙，只要不是基线对齐就可，或者转换为块元素

44.溢出的文字用省略号显示

 45.css精灵技术：一个大背景下有很多小模块