这两天在学习关于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. java保留小数点两位的4种方法

    import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFormat; public c ...

  2. jvm高级特性(1)(内存泄漏实例）

    jvm内存结构回顾: .8同1.7比,最大的差别就是:元数据区取代了永久代.元空间的本质和永久代类似,都是对JVM规范中方法区的实现. 不过元空间与永久代之间最大的区别在于:元数据空间并不在虚拟机中, ...

  3. Python小白学习之路（十三）—【递归调用】

    一.递归调用定义 在函数内部,可以调用其他函数. 如果在调用一个函数的过程中直接或间接调用自身本身,则称为递归调用 从某种意义上来说,递归调用可以实现无限循环 二.递归调用的特性 必须有一个明确的结束 ...

  4. Flowable BPMN 简单使用

    1.Flowable是什么? Flowable是一个使用Java编写的轻量级业务流程引擎.Flowable流程引擎可用于部署BPMN 2.0流程定义(用于定义流程的行业XML标准), 创建这些流程定义 ...

  5. (转) rabbitmq应用场景

    原文:http://blog.csdn.net/wangpengblog/article/details/76405598

  6. .NET源码Stack<T>和Queue<T>的实现

    这阵子在重温数据结构的时候,顺便用ILSpy看了一些.NET类库的实现,发现一些基本的数据结构的实现方法也是挺有意思的,所以这里拿出来跟大家分享一下.这篇文章讨论的是Stack和Queue的泛型实现. ...

  7. rabbit服务器挂掉以后，保证队列消息还存在（tp框架）（第三篇）

    上接 第二篇 : http://www.cnblogs.com/spicy/p/7921870.html 第二篇解决了 如果其中一个worker挂掉了啦,如何保证消息不丢掉,并重新分发给其他worke ...

  8. 极光推送android sdk集成步骤

    推送,用极光,大家都说好,哈哈. 进入正题: 1.确认android studio的 Project 根目录的主 gradle 中配置了jcenter支持.(基本上现在都已经支持了,循例说一下)  , ...

  9. SpringMVC和dubbo简单的整合（附Demo）

    顺便记录下apache产品提供下载的网址:http://mirrors.shuosc.org/apache/ 第一步: 下载zookeeper,网址:http://mirrors.shuosc.org ...

  10. 微服务Kong（十）——负载均衡参考

    KONG为请求多个后端服务提供了多种负载均衡方案:一种是简单的基于DNS,另一种是更加动态的环形均衡器,他在不需要DNS服务器的情况下也允许服务注册. 一.基于DNS的负载均衡 当使用基于DNS的负载 ...