一、简介:CSS 即 级联样式表 。

它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

css是能够真正做到网页表现与内容分离的一种样式设计语言。

相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

这种分离方式有点像前面的配置文件。都能够提高设计效率。

二、css选择器

1、什么是选择器呢?

每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素

2、包含类型及优先级:

ID选择器>类选择器>HTML标签选择器

三、css排版

1、标准流与浮动:

标准流就是标签的排列方式。

页面里显示的顺序和代码里的顺序一致就是符合标准流的

若是给上面的标签加上浮动或定为属性,就可能脱离标准流,此时便可能出现同一行排版多个标签的情况。

2、盒子模型

css盒子模型就像普通的盒子一样具有内容(content)、填充(padding)、边框(border)、边界(margin)四个属性,每个属性又都有上、右、下、左四个部分

3、绝对定位与相对定位

(1)相对定位:没有脱离原来的标准流,相对于原来的位置移动

(2)绝对定位:脱离原来的标准流,绝对于包含此盒子的更外一层盒子移动

4、行列元素与块级元素

行列元素

<span style="font-size:14px;"><span class="menu"> 栏目一</span> </span>

块级元素

<span style="font-size:14px;"><div class="menu"> 栏目一</div> </span>

顾名思义,他们两个的区别就是“行布局”与“块布局”的区别,也因此行列元素对盒子模型的很多属性都是不能使用的的。 而块级元素只能是矩形形状的,所以盒子模型适合于我们的块级元素。

css初接触的更多相关文章

  1. ExtJS初接触 —— 了解 Ext Core

    ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...

  2. ExtJS初接触 - 在项目中使用ExtJS

    ExtJS初接触 - 在项目中使用ExtJS 今天ExtJS官网发布了ExtJS最新正式版4.2.1.Ext JS 4.2.1 正式版 下载 ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI ...

  3. 初接触BurpLoader工具

    初接触burp工具 菜鸟一枚,现在在接触一段时间测试,我在测试功能性的时候,想着网站被黑案例那么多,我是不是也应该弄弄安全性测试了,所以就有了下边的第一次接触BurpLoader工具来测试手机的app ...

  4. 软工实践练习-Git初接触

    第一次听到Git,有点不知所云,听了实践课老师的讲解,才明白了Git作为最先进的分布式版本控制系统的重要性. 至于Git的安装和使用仍旧是自己摸索着去完成了,当然在这过程中也是遇到了很多的问题. 接下 ...

  5. vi初接触

    vi初接触 它有三种模式: 一 一般模式 二 编辑模式 三 命令行模式 介绍几种比较常用的吧 -- 退出:q 写入:w 强制:! (以上可叠加) 显示行号:set nu 取消:set nonu 跳转到 ...

  6. Java之路——Java初接触

    本文大纲 1.Java是什么 2.Java历史 3.Java技术范围 3.1 Java SE平台技术范围 3.2 Java EE技术范围 3.3 Java 体系技术范围 4.总结 1.Java是什么 ...

  7. CSS 初知

    CSS 初知 举例 人 { 身高:175cm; 体重:70kg; 肤色:黄色 } 描述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通 ...

  8. python 之 数据类型初接触

    python 之 数据类型初接触 标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Set(集合) Dicti ...

  9. Dapr微服务应用开发系列2:Hello World与SDK初接触

    题记:上篇介绍了Dapr的环境配置,这次我们来动手尝试一下Dapr应用的开发 Hello World Dapr应用的Hello World其实和其他的Hello World一样简单: 首先用你喜欢的语 ...

随机推荐

  1. Android 当媒体变更后,通知其他应用重新扫描

    在媒体文件改变后 发出 Intent.ACTION_MEDIA_SCANNER_SCAN_FILE广播,告知其他应用,媒体文件发生改变. 具体代码片段: File oldFile = new File ...

  2. How Tomcat Works(六)

    本文继续分析HttpProcessor类,该类实现了org.apache.catalina.Lifecycle接口和java.lang.Runnable接口 我们先分析它的构造函数 /** * The ...

  3. hdoj 5399 Tpp simple

    WA了一下午.... 1WA:T了,因为阶乘没打表所以时间超了.. 2WA,3WA:runtime error,检查的value数组开小了,应该是MAXN.. 4WA.5WA.6WA:改了改对cnt的 ...

  4. 开源文件比较工具:WinMerge、KDiff3、diffuse

    为了寻找免费的BeyondCompare的替代品,最后经过实用,找到如下一些: 1.diffuse 感受:如果仅仅是比较两个文本类的文件,这个软件也就够用了. 安装好后,对着文件点击右键,会出现“Op ...

  5. Android导入自定义的jar包时出现 E/AndroidRuntime(486): java.lang.NoClassDefFoundError错误

    把自定义的jar包放在Android的工程的libs目录下,运行程序,会出现一下错误: 10-10 08:34:06.479: E/dalvikvm(486): Could not find clas ...

  6. MVC中Model用法

    Model:对于MVC来说,Model可不简单只是实体,它应该叫视图模型,这是我自己的理解,即视图中的数据由Model来提供,当视图的数据需要改变时,我们不用打开aspx或ascx文件,只需要修改相应 ...

  7. vtk点云数据的显示[转]

    #include "vtkActor.h" #include "vtkRenderer.h" #include "vtkRenderWindow.h& ...

  8. 复选框输入Android Studio 如果修改LogCat的颜色,默认全是黑色看着挺不舒服的

    今天一直在查找复选框输入之类的问题,上午正好有机会和大家分享一下. 怎么找到并表现LogCat这里就不需要再讲了吧,主要说一下本篇的主题,如何修改他的颜色 .我们在使用Eclipse的时候应该都用过L ...

  9. BZOJ 1061: [Noi2008]志愿者招募 费用流

    1061: [Noi2008]志愿者招募 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=1061 Description 申奥成功后,布布 ...

  10. HDU 4757 Tree 可持久化字典树

    Tree Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4757 Des ...