CSS语法小记
一、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语法小记的更多相关文章
- CSS语法与用法小字典
前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...
- CSS学习小记
搜狗主页页面CSS学习小记 1.边框的处理 要形成上图所示的布局效果,即,点选后,导航下面的边框不显示而其他的边框形成平滑的形状.相对于把导航的下面边框取消然后用空白覆盖掉下面搜索栏的边框比较而言 ...
- CSS 语法
CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样 ...
- CSS语法基础
引言:CSS语法 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明. selector { property: value; property: value; ... property: ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- css语法和基本知识
1.CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 注:使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体 ...
- Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- html5--6-3 CSS语法2
html5--6-3 CSS语法2 实例 div包含p和h标签的时候可以,但是p标签包含h标签的时候不可以 学习要点 掌握引入外部样式表方法 插入样式的三种方法 内联样式表(行内) 内部样式表(st ...
随机推荐
- Python命令 (if __name__=="__main__":)
1. 语法 1.以#号开头的语句是注释 2.请务必注意,Python程序是大小写敏感的,如果写错了大小写,程序会报错. 3.按照约定俗成的管理,应该始终坚持使用4个空格的缩进. 4.当语句以冒号:结尾 ...
- xcode 插件
http://www.cocoachina.com/ios/20160122/15080.html https://github.com/rickytan/RTImageAssets http://m ...
- servlet过滤器实现维护项目
最近公司需要系统维护,提出要建一个维护系统,要求: 1.访问公司域名跳到系统首页 2.点击首页的任意按钮给出维护提示信息 3.用户访问之前收藏的任意系统链接跳转到首页 下面介绍下用过滤器实现上述需求 ...
- Linux上安装五笔
1.安装# yum install ibus-table-chinese-wubi-jidian 2.设置ibus平台,添加五笔输入法# ibus-setup 3.#gsettings set org ...
- ASP.NET、C#调用外部可执行exe文件--多种方案
一. try { //方法一 //调用自己的exe传递参数 //Process proc = new Process(); //proc.StartInfo.FileName = @"D:\ ...
- fontconfig编译出错
编译fontconfig编译时出错: 出错configure: error: You must have freetype installed; see http://www.freetype.org ...
- X.Org可能将失去它的域名x.org
X.Org基金会面临失去它的一个重要资产:单字母域名x.org.过去半年里,围绕着x.org域名的所有权问题,X.Org基金会董事会尝试私下解 决,但未能如愿.域名将于1月19日过期,只剩下不到两周的 ...
- 读书笔记-JVM
局部变量表(虚拟机栈中的一部分)在编译期完成分配,运行期不会再改变大小: 每个方法对应一个栈帧(存储局部变量表.操作数栈.动态链接.方法出口等),栈帧被存储到虚拟机栈中,每个线程对应一个虚拟机栈,方法 ...
- 搭建高可用mongodb集群(四)—— 分片
按照上一节中<搭建高可用mongodb集群(三)-- 深入副本集>搭建后还有两个问题没有解决: 从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的 ...
- dp水题 序列问题 (9道)
9道题.A了8道,A题看题解也没弄懂怎么维护m段子序列的,过一段时间再回来看看 dp试水 47:56:23 125:00:00 Overview Problem Status Rank ( ...