关于CSS的知识
这两天在学习关于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的知识的更多相关文章
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- css基本知识框架图
css基本知识框架:(一:基本知识缩影.二基本知识框架图) 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部样式 3.样式表配置方法 4 ...
- CSS基本知识和选择器
一.CSS基本知识 内联式css样式,直接写在现有的HTML标签中 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red ...
- css基本知识框架（转）
css基本知识框架: 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部?式 3.样式表配置方法 4.字体属性----1.font-fam ...
- css基本知识
WANGJUN59451 css基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HT ...
- CSS 基本知识
1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的 ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- (转)第一天 XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- <转载>Div+Css布局教程（-）CSS必备知识
目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...
随机推荐
- Ubuntu 16.04下的安装RabbitMQ
安装 添加源 echo 'deb http://www.rabbitmq.com/debian/ testing main' | sudo tee /etc/apt/sources.list.d/ra ...
- Google Guava 类库简介
Guava 是一个 Google开发的 基于java的类库集合的扩展项目,包括 collections, caching, primitives support, concurrency librar ...
- my SQL Workbench创建数据库
1.首先连接数据库 2. 点击图中的红圈里的按钮,新建一个Schema,即数据库(个人理解..),修改一下Name 的值,如 mydatabase ,点击apply,再点apply,然后点finis ...
- checkbox选中事件
在前端中,往往需要根据后台数据的返回选中多选框.可以根据后台返回的数据转化为数组,然后又val([数组])进行选中. 例子: html代码: <!DOCTYPE html> <htm ...
- C#使用 RNGCryptoServiceProvider 生成强随机字符串
为了生成更加可靠的随机数,微软在System.Security.Cryptography命名空间下提供一个名为system.Security.Cryptography.RNGCryptoService ...
- chrome inspect 远程调试H5
chrome://inspect/#devices 一个内置于chrome的远程调试指令,满足远程调试的几个必须条件 1,能够访问https://chrome-devtools-frontend.ap ...
- Numpy 数组和dtype的一个使用误区
首先自定义三种类型(如下代码1-3行),第一行使用scalar type,第2,3行使用Structured type. 提出问题:第5,7行同为创建数组,为什么第5行能work,而第7行会raise ...
- Python生成gexf文件并导入gephi做网络图分析
Gephi是一款优秀的复杂网络分析软件,支持导入多种格式的文件.gexf格式是Gephi 推荐的格式,基于 XML.本文是一个用python写的简单Demo,示例如何生成一个典型的gexf格式文件.代 ...
- 《Algorithms算法》笔记：优先队列(1)——API和初等实现
1.优先队列的API和初等实现 做一个总结: 栈 :先进后出 队列 :先进先出 随机队列 : 随机出 优先队列:每次出来的是最大值或最小值 1.1优先队列的API 优先队列在很多场合都有用, 比如:在 ...
- 以整体思维看问题：解决单页应用，系统角色请求覆盖身份唯一标识（本项目中是session_id命名的）发送请求问题
以前都是开始一段废话的,现在直接进入主题,首先介绍一下一些概念: 单页应用: 优点: 具有桌面应用的即时性.网站的可移植性和可访问性. 用户体验好.快,内容的改变不需要重新加载整个页面,web应用更具 ...