这两天在学习关于HTML的知识，今天学习到CSS的知识，将自己所收获的知识点归纳一下：

首先，

　　CSS声明学习:
                 1、在head标签中使用style标签声明：
                         作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式
                 2、在标签上使用style属性进行声明：
                         作用：此声明会将css样式直接作用于当前标签。
                 3、在head标签中使用link标签引入外部声明好的css文件
                        作用：此声明相当于调用,解决了不同网页间样式重复使用的问题
                            一次声明，随处使用
            问题：
                不同的声明给同一个标签操作了同一个样式，会使用谁的？
                如果CSS的声明全部在head标签中，则遵循就近原则，谁离标签近，谁就会被显示。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS选择器，常用的四种需要我们掌握

　　css的选择器学习：
                标签选择器：
                    标签名{样式名1：样式值1;……}
                    作用：会将当前网页内的所有该标签增加相同的样式
                id选择器:
                    #标签的id属性值{样式名1：样式值1;……}
                    作用：给某个指定的标签添加指定的样式
                类选择器：
                    .类选择器名{样式名1：样式值1;……}
                    作用：给不同的标签添加相同的样式
                全部选择选择器
                    *{样式名1：样式值1;……}
                    作用：选择所有的HTML标签，并添加相同的样式

CSS相关样式的使用：

　　　　width、height、text-align、backgroundcolor、backgroundimage、color、font-size、font-family..........

然后就是我们css最重要的盒子模型：

　　　　css的盒子模型学习：
                div标签：
                    块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
                    特点：
                        默认宽度是页面的宽度，但是可以设置。
                        高度默认是没有的，但是可以设置。(可以顶开)
                        如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
                盒子模型：
                    外边距:margin
                        作用：用来设置元素和元素之间的间隔。
                        居中设置:margin:0px auto;上下间隔是0px,水平居中。
                        可以根据需求单独的设置上下左右的外边距。
                    边框：border
                        作用：用来设置元素的边框大小
                            可以单独设置上下左右
                    内边距：padding
                        作用：设置内容和边框之间的距离
                        注意：内边距不会改变内容区域的大小
                        可以单独的设置上下左右的内边距
                    内容区域：
                        作用：改变内容区域的大小。
                        设置宽和高即可改变内容区域的大小。

利用盒子模型我们可以实现简单的界面分块：

简单的代码效果如下（附代码）：

代码如下：

 <html>

     <head>

         <title>盒子模型的布局学习</title>

         <meta charset="UTF-8"/>

         <style type="text/css">

             div{

                 width: 300px;

                 height: 300px;

             }

             /*设置首部和尾部的长度范围*/

             #header,#footer{

                 width: 624px;

                 margin: auto;

                 margin-top: 20px;

             }

             #div01{

                 border: solid 1px orange;

                 float: left;

             }

             #div02{

                 border: solid 1px #8A2BE2;

                 float: left;

                 margin-left: 20px;

             }

             #div03{

                 border: solid 1px #DC143C;

                 float: left;

             }

             #div04{

                 border: solid 1px #FF7F50;

                 float: left;

                 margin-left: 20px;

             }

         </style>

     </head>

     <body>

         <div id="header">

             <div id="div01">

                 我是div01

             </div>

             <div id="div02">

                 我是div02

             </div>

         </div>

         <div id="footer">

             <div id="div03">

                 我是div03

             </div>

             <div id="div04">

                 我是div04

             </div>

         </div>

     </body>

 </html>

还有就是我所学的CSS的定位：

　css的定位学习：
                position
                    相对定位:relative
                        作用：相对元素原有位置移动指定的距离(相对的自己的原有位置)
                            可以使用top,left,right,bottom来进行设置。
                        注意：
                            其他元素的位置是不改变的。
                    绝对定位:absolute
                        作用：可以使用元素参照界面或者相对父元素来进行移动     
                        注意：
                            如果父级元素成为参照元素，必须使用相对定位属性
                            默认情况下是以界面为基准进行移动的。
                    固定定位:fixed
                        作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。
                    以上定位都可以使用top,left,right,bottom来进行移动。
                z-index:此属性是用来声明元素的显示级别的。

利用CSS定位可以写出关于任何网页界面的简单分块，利用之前学习的html相关知识可以实现部分功能。

贴出模拟百度网页代码：

 /*此为html代码*/

 <html>

     <head>

         <title>百度一下，你就知道了</title>

         <meta charset="UTF-8"/>

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

     </head>

     <body>

         <div id="header">

             <ul id="header_nav">

                 <li><a href="">新闻</a></li>

                 <li><a href="">hao123</a></li>

                 <li><a href="">地图</a></li>

                 <li><a href="">视频</a></li>

                 <li><a href="">贴吧</a></li>

                 <li><a href="">学术</a></li>

                 <li><a href="">登录</a></li>

                 <li><a href="">设置</a></li>

             </ul>

         </div>

         <div id="main">

             <img id="img_logo" src="img/bd_logo1.png" width="270px" height="129"/>

             <br />

             <input type="text" name="" id="" value="" />

             <input type="submit" name="" id="" value="百度一下" />

         </div>

         <div id="footer">

             <img id="img_logo2" src="img/buttom.png" width=""/>

         </div>

     </body>

 </html>
 /*此为CSS代码*/

 *{margin: 0px;padding: 0px;}

 #header{width: 100%; height: 36px;/*background-color: #DC143C;*/}

     #header_nav{position: absolute;right:66px; top: 14px;}

     #header_nav li{float: left;list-style-type: none;margin-left: 10px;}

     #header_nav li a{color: #333;font-weight:;line-height: 24px;margin-left: 20px;font-size: 13px;

 text-decoration: underline;}

 #main{width: 100%; height: 191.5px;/*background-color: #8A2BE2;*/text-align: center;margin-bottom: 171.5px;}

     #img_logo{margin-bottom: 26.5px;}

     input[type=text]{height:36px;width: 540px;border: solid 1px #4992FF;background-repeat: no-repeat;background-image: url(../img/camera.png);background-position-x: 500px;background-position-y: 3px;}

     input[type=submit]{height:36px;width:100px;font-size=15px; color: white; border: solid 1px #2d78f4;background-color: #3385ff;letter-spacing: 1px;position: relative;right: 5px;}

 #footer{width: 100%;text-align: center;}

 #header li a:hover{color: blue;}

利用定位知识我们可以把任何网页分块，知道内部结构，要想具体的事项所有的功能，自己还要继续学习。

加油！！！！！！！

关于CSS的知识的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. css基本知识框架图

    css基本知识框架:(一:基本知识缩影.二基本知识框架图) 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部样式 3.样式表配置方法 4 ...

  3. CSS基本知识和选择器

    一.CSS基本知识 内联式css样式,直接写在现有的HTML标签中 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red ...

  4. css基本知识框架（转）

    css基本知识框架: 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部?式 3.样式表配置方法 4.字体属性----1.font-fam ...

  5. css基本知识

    WANGJUN59451   css基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HT ...

  6. CSS 基本知识

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的 ...

  7. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  8. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  9. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  10. <转载>Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

随机推荐

  1. elasticsearch 分片(Shards)的理解

    分片重要性 Es中所有数据均衡的存储在集群中各个节点的分片中,会影响ES的性能.安全和稳定性, 所以很有必要了解一下它. 分片是什么? 简单来讲就是咱们在ES中所有数据的文件块,也是数据的最小单元块, ...

  2. day55 linux 基础以及系统优化

    Linux系统基础优化及常用命令   Linux基础系统优化 引言没有,只有一张图. Linux的网络功能相当强悍,一时之间我们无法了解所有的网络命令,在配置服务器基础环境时,先了解下网络参数设定命令 ...

  3. 放弃jQuery，使用原生js吧！

    转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...

  4. Monkey捕获Crash原理

    Android的RuntimeInit.commonInit中会设置UncaughtHandler ActivityManagerService(AMS)在执行handleApplicationCra ...

  5. 课程一(Neural Networks and Deep Learning)，第一周（Introduction to Deep Learning）—— 2、10个测验题

    1.What does the analogy “AI is the new electricity” refer to?  (B) A. Through the “smart grid”, AI i ...

  6. rabbitmq实现一台服务器同时给所有的consumer发送消息（tp框架）（第四篇）

    之前的学习了把消息直接publish到queue里面,然后consume掉, 真实的情况,我们会把消息先发送到exchange里面,由它来处理,是发给某一个队列,还是发给某些队列,还是丢弃掉? exc ...

  7. 模板模式(TemplateMethod)

    什么是Template Method模式 在父类中定义处理流程的框架,在子类中实现具体处理的模式就称为Template Mehtod模式.模板模式的关键是:子类可以置换掉父类的可变部分,但是子类却不可 ...

  8. PHP CURL 伪造IP和来路

    //随机IP function Rand_IP(){ $ip2id= round(rand(, ) / ); //第一种方法,直接生成 $ip3id= round(rand(, ) / ); $ip4 ...

  9. 正则中str.match(pattern)与pattern.exec(str)的区别

    这两个函数除了调用对象以及参数不同之外,<javascript高级程序设计>中对exec描述比较详细,对match只是说返回数组跟exec一样.书中并没有说只说了正则在非全局模式下的情况, ...

  10. 【数组】Jump Game

    题目: Given an array of non-negative integers, you are initially positioned at the first index of the ...