CSS基本样式简单介绍
具体详情内容请查阅《css参考手册》
一、基本结构样式
width 宽度
height 高度
background 背景
border 边框
padding 内边距
margin 外边距
其中,width,padding,margin如果使用百分数进行设置,实际上以自己的父盒子的宽度进行参考。border 不能用 百分比设置。
未设置 box-sizing时:
盒子宽度 = width + 左右padding + 左右border;
设置 box-sizing : border-box 后:
盒子宽度 = width;
二、背景样式
background-attachment: fixed; 背景是否滚动
background-color: gray; 背景颜色
background-image: url(bg.jpg); 背景图
background-repeat: no-repeat; 背景图是否重复
background-position: center 0px; 背景图位置
复合写法:
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
三、边框样式
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: blue;
border-right-color: blue;
border-bottom-color: blue;
border-left-color: blue;
复合写法:
border: 1px solid red;
四、字体和文本样式
font-size 文字大小(一般均为偶数)
font-family 字体(中文默认宋体)
color 文字颜色(英文、rgb、十六位进制色彩值)
line-height 行高
text-align 文本对齐方式
text-indent 首行缩进(em缩进字符)
font-weight 文字着重
font-style 文字倾斜
text-decoration 文本修饰
letter-spacing 字母间距
word-spacing 单词间距(以空格为解析单位)
五、块和内联
块 :显示一行
内联 :宽度和高度依赖文本的宽高
display : inline-block/block
inline-block的特性:
1) 使块元素在一行显示
2) 使内嵌支持宽高
3) 换行被解析了
4) 不设置宽度的时候宽度由内容撑开
六、浮动样式(float)
描述:元素加了浮动,会脱离文档流 ,按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止
属性值:left/right/none
特性:
1) 使块元素在一行显示
2) 使内嵌支持宽高
3) 不设置宽度的时候宽度由内容撑开
4) 脱离文档流
5) 提升层级半层
注:文档流是文档中可显示对象在排列时所占用的位置
七、 定位(position)
属性值:relative/absolute/fixed
relative特性:
1) 不影响元素本身的特性;
2) 不使元素脱离文档流;
c) 如果没有定位偏移量,对元素本身没有任何影响;
absolute特性:
1) 使元素完全脱离文档流;
2) 使内嵌支持宽高;
3) 块属性标签内容撑开宽度;
4 )如果有定位父级相对于定位父级发生偏移,没有定位父级相对于整个文档发生偏移;
5) 相对定位一般都是配合绝对定位元素使用;
fixed特性(IE6不支持):
与绝对定位的特性基本一致,差别是始终相对整个文档进行定位;
定位的层级:
使用 z-index:[number] number越大 层级越高
注:
absolute 和 relative 没有 对应关系。
八、滤镜样式
标准(w3c) 不透明度 opacity:0~1;
IE私有 filter:alpha(opacity=0~100);
九、表格样式(table)
1) 不要给table,th,td以外的表格标签加样式;
2) 单元格默认平分table 的宽度
3) th里面的内容默认加粗并且左右上下居中显示
4) td里面的内容默认上下居中左右居左显示
5) table 决定了整个表格的宽度;
6) table里面的单元格宽度会被转换成百分比;
7) 表格里面的每一列必须有宽度;
8) 表格同一竖列继承最大宽度;
9) 表格同行继承最大高度;
CSS基本样式简单介绍的更多相关文章
- CSS基础之简单介绍
网页诞生初期,没有描述样式的语言,创建了很多用于描述样式的标签.但这些标签破坏了html作为一门结构语言的表现. 于是,W3C在1995年开始起草CSS,提出将结构和样式分离的解决方案. 元素 元素是 ...
- 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动
作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...
- jQuery学习----简单介绍,基本使用,操作样式,动画
jQuery简单介绍 jq是js的插件库,说白了,jq就是一个js文件 凡事能用jq实现的,js都能实现.但是js能实现的,jq不一定能够实现 jq的引入 http://www.bootcdn.cn ...
- css样式的介绍
1.什么是css? 简单的来说css就是配合HTML的,HTML主要负责页面的结构,css就像一个美容师,主要负责页面的美化. 2.css的样式 css的样式有三种:行内样式 内部式 外部链接式 ...
- CSS简单介绍及应用
CSS的简介 概述: Cascading Style Sheets, 层叠样式表. 作用: 用来美化页面的. 分类: 行内样式: //直接写在元素(html的标签)中的样式. 内部样式: //写在&l ...
- HTML简单介绍及举例
超文本标记语言(Hyper Text Markup Language,简称HTML)是为"网页创建和其他可在网页浏览器中看到的信息"设计的一种标记语言.HTML被用来结构化信息,也 ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
- ASP.NET MVC 简单介绍①
ASP.NET MVC 简单介绍① 只做了重要描述,内容出自菜鸟教程网站内容. 目录 1布局 2HTML 帮助器 3.Razor 语法 4.添加样式 5.Layout 6. Controllers ...
随机推荐
- Lua学习笔记2. lua变量和 循环
1. lua中变量的作用域有三种:全局,局部,表中的域 需要注意的是默认的变量都是全局变量,必须声明为local的变量才是局部变量,即使是在函数里面没有使用local修饰的变量依然是全局变量!!!! ...
- Light oj 1379 -- 最短路
In Dhaka there are too many vehicles. So, the result is well known, yes, traffic jam. So, mostly peo ...
- day27 CRM delete& action& 嵌入CRM
课程目录:deleteactionpop up window嵌入crm项目 权限(未讲)学员交作业发邮件 代码路径:https://github.com/liyongsan/git_class/tre ...
- iptables详解(7):iptables扩展之udp扩展与icmp扩展
前文中总结了iptables的tcp扩展模块,此处,我们来总结一下另外两个跟协议有关的常用的扩展模块,udp扩展与icmp扩展. udp扩展 我们先来说说udp扩展模块,这个扩展模块中能用的匹配条件比 ...
- sql复制表结构及复制表数据
一.复制表结构 假设我们有一个数据表Person,有Id,FirstName,LastName,Weight,Height5个列,表结构可以参考这一篇.现在我们想创建一个新表叫People,表结构和P ...
- java根据所给的根目录获取底下所有文件夹结构
所写工具类背景:项目经理叫我写个工具类实现:给个项目的根目录分析java文件及jsp文件.记录文件类型.路径.文件名和包名. 定义的实体类(这里我用了easypoi以后方便写入excel文档) @Da ...
- AES前后端加密
1.前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- js判断是否是移动端(触摸屏)或者是PC
js代码: console.log("ontouchstart" in window); 手机web浏览器,chrome模拟手机.手机APP会返回true, pc端(非手机模拟状态 ...
- 关于px em rem的一点小总结
2015-11-28 06:06:40 概念 都是CSS单位. px:像素 Pixel.像素 (计算机屏幕上的一个点) em:1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例如,如果 ...
- 【Seajs源码分析】2. 工具方法1
Sea.js: var seajs = global.seajs = { // The current version of Sea.js being used version: "@VER ...