css的基础知识

初识css

1、什么是css。

css是英文Cascading Style Sheet的缩写，意思是层叠样式表。
作用：实现网页布局，美化网页。

2、css的优点。

表现层和结构层完全分离，符合web标准
便于团队开发
便于网站的更新升级，维护性好
用户体验好，网站性能高
能够适应不同的显示设备

3、如何链接一个css。

引入css的三种方法，（1）行内样式，如果只是想改变某一个标签内容的样式，可以在对应的标签内写上要改变的内容，例如：

<h1 style="color:red;">改变字体的颜色</h1>

（2）内部样式，如果写的页面简短不复杂，直接在页面中加入style标签就会比较方便，在HTML中写css样式表。
（3）外部样式，如果页面内容丰富、复杂，则最好另外建一个css，这样方便查看，html中的链接代码是：

<link href="style.css" rel="stylesheet" type="text/css"/>

4、如何整体把握css。

在写css之前最好先规划好页面的布局，把握总体需要的大致的样式，分好板块；然后在HTML中把板块布局好，将页面的内容填入；接着就可以去写css了。

5、编写css。

写css时要首先去掉一些默认的样式（重置样式表），例如：

*{
    padding:0;
    margin：0;
}
boby{
    font-size:14px;
    /* 一般网页是12px或14px */
}
ul{
    list-style-type:none;
    /* 让无序列表前的圆点不显示 */
}
ol{
    list-style-type:none;
    /* 让有序列表的序号不显示 */
}
img{
    display:block;
}
/* 如果在一个盒子中插入一张图片，图片出现白色底边，要消除底边 这个也可以写到自己的样式表中，就可以针对具体的盒子的照片进行修改*/

在写自己的样式表（即更具自己的页面设置样式）时，最好要由外往内走，由上往下的顺序写；即先写最外面的盒子的样式，在最大的盒子内部，先写最上面盒子的样式。

（一）对于文本，有这几个方面可以进行设置：

（1）text-decoration 用来设置文本的修饰线;上划线–overline、下划线–underline、删除线–line-through 不设置任何的修饰线是–none
text-decoration:none 一般用于a标签中。例如：

 a{
     text-decoration:none 
        /*a标签中默认是有下滑线的，这句代码可以去除a标签的下滑  */}
        a:hover{
            text-decoration:underline;
            color:#cc3333;
            /* 这是一个伪类，再点击a标签时，会出现下划线，并且颜色是#cc3333 */
        }

（2）text-indent 用来缩进文本的；例如：

p{
    text-indent:2em;
    /* 表示首行缩进两个汉字 */
}

（3）text-align 设置文本的对齐方式；对齐方式有：left(默认的对齐方式) 、center 、right 和Justify(表示两端对齐，但只对英文有效)例：

p{
    text-align:right;
}

（4）line-height 设置行高的。
在一个盒子里只有一排需要显示的内容，将行高设置和盒子一样的高度，可以达到垂直居中的效果。

（二）对于字体，有这几个设置：

（1）font-style：设置字体是斜体还是普通。
（2）font-weight：设置字体是否加粗；normal–正常不加粗、bold–加粗、bolder–更粗（也可以用数字，例100px等）。
（3）font-sixe:设置字体的大小。
（4）font-family：设置多个字体，对于中文，网页一般默认宋体。
（5）font：一种简写，上面所有与font有关的属性，可以用font一块设置，例：

h1{font:14px bold "宋体";}

（6）color：字体的颜色。

（三）对于一个盒子，有这几个属性：

（1）width:宽度，是指元素所占的的宽度。
（2）height:高度，是指元素所占的的高度。
（3）border:边框，可以设置边框的颜色，颜色以及样式；例：

.top{
    border:1px solid red;
    /* 顺序没有要求 ,这是每一边都这样*/
    
}
.nav{
     border-top:4px solid red;
     /* 这是只设置了上边框，其它边框一样 */
}

（4）padding:内边距，对四边设置可以一块设置，也可以分开设置,也可以一块设置；例：

.top{
      padding:10px;
      /* 四边的内边距都是10px */
}
.nav{
     border-top:4px;
     /* 这是只设置了盒子的上面的内边距，其它内边距一样的设置方法 */
}
.footer{
    padding:10px,20px,30px,40px;
    /* 分别代表了上、右、下、左，如果只有两个值则代表上下、左右，三个值则是上、左右、下 */
}

（5）margin:外边距，与padding的用法差不多，一个是盒子外的边距，一个是盒子内的边距。但是marhin可以实现居中，例：

.nav{
    margin:50px auto;
    /* 可以实现水平居中 */
}

（6）background:背景，给盒子加上背景，有两种情况，一种是背景颜色，一种是背景颜色。

background:#cc3333;
/* 加背景颜色 */
background:url("./images/spring.jpg");
/* 加背景图片 */

（四）对于盒子的分类，盒子分为块级盒子（块级元素）、行内盒子（行内元素）、行内块盒子（行内块元素）。

块级元素：div、h标签、p、ul/ol/li/dl/dt/dd、form、表格相关的。

行内元素：span、a、em、strong、i、b、lable、button。

行内块元素:input、img。

（1）对于一个块级元素，盒子模型的六大属性都起作用(width,height,padding,border,margin,background)，且独占一行。

（2）对于一个行内元素，width和height不起作用（即就算是设置了也不会显示效果），margin和padding在垂直方向上也不起作用，但是可以并排显示。

（3）对于行内块元素而言，除了不可以独占一行外，其余都和块级元素一样。

如果想让块级盒子并排显示，就要用到布局；三大布局：流动布局，浮动布局和层布局；一般想让块级盒子并排显示，用的是浮动布局。

在使用浮动布局时要注意，如果浮动导致父盒子塌陷了，想清除影响，可以在父盒子添加以下代码：

overflow:hidden;

如果影响了兄弟盒子，要在被影响的那个盒子中，添加以下代码：

clear:both;

浮动的属性值有left和right

float:left;
float:right;

如果想给行内元素添加宽和高度，要先将行内元素变成行内块元素，添加后才能显示效果，代码：

display:block;

对于页面中的图片，分为两种情况:一种背景图片，一种插入图片。
无论是背景图片还是插入图片都可以设置宽度和高度。对于一些图片，如果不切割，可以使用代码定位,代码：

background-pasition:50px,-60px;
/*使用像素值定位  */

也可以用关键字和百分比。

本文地址：https://blog.csdn.net/only_zing/article/details/107285921