将CSS学习完了,大概总结一下,进行一个宏观的提升以及知识点的把控.

第一章:基础知识

1、标记

2、CSS控制页面:


           优先级别:  行内样式 > 链接式 > 内嵌式 >  导入式

   行内样式:用Style标记直接写在中间


CSS学习总结一_CSS


   内嵌式:将CSS写在<head>与</head>之间,并且用<style>和</style>标记声明


CSS学习总结一_CSS_02


   链接式:CSS从HTML中分离出来,将CSS独立一个文件夹,然后在HTML中的<head>和</head>之间写<link href="1.css" type="text/css" rel="tylesheet">其中的1.css是CSS分离出来存放的文件夹的名字;到时候在HTML中添加CSS的时候可以直接将CSS存放的文件夹拖着放到HTML的<head></head>之间,就会自动生成上面的链接

   导入式:采用@import url(1.css)或者@import "1.css"进行导入,存放在<style>与</style>标记之间


第二章:CSS的基本语法

1、CSS选择器:


   标记选择器: P、h1 


CSS学习总结一_CSS_03


   类别选择器:


CSS学习总结一_选择器_04


   ID选择器:


CSS学习总结一_Web_05


   选择器声明:


CSS学习总结一_css_06


2、CSS继承:


   父子关系:


CSS学习总结一_选择器_07


   继承运用:只给HTML父项设置格式,其所包含的子项也会有相应的属性,要想单个控制,那么就给每个项加class属性,实现一对一控制。


第三章:文字效果

1、文字样式:


   字体:通过其中的Font-family控制

   大小:font-size控制

   颜色:color控制

   粗细:font-weight控制

   斜体:font-style控制

   下划线、顶划线和删除线:text-decoration控制

   字母大小写:text-transform控制


2、段落文字:


   水平对齐方式:text-align控制

   垂直对齐方式:vertical-align控制

   行间距和字间距:line-height控制

   首字下沉:float控制


第四章:图片效果

1、图片样式:


   边框:<img>标记的border属性

   缩放:width和height(可以加入值)

   对齐:

     横向:text-align

     纵向:vertical-align


2、混排:


   文字环绕:float(left,right)

   图片文字间距:padding属性


第五章:设置网页中的背景

1、背景颜色:


   页面:body标记的background-color属性

   背景色进行页面分块


2、背景图片:


   页面:background-image:url();

   重复:background-repeat:repeat-y(垂直方向)

   位置:background-position : 30px 25px;

   固定:background-attachment:fixed;

   多背景:添加table和div来实现


3、样式综合设置:

CSS学习总结一_Web_08

总结:

    学习完了之后,感觉有好多的东西,并且也体会到了CSS深奥之处,瞬间对它的仰慕高了许多,但是总是感觉脑海中不是那么清楚,总结了一半的内容,就清楚了许多,相信等我将后面的部分总结完之后肯定会对CSS有一个大概了解,然后就是以后在实践中换个角度去了解它了.