这两天在学习关于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. 基于Spark的FPGrowth算法的运用

    一.FPGrowth算法理解 Spark.mllib 提供并行FP-growth算法,这个算法属于关联规则算法[关联规则:两不相交的非空集合A.B,如果A=>B,就说A=>B是一条关联规则 ...

  2. 【hdu6058】 Kanade's sum 模拟

    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6058 题目大意:给你一个$1$到$n$的排列,请求出该序列所有区间中第$k$大之和,若该区间内少于$ ...

  3. POJ 1056

    #include <iostream> #include <string> #define MAXN 50 using namespace std; struct node { ...

  4. nginx添加认证

    1.检查工具是否安装,如果未安装则使用yum安装 #htpasswd 有以上输出表示已经安装,如果没有按装,使用如下命令安装: #yum -y  install httpd-tools 2.htpas ...

  5. linux下shell脚本执行方法及exec和source命令

    exec和source都属于bash内部命令(builtins commands),在bash下输入man exec或man source可以查看所有的内部命令信息. bash shell的命令分为两 ...

  6. .Net WEB 程序员需要掌握的技能

    原文链接:http://deshui.wang/%E6%8A%80%E6%9C%AF/2015/05/12/net-study-road 基础部分 C# 基础语法 OOP的概念,面向对象的理解 继承 ...

  7. javac之Inferring Type Arguments Based on Actual Arguments

    We use the following notational conventions in this section: Type expressions are represented using ...

  8. 【译】Spark调优

    原文地址:http://spark.incubator.apache.org/docs/0.7.3/tuning.html 译文地址:http://www.oschina.net/translate/ ...

  9. linux 的yum源

    1.备份 防止以后要用 mkdir /etc/yum.repos.d/backup mv /etc/yum.repos.d/CentOS-*.repo /etc/yum.repos.d/backup ...

  10. R语言运算符

    运算符是一个符号,它告诉编译器执行特定的数学或逻辑操作. R语言丰富的内置运算符,并提供以下类型的运算符. 运算符类型 在R编程中有以下类型的运算符 - 算术运算符 关系运算符 逻辑运算符 赋值运算符 ...