这两天在学习关于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. shell while-ssh

    Linux shell脚本使用while循环执行ssh的注意事项 浏览:86次 出处信息 如果要使用ssh批量登录到其它系统上操作时,我们会采用循环的方式去处理,那么这里存在一个巨大坑,你必须要小心了 ...

  2. windows系统正常但linux系统下找不到文件的问题

    问题描述:最近一个项目开发环境是windows系统,正式环境是linux系统.验证码图片在开发环境正常,但是在正式环境下一直报404. 问题原因:File dir = new File(realPat ...

  3. CentOS7搭建FastDFS V5.11分布式文件系统-第二篇

    1.CentOS7 FastDFS搭建 前面已下载好了要用到的工具集,下面就可以开始安装了: 如果安装过程中出现问题,可以下载我提供的,当前测试可以通过的工具包: 点这里点这里 1.1 安装libfa ...

  4. POJ 2390

    import java.util.*; public class Main { public static void main(String args[]){ double interest; Sca ...

  5. linux 系统清除日志 .sh

    clear.sh #!/bin/sh cat /dev/null > /var/log/syslogcat /dev/null > /var/adm/sylogcat /dev/null ...

  6. LINUX下 一句话添加用户并设置ROOT权限

    来源:linux一条命令添加用户并设置密码 linux一条命令添加一个root级别账户并设置密码 LINUX提权,除非是拿的EXP反弹CMD,才会有回显,这样添加管理员方便了. 通常是在SHELL,菜 ...

  7. 【数组】4Sum

    题目: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...

  8. Python 基础语法——数字和表达式（包含数学上的一些函数）

    >>> 2+2 4 >>> 1/2 0 >>> 1.0/2.0 0.5 >>> 1/2.0 0.5 >>> 1 ...

  9. Redis持久化配置-AOF

    redis的持久化有rdb和aof两种. rdb是记录一段时间内的操作,一般的配置是一段时间内操作超过多少次就持久化.aof可以实现每次操作都持久化. 这里我们使用aof. 配置方式,打开redis的 ...

  10. Nodejs学习笔记（十四）—Mongoose介绍和入门

    简介 Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具 那么要使用它,首先你得装上node.js和mongodb,关于mongodb的安装和操作介绍可以参考:ht ...