CSS语法小记

简介: 一、CSS语法结构   语法:选择符{属性:值} 例如:body{font-size:12px;}   参数说明:     1.选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,例如h1,img;也可以是定义了特定的id或者class的标签,如:#main表示用                       id="main"修饰的标签,.footer表示用class="footer"修饰的标签等。

一、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.想要文字在在垂直方向上居中:将行高设置为元素高度(行高=元素高度)(前提:文字的内容不能超过元素的宽度,也就是不能换行)。

 

相关文章
|
1月前
|
XML 前端开发 数据格式
css语法
【2月更文挑战第26天】css语法
17 6
N..
|
25天前
|
前端开发
CSS定义的基本语法
CSS定义的基本语法
N..
8 1
|
2月前
|
前端开发
css3基础语法与盒模型
css3基础语法与盒模型
16 0
|
3月前
|
前端开发 编译器 Python
拥抱简洁:探索Stylus的简洁语法与CSS预处理器之美
拥抱简洁:探索Stylus的简洁语法与CSS预处理器之美
|
3月前
|
Web App开发 前端开发 JavaScript
CSS 原生嵌套语法来了!
CSS 原生嵌套语法来了!
|
6月前
|
JavaScript 前端开发 网络协议
HTML基础标签 && CSS选择器 && JavaScript基础语法 && WebAPI_ && 页面设计 && HTTP协议
HTML基础标签 && CSS选择器 && JavaScript基础语法 && WebAPI_ && 页面设计 && HTTP协议
36 0
|
7月前
|
前端开发
day03_CSS的基础语法及页面的引用
day03_CSS的基础语法及页面的引用
|
8月前
|
前端开发
CSS渐进增强写法语法
CSS渐进增强写法语法
|
8月前
|
前端开发 开发者
将近20年,CSS终于在所有现代浏览器实现了原生嵌套语法!!!-3
使用&进行精确控制和灵活性 假设您想要选择.demo元素,并使用:not()选择器。这时就需要使用&:
125 0
|
8月前
|
前端开发
将近20年,CSS终于在所有现代浏览器实现了原生嵌套语法!!!
选择任何三角形和正方形 这个任务需要选择多个嵌套元素,也称为组选择器。 不使用嵌套,现在的CSS有两种方式:
67 0