一、CSS语法结构

  语法:选择符{属性:值} 例如:body{font-size:12px;}

  参数说明:

    1.选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,例如h1,img;也可以是定义了特定的id或者class的标签,如:#main表示用                       id="main"修饰的标签,.footer表示用class="footer"修饰的标签等。

    2.属性(property):选择符的样式属性,如颜色、大写、定位、浮动方式等。

    3.值(value):是指属性的值。

    4.同时可以为一个选择符定义多个属性,属性之间用分号";"隔开。

    5.尽量使用通用属性,不使用存在兼容性差别的属性。

二、CSS长度单位

  单位 说明
相对长度单位 em 相对于当前对象内文本的字体尺寸
px 像素(Pixel)推荐使用
绝对长度单位(基本上用不到) in 英寸
cm 厘米
mm 毫米
pt 点(point)

三、CSS颜色

颜色单位 说明
十六进制 如:color:#ffffff;
颜色名称 如:color:Red;
三原色单位 如:rgb(255,0,0);

  注意:颜色一般常用的是十六进制,三原色的原理:【红(r)、绿(g)、蓝(b)】混合而成,每个值域在0-255之间。

四、CSS控制字体

功能 语法
设置字号 font-size:12px;
设置字体 font-family:Arial,'宋体';
设置字色 color:#fff;
设置行高 line-height:50px;
设置字体粗细 font-weight:normal(正常) bolder(粗体)
设置字体样式 font-style:normal[正常]、italic[斜体];
修饰文字 text-decoration:none[正常]、underline[下划线]、overline[上划线]、line-through[删除线]
字符间距 letter-spacing:normal[正常]、length[长度单位]
单词间距 word-spacing:normal[正常]、length[长度单位]
文本缩进 text-index:2em 可以为负值
水平对齐方式 text-align:left/center/right
垂直对齐方式 vertical-align:sub[下标]、super[上标]、top[同行最高元素顶部对齐]、middle[同行元素中部对齐]、bottom[同行最低元素底端对齐]
空白处理 white-space:normal[自动换行]、pre[换行和空白受保护]、nowrap[强制在同一行显示]
大小写控制 text-transform:none[正常大小]、capitalize[首字母转大写]、uppercase[转换成大写]、lowercase[转换成小写]

  注意:

    1.字体的属性最好使用引号引起来,而且在设置字体时可以设置多个样式而且样式之间用逗号隔开,前者设置英文字体,后者设置汉文字体。

    2.想要文字在在垂直方向上居中:将行高设置为元素高度(行高=元素高度)(前提:文字的内容不能超过元素的宽度,也就是不能换行)。

CSS语法小记的更多相关文章

  1. CSS语法与用法小字典

    前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...

  2. CSS学习小记

    搜狗主页页面CSS学习小记 1.边框的处理   要形成上图所示的布局效果,即,点选后,导航下面的边框不显示而其他的边框形成平滑的形状.相对于把导航的下面边框取消然后用空白覆盖掉下面搜索栏的边框比较而言 ...

  3. CSS 语法

    CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样 ...

  4. CSS语法基础

    引言:CSS语法 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明. selector { property: value; property: value; ... property: ...

  5. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. css语法和基本知识

    1.CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 注:使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体 ...

  8. Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  9. html5--6-3 CSS语法2

    html5--6-3 CSS语法2 实例 div包含p和h标签的时候可以,但是p标签包含h标签的时候不可以  学习要点 掌握引入外部样式表方法 插入样式的三种方法 内联样式表(行内) 内部样式表(st ...

随机推荐

  1. MMTx使用说明

    MMTx(MetaMap Transfer)是美国国家医学图书馆建立的用于文本数据挖掘的一种工具. 下面以Medine格式数据为例介绍使用方法 1.在PubMed数据库检索相关的文献. 2.将数据结果 ...

  2. 使用Carthage安装第三方Swift库

    http://blog.crazyphper.com/?p=3661 carthage update

  3. tomcat中配置jmx监控

    1.在tomcat的start.bat中添加下面代码, -Dcom.sun.management.jmxremote.ssl=false -Dcom.sun.management.jmxremote. ...

  4. Android 创建内容提供器(ContentResolver)

    如果想实现跨程序共享数据的功能,官方推荐的方式就是使用内容提供器,可以通过新建一个类去继承 ContentResolver 的方式来创建一个自己的内容提供器. ContentProvider 类中有六 ...

  5. qt-5.6.0 移植之qt源码编译

    其实这只是给自己看的一个configure选项笔记,没有太多的东西. 首先: 下载qt5.6的源码: 地址: http://download.qt.io/archive/qt/5.6/ 下载完解压: ...

  6. PHP 文件下载流程

    前台HTML: 添加download属性,不打开download.php页面 <a style='color:blue' href='download.php' download='data/C ...

  7. 3.3---集合栈(CC150)

    思路:注意一下别写错add还是remove public class SetOfStacks { public static ArrayList<ArrayList<Integer> ...

  8. dtw算法

                              dtw路径与线性变换路径对比 转自:http://baike.baidu.com/link?url=z4gFUEplOyqpgboea6My0mZP ...

  9. phpcms二层栏目下拉和当前栏目高亮

    这里需要嵌套loop标签,既双层循环 第一层loop的catid = 0代表顶级栏目 第二层loop的catid = "$r[catid]"代表上层循环的栏目id <ul c ...

  10. Python 列表元素排重uniq

    # -*- coding: gbk -*- def uniq(ls): lsCopy=[e for e in ls] for i in xrange(1,len(ls)): for j in xran ...