CSS基本语法
css:层叠样式表 (Cascading Style Sheets)
引入css方式
行内样式
直接使用标记的style属性
style=" width:100px; height:100px; background-color:#F00;”
内嵌样式
在HTML中,使用<style></style>标记,将样式写在<style>标记内
注意:<style>标记要指定type属性为text/css
链接样式(外链式)
将CSS写入单独的一个文件中,注意该文件的文件扩展名为 .css
在HTML文档中使用<link>标记引入css文件
<link>标记需要指定两个属性:type和rel(relationship)
例:<link type="text/css" rel="stylesheet" href=“sy.css" />
使用导入样式
使用@import指令可以将css文件中的css样式导入到不同的地方
导入式的结果和直接书写是同样的效果
导入式可以共享样式代码
可以在内嵌式里使用导入,也可在css文件中使用
导入样式的使用方法
@import url(“sheet1.css”);
@import “sheet1.css”;
多种方式引入CSS时,作用的优先级
基本原则:“最晚,优先级最高”
一般优先顺序是:行内,内嵌,链接
基本语法:选择器{属性:属性值;}
基本选择器
CSS修饰html标签的基础就是选择符,即可以通过多种选择符来选择要修饰的html标签
html中引入CSS的方法
通配选择器
即所有的标签
语法:*{规则}
例:*{font-family:"宋体";}
类型(标记)选择器
即使用标签的名字作为选择符
语法:标签{规则}
例:td{color:#F00;}
ID选择器
每个html标签的id都是不一样的
语法:#id{规则}
类(class)选择器
语法:.className{规则}
注意:也可以在前面添加标签名字,如div.className(之间无空格,和包含选择符区分开)
可以为标签指定多个class值,多个值之间用空格隔开
例:<div class="dv top">
包含选择器 后代选择器
通过标签的嵌套选择标签,只要包含就行
语法:选择符a 选择符b {规则}
选择符之间用空格隔开,即选择符a标签内的所有选择符b标签
CSS中长度单位的定义
px和em
px,像素
根据显示器分辨率的不同,像素的大小也是不同的
em,以当前字符的高度为基准
如果当前字体的高度为12px,那么1em就是12px
注意:一般以font-size为准,如果没有定义font-size,则以浏览器默认大小(16px)为准
cm/mm/pt/pc
主要用在非显示器输出上,如打印
如果网页在显示器上显示,则这些单位将转换为一定的像素显示,即长度也是依靠显示器分辨率的
CSS中颜色的定义
网页中颜色采用RGB模式显示(显示器)
RGB颜色在CSS中的表达方式
直接使用颜色的英文单词,如red
注意:很多浏览器不支持颜色的单词表示
使用三色的数值,如rgb(120,222,100)
注意:数值在0~255之间
使用三色的百分比,如rgb(10%,20%,100%)
red rgb(255,0,0) blue rgb(0,0,255) black rgb(0,0,0)
green rgb(0,255,0) white rgb(255,255,255)
使用三色数值的十六进制,如#0000ff
注意:推荐使用这种方式,十六进制值前加#
CSS中和字体格式有关的属性
font-family
指定字体
可以为文字指定多个字体,不同字体间用“,”隔开
字体名字中间有空格的,要用双引号引起来
font-size
字体大小
多用px/em单位
font-style
字体倾斜效果
normal不倾斜、oblique和italic倾斜
Italic是使用文字的斜体,Oblique是让没有斜体属性的文字倾斜!
font-weight
字体粗细
大多浏览器可以实现:正常和加粗效果
normal 正常粗细
bold 粗体
bolder 加粗体
lighter 比正常粗体细
100~900 共9个层次,数字越大,字体越粗
text-transform
英文字母大小写转换
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写
text-decoration
文本的装饰效果
underline 文字加下划线
line-through 文字加删除线
overline 文字加上划线
text-indent
段落内容首行缩进(悬挂缩进)
字词间距
英文文本
letter-spacing 字母和字母间距 : normal / 数值
word-spacing 单词和单词间距
中文文本
letter-spacing 字和字之间的间距
overflow:visible(默认)/hidden(超出部分隐藏)/scroll(出现滚动条)/auto(浏览器自动处理)
内容溢出处理
text-overflow:clip(不显示省略标记,简单裁切) | ellipsis (文本溢出显示省略标记)文本溢出处理
white-space: normal / pre(空白被保留)/nowrap(不换行)/....
元素空白的处理
line-height
段落内部的行高
注意:文字在每一行自动上下居中
text-align
文本的水平位置
left,左对齐(默认值)
right,右对齐
center,居中对齐
justify,两端对齐
justify对于主要用于英文
只能对多行中的非最后一行进行两端对齐
vertical-align:baseline/top/text-top/middle/bottom/.. 垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。