当前位置: 移动技术网 > IT编程>网页制作>CSS > css的基础知识

css的基础知识

2020年07月12日  | 移动技术网IT编程  | 我要评论

初识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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网