Css的使用细谈
Css的使用细谈
Css可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.
Css简介
(1) CSS是用于布局(layout)与美化网页的. (颜色,字体)
(2) CSS是Cascading Style Sheets的英文缩写,即层叠样式表
(3) CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
(4) CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用.css为文件名后缀.
(5) CSS是大小写不敏感的,CSS与css是一样的.
(6) CSS是由W3C的CSS工作组产生和维护的。
为什么需要层叠样式表(css)
样式表能实现内容与样式的分离,方便团队开发,如图:
看一下两个网页,外观不同但是样式相同:
CSS组成
(1) 语法:
CSS定义分别由:选择符、属性、属性取值组成,
格式:selector{property:value}
(2) 单位:
相对长度单位:
px 像素(Pixel)。 div{font-size:12px;}
em 相对于当前对象内文本的字体尺寸。
div{font-size:1.2em;}
% 百分比 div{font-size:80%;}
绝对长度单位:
pt 点(Point)。
cm 厘米(Centimeter)。
mm 毫米(Millimeter)。
(3) 注释
注释的内容会被浏览器忽略,可用于为样式表加注释及调试使用。
CSS注释格式如下:/* css注释 */
(4) 颜色单位
#rrggbb (如: #ffcc00)
#rgb(如:#fc0)
rgb(x,x,x) 其中x是一个0-255的整数值,如rgb(255,204,0)
rgb(x%,x%,x%) 其中x是一个0-100的整数值,如rgb(100%,80%,0)
在HTML放置CSS方式
我们用以下的三种方式打出在网页中显示的图片
(1) 内联式
用内联是打上图这几个字,是40px,蓝色字体为:
(2)内嵌式
用内嵌式打上图的几个字,40px,蓝色字体:
……
……
(3)外部链接式
在HTML文档中是为
在CSS文档中是为
DIV+CSS对页面的布局
一 . W3C盒子模型
为了帮助理解必须了解盒子模型,每个HTML元素都可以看作一个装了东西的盒子,盒子具有宽度(width)和高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。如下
二 . 浮动设置
虽然使用绝对定位可以实现页面布局,但由于调整某个区块框时其它区块的位置并不会跟随着改变,所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动,直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流(原始文档流)中,所以文档的普通流中的区块框表现得就像浮动框不存在一样。浮动设置如图:
三 . 行框与清理
在进行页面布局时,经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性,再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时,就会在行框中留出一定的宽度,而下面的某个区块框又恰好满足这个宽度,则很可能会向上提,和上一行并列的区块框在同一行排列。而这不并是我们想要的结果,所以可以使用clear属性解决这一问题,该属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。 示例图如下
四 . 浮框基本样式
单浮框
双浮框
多浮框
综合练习实例
做一个简单的css布局的综合实例
HTML文本中的代码为
在css中的代码为
这篇随笔就到这里,下个星期会继续写。如果掌握了HTML与CSS,网上的那些网页版面基本上都可以做出来了。
谢谢阅读。
Css的使用细谈的更多相关文章
- 细谈HTML解析模块
细谈HTML解析模块 Html在网页中所占的位置,用一个简单直观的图给展示一下:
- Java程序员从笨鸟到菜鸟之(五十一)细谈Hibernate(二)开发第一个hibernate基本详解
在上篇博客中,我们介绍了<hibernate基本概念和体系结构>,也对hibernate框架有了一个初步的了解,本文我将向大家简单介绍Hibernate的核心API调用库,并讲解一下它的基 ...
- Spark RDD概念学习系列之细谈RDD的弹性(十六)
细谈RDD的弹性 所谓,弹性,是指在内存不够时可以与磁盘进行交换. 弹性之一:自动的进行内存和磁盘数据存储的切换 弹性之二:基于Lineage(血缘)的高效容错 弹性之三:Task如果失败会 ...
- 细谈getRequestDispatcher()与sendRedirect()的区别
问题?细谈getRequestDispatcher()与sendRedirect()的区别 首先我们要知道: (1)request.getRequestDispatcher()是请求转发,前后页面共享 ...
- JAVA基础细谈
JAVA基础细谈 一. 源文件和编译后的类文件 源文件的本质就是程序文件,是程序员编写,是人看的.而编译后的类文件是给电脑看的文件.一个类就是一个文件,无论这个类写在哪里,编译以后都是一个文件 ...
- 细谈unity资源管理的设计
一.概要 本文主要说说Unity是如何管理的,基于何种方式,基于这种管理方式,又该如何规划资源管理,以及构建bundle,是后面需要详细讨论的. 二.Unity的资源管理方式 2.1 资源分类 uni ...
- 细谈unity资源加载和卸载
转载请标明出处:http://www.cnblogs.com/zblade/ 一.概要 在了解unity的资源管理方式之后,接下来细谈一下Unity的资源是如何从磁盘中加载到运行时的内存中,以及又是如 ...
- 【细谈Java并发】谈谈LinkedBlockingQueue(转)
最近在看concurrent包的知识,看到LinkedBlockingQueue,发现一篇好文推荐给大家.原文地址:[细谈Java并发]谈谈LinkedBlockingQueue 1.简介 上篇我们介 ...
- 【Vue高级知识】细谈Vue 中三要素(响应式+模板+render函数)
[Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809
随机推荐
- Android view 数据缓存
Android中经常需要用到view数据的缓存,比如我们希望EditText 在被切到别的界面的时候,输入的数据要仍保持不变. 参考代码: /* 缓存textview */ public class ...
- 创建Oracle数据库、数据库名与实例名与SID之间的关系(图文详解)
分类: Oracle(9) 版权声明:转载请注明出处 JmilkFan_范桂飓:http://blog.csdn.net/jmilk 目录(?)[+] 目录 目录 软件环境 前言 安装Oracle监听 ...
- android特效集合
https://github.com/Trinea/android-open-project http://www.cnblogs.com/hawkon/p/3593709.html http://i ...
- G - Specialized Four-Digit Numbers(1.5.2)
Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit cid=1006#sta ...
- TCP三次握手与DDOS攻击原理
TCP三次握手与DDOS攻击原理 作者:冰盾防火墙 网站:www.bingdun.com 日期:2014-12-09 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接. ...
- Jenkins 的安装与简单使用
一.安装 项目中接触到了jenkins感觉是一个不错的项目发布构建工具,自己就简单的学习了一下,记录一下方便以后使用 jenkin下载地址:https://jenkins-ci.org/ 我直接使 ...
- ZipOutputStream 用法 小计
ZipOutputStream s = new ZipOutputStream(File.Create(ZipedFile)); 构造函数之后 文件就已经创建出来了 只是 0kb s.Write(bu ...
- Java反射及其在Android中的应用学习总结
一. Java反射机制 Reflection 是Java被视为动态(或准动态)语言的一个关键性质.这个机制同意程序在执行时透过Reflection APIs取得不论什么一个已知名称的class的内部信 ...
- 开始学习linux的一些疑问
Linux - Unix环境高级编程(第三版) 代码编译 https://www.linuxidc.com/Linux/2011-08/41228.htm ftp://ftp1.linuxidc.co ...
- 每天一个linux命令(23):Linux 目录结构(转)
对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统只管重要,下面 ...