css初接触
一、简介: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初接触的更多相关文章
- ExtJS初接触 —— 了解 Ext Core
ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...
- ExtJS初接触 - 在项目中使用ExtJS
ExtJS初接触 - 在项目中使用ExtJS 今天ExtJS官网发布了ExtJS最新正式版4.2.1.Ext JS 4.2.1 正式版 下载 ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI ...
- 初接触BurpLoader工具
初接触burp工具 菜鸟一枚,现在在接触一段时间测试,我在测试功能性的时候,想着网站被黑案例那么多,我是不是也应该弄弄安全性测试了,所以就有了下边的第一次接触BurpLoader工具来测试手机的app ...
- 软工实践练习-Git初接触
第一次听到Git,有点不知所云,听了实践课老师的讲解,才明白了Git作为最先进的分布式版本控制系统的重要性. 至于Git的安装和使用仍旧是自己摸索着去完成了,当然在这过程中也是遇到了很多的问题. 接下 ...
- vi初接触
vi初接触 它有三种模式: 一 一般模式 二 编辑模式 三 命令行模式 介绍几种比较常用的吧 -- 退出:q 写入:w 强制:! (以上可叠加) 显示行号:set nu 取消:set nonu 跳转到 ...
- Java之路——Java初接触
本文大纲 1.Java是什么 2.Java历史 3.Java技术范围 3.1 Java SE平台技术范围 3.2 Java EE技术范围 3.3 Java 体系技术范围 4.总结 1.Java是什么 ...
- CSS 初知
CSS 初知 举例 人 { 身高:175cm; 体重:70kg; 肤色:黄色 } 描述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通 ...
- python 之 数据类型初接触
python 之 数据类型初接触 标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Set(集合) Dicti ...
- Dapr微服务应用开发系列2:Hello World与SDK初接触
题记:上篇介绍了Dapr的环境配置,这次我们来动手尝试一下Dapr应用的开发 Hello World Dapr应用的Hello World其实和其他的Hello World一样简单: 首先用你喜欢的语 ...
随机推荐
- POJ3468 A Simple Problem with Integers(线段树延时标记)
题目地址http://poj.org/problem?id=3468 题目大意很简单,有两个操作,一个 Q a, b 查询区间[a, b]的和 C a, b, c让区间[a, b] 的每一个数+c 第 ...
- CCF 201403-2 窗口 (STL模拟)
问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口.窗口之间有层次的区别,在多于一个窗口重叠的区域里,只会显示位于顶层的窗口里的 ...
- HDU 4499 Cannon (暴力求解)
题意:给定一个n*m个棋盘,放上一些棋子,问你最多能放几个炮(中国象棋中的炮). 析:其实很简单,因为棋盘才是5*5最大,那么直接暴力就行,可以看成一行,很水,时间很短,才62ms. 代码如下: #i ...
- 基数排序详解以及java实现
前言 基数排序(radix sort)又称桶排序(bucket sort),相对于常见的比较排序,基数排序是一种分配式排序,即通过将所有数字分配到应在的位置最后再覆盖到原数组完成排序的过程.我在上一篇 ...
- Mysql用户密码设置修改和权限分配
我的mysql安装在c:\mysql 一.更改密码 第一种方式: 1.更改之前root没有密码的情况 c:\mysql\bin>mysqladmin -u root password " ...
- Linux 基本权限(一)
1. 权限概念 root@hang:/home# ll 总用量 20#文件权限 链接数量 文件所有者 所属用户组 容量大小B 创建(修改)时间 文件名 drwxr-xr-x root root 11月 ...
- NoSQL 数据建模技术(转)
本文转载自:http://coolshell.cn/articles/7270.html ================================================ 全文译自墙外 ...
- Hex-Rays Decompiler Tips and tricks Volatile memory
https://www.hex-rays.com/products/decompiler/manual/tricks.shtml First of all, read the troubleshoot ...
- Codeforces Round #180 (Div. 2) B. Sail 贪心
B. Sail 题目连接: http://www.codeforces.com/contest/298/problem/B Description The polar bears are going ...
- 初识ASP.NET---若干常见错误
近期在学习ASP.NET的相关知识,期间遇到了一些错误,比較常见的错误总结了一下,希望此文能给ASP.NET刚開始学习的人一些帮助.同一时候记录这些错误也方便今后自己查看. 1. GridView& ...