这两天在学习关于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. 读懂Netty的高性能架构之道

    Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用 ...

  2. Debian&&ubuntu系安装MegaCli

    MegaCli这个命令可以用来监控raid状态.磁盘状况等,最近上了一批ubuntu系统跑openstack,问题是MegaCli在官网上只有rpm格式的包,没有deb的包,但是还是有办法解决的,rp ...

  3. 浅谈Express的put与del

    假设有一个景区价格列表页,显示当前的价目表. 价目表存放在express应用的数组中: var tours = [ {id:0,name:'Hood River',price:99.99}, {id: ...

  4. Python初体验（一）—【配置环境变量】【变量】【input】【条件语句】【循环语句】

    写在前面的: 作为一个控制专业的女研究生,不知道每天在研究什么,但总归逃脱不了码代码的命运.之前也学习过一些C语言.C++,基础嘛,稍稍微有一些.本不想走上码农的道路,天真烂漫的过此生(白日梦过程中. ...

  5. POJ 1023

    #include <iostream> #include <string> #include <cmath> #define MAXN 65 int op[MAXN ...

  6. 对CAS机制的理解（一）

    先看一段代码:启动两个线程,每个线程中让静态变量count循环累加100次. public class CountTest { public static int count = 0; public ...

  7. Mysql 5.7版本安装：mysql 服务无法启动。

    一.解压文件 下载好MySQL后,解压到D盘下,也可以根据个人喜好解压在其他盘符的路径下,解压后的路径是:D:\mysql-5.7.17-winx64.解压好后不要太兴奋,需要配置默认文件呢! 二. ...

  8. Annotate类

    在Annotate类中有个Annotator接口,定义如下: /** A client that has annotations to add registers an annotator, * th ...

  9. Windows下整合apache和Tomcat

    1.前言: 引用:http://www.cnblogs.com/liaokailin/p/3963603.html 引用的博客里面有比较详细的说明,并且结合图片,非常生动: 我这里只做简单的说明和整合 ...

  10. Java并发编程笔记之LongAdder和LongAccumulator源码探究

    一.LongAdder原理 LongAdder类是JDK1.8新增的一个原子性操作类.AtomicLong通过CAS算法提供了非阻塞的原子性操作,相比受用阻塞算法的同步器来说性能已经很好了,但是JDK ...