目录
一、CSS属性组成和作用
二、CSS字体类属性
三、CSS文本类属性
四、CSS列表类属性
五、CSS背景属性
六、CSS浮动属性
一、CSS属性组成和作用
1.1 每个CSS样式都必须有两部分组成:选择符和声明
注:声明又包括属性和属性值
1.2 CSS属性:属性爽死指定选择符具有的属性,他是css的核心,css2共有150多个属性
1.3 css属性值:属性值包括法定属性值和常规数值加单位或颜色值
二、CSS字体类属性
2.1 字体类型
2.1.1 语法
{font-family:字体1 字体2 字体3;}
例如:font-family:"微软雅黑","宋体";
2.1.2 说明
浏览器首先会寻找字体1、如存在就使用改字体来显示内容,
会按1、2、3依次往下;如果都不存在,则按系统默认字体显示;
当字体是中文字体时,需要加双引号;
当英文字体时,需加双引号(“times new roman”)
当英文字体只有一个单词组成是不加双引号;如(arial)
windows中文版本操作系统下,中文默认字体为宋体或者新宋体,
英文字体默认为arial,新推出的版本也默认为微软雅黑
2.2 文本大小
2.2.1 语法
{font-size:数值;}
例 div{font-size:12px;}
2.2.2 说明
属性值为数值型时,必须给属性值加单位,属性值为0时除外
单位还可以是pt,在印刷区域广泛使用9pt=12px
默认情况下,1em=16px,0.75em=12px
em表示元素字体高度,em值是根据父元素值来确定,em单位可省略
如:font-size:12px;line-height:2;则行高为24px
2.2.3 拓展
xx-small=9px;x-small=11px;small=13px;medium=16px;
large=19px;x-large=23px;xx-large=27px
2.3 文本颜色
2.3.1 语法
{color:颜色值;}
例如:div{color:red;}
2.3.2 说明
用十六进制表示颜色值,例如:color:#f00
用rbg表示,color:rbg(value,value,value)
三原色三组数字相同时,可以缩写为三位
rgba(value,value,value,value)css3新增属性,rgb三原色,a表示透明度
2.4 加粗
2.4.1 语法
{font-weight:bolder/bold/normal/100-900}
2.4.2 说明
bolder(更粗的)/bold(加粗)/normal(常规)
css规范中,把字体的粗细分为9个等级,分别为100-900,900对应最重的字体变形,
一般500常规字体,600-900加粗字体
2.5 倾斜
2.5.1 语法
{font-style:italic(倾斜度小)/oblique(倾斜度大)/normal(常规显示)}
2.5.2 说明
italic和oblique都表示倾斜,不过oblique的幅度要大一点,但一般浏览器不明显
2.6 是否大小写
2.6.1 语法
{font-variant:normal(正常字体)/small-caps(小型大写字母)}
2.6.2 说明
对英文内容起作用
2.7 复合式写法
2.7.1 语法
font:style variant weight size family;
总体设置字体,按以上顺序,style和weight可以互换位置,size和family不可和其他属性位置互换
如:font:normal normal bold 24px "黑体"
2.7.2 说明
这种简写发只有在同时指定font-size和font-family属性时才起作用。
2.8 文字属性简写
2.8.1 语法
{font:12px/1.5em "宋体";}
font-size/line-height/font-family;
2.8.2 说明
简写时,font-size和line-height只能通过斜杠组成一个值,不能分开写
三、CSS文本类属性
3.1 水平对齐方式
3.1.1 语法
{text-align:left right center justify}
3.1.2 说明
left 左 right 右 center 居中 justify两端
3.2 垂直对齐方式
3.2.1 语法
{vertical-align:top middle bottom}
3.2.2 说明
top 上 middle 中 bottom 下
3.3 行高
3.3.1 语法
{line-height:normal/数值;}
3.3.2 说明
当单行文本的行高等于容器时,可实现在容器中垂直居中对齐
当单行文本的行高小于容器时,可实现在容器中中间以上的任意位置的定位
当单行文本的行高大于容器时,可实现在容器中垂直中间以下任意位置的定位
3.4 文本修饰
3.4.1 语法
{text-decoration:none/underline/overline/line-through/blink}
3.4.2 说明
none(没有修饰)underline(下划线)overline(上划线)
line-through(删除线)blink(闪烁)
3.5 首行缩进
3.5.1 语法
{text-indent:数值;}
3.5.2 说明
text-indent可以取负值,可实现隐藏文本,悬挂缩进
text-indent属性只对第一行起作用,若第一行不是文本则没变化
3.6 字符间距
3.6.1 语法
{letter-spaing:value;}
3.6.2 说明
控制英文字母和汉字的字距
每个文字以及字母之间的间隔
3.7 词间距
3.7.1 语法
{word-spacing:normal/数值;}
3.7.2 说明
控制英文单词词距 通用于英文词和词之间的间距
完整的单词之间的间隔,不是字母之间
3.8 文本流控制
3.8.1 语法
{layout-flow:horizontal/vertical-ideographic;}只支持IE浏览器
3.8.2 说明
horizontal 自左向右
vertical-ideographic 自上而下,自右向左
3.9 控制文本大小写
3.9.1 语法
{text-transform:none(默认值)/capitalize(每个单词首字母大写)
/uppercase(都为大写字母)/lowercase(都为小写字母)}
3.10 文本阴影
3.10.1 语法
{text-shadow:value,value,value,#f00;}
3.10.2 说明
依次为 水平偏移值 垂直偏移值 模糊的半径 阴影的颜色
四、CSS列表类属性
4.1 定义列表符号样式
4.1.1 语法
{list-style-type:disc(实心圆)/circle(空心圆)/square(方块)/
none(去掉符号)}
4.2 使用图片作为列表符号
4.2.1 语法
{list-style-image:url(路径)}
4.3 定义列表符号的位置
4.3.1 语法
{list-style-position:outside(外边)/inside(里边)}
4.3.2 说明
去掉列表样式 list-style-type:none
4.4 边框
4.4.1 语法
{border:粗细(数值+单位)颜色 线型(solid/dashed/dotted/double);}
4.4.2 说明
solid 实线 dashed 虚线 dotted 点状线 double 双线
五、CSS背景属性
5.1 背景颜色
5.1.1 语法
选择符{background-color:颜色值;}
简写:background:color值;
5.2 背景图片的设置
5.2.1 语法
{background-images:url(路径);}
5.2.2 说明
网页上有两种图片形式 插入图片、背景图
插入图片属于网页内容,也就是结构
背景图属于网页的表现,背景图上可以显示文字、插入图片、表格等
5.3 背景图片的显示规则
容器尺寸等于图片尺寸,背景图片正好显示在容器中
容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素
容器尺寸小于图片尺寸,只显示元素范围以内的背景图
5.4 背景图片平铺属性
5.4.1 语法
选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y}
5.4.2 说明
no-repeat 不平铺 repeat 平铺 repeat-x 横向平铺 repeat-y 纵向平铺
5.5 背景图片的位置
5.5.1 语法
{background-position:值1 值2;}
{background-position:left/center/right/数值/top/bottom;}
5.5.2 说明
水平方向上对齐方式(left/center/right)
垂直方向上对齐方式(top/center/bottom)
5.6 背景图片缩写
5.6.1 语法
{background:属性值1 属性值2 属性值3;}
5.6.2 说明
background:#背景色 url(路径) no-repeat 水平位置 垂直位置
5.7 背景图的固定
5.7.1 语法
选择符{background-attachment:scroll(滚动)/fixed(固定);}
5.7.2 说明
fixed 固定,不随内容一块滚动
scroll 随内容一块滚动
5.8 背景大小
5.8.1 语法
{background-size:数值/百分比/auto/cover/contain;}
5.8.2 说明
第一个值设置宽度 第二个至设置高度
5.8.3 兼容IE的方法
background-image:url('file:///F:/test/images/flashbg.jpg');
background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',sizingMethod='scale');
六、CSS浮动属性
6.1 浮动含义
float定义网页中其他文本如何环绕该元素
6.2 float
6.2.1 属性值
left元素活动浮动在文本左面
right 元素浮动在右面
none 默认值,不浮动
6.2.2 特点
默认的常规文档流:页面内容从上到下,从左到右排列。div块换行显示
6.2.3 浮动的三大显示特征
div块元素失去“块状”换行现实特征,变为行内元素
紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示
占据行内元素的空间,导致行内元素围绕显示
6.3 clear
6.3.1 含义
规定元素的哪一侧不允许其他浮动元素
6.3.2 属性值
none 默认值。允许浮动元素出现在两侧
both 在左右两侧均不允许浮动元素
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
6.4 解决高度塌陷
6.4.1 方法一
给父元素添加一个声明overflow:hidden
6.4.2 方法二
在浮动元素下方添加空div,并给该div添加声明
clear:both;height:0;overflow:hidden(或font-size:0)