在CSS属性中,字体和大小,子元素可以继承父元素,但颜色不能
CSS核心属性
一.CSS属性组成和作用
1.每个css样式都必须由两部分组成:选择符和声明。注:声明又包括属性和属性值;
2.css属性:属性是指定选择符具有的属性,它是css的核心,css2共有150多个属性;
3.css属性值:属性值包括发动属性值和常规的数值加单位或颜色(colorValue);如(25px)
二.CSS属性的类型
1.字体类属性;2.文本类属性;3.背景类属性;4.列表类属性;5.浮动属性;
三.CSS字体类属性
1.font-family:
字体类型; {font-family:字体1,字体2,字体3;}
例:font-famy:"微软雅黑","宋体";
说明:
- (1)浏览器首先会寻找字体1,如存在就使用该字体来显示内容,如在字体1不存在的情况下,则会寻找字体2,如字体2也不存在,按字体3显示内容,如果字体3也不存在;则按系统默认字体显示;
- (2)当字体是中文字体时,需加双引号;
- (3)当英文字体中有空格时,需加双引号如("Times New Roman") -新罗马字体;
- (4)当英文字体只有一个单词组成是不加双引号;如:(Arial) -Aarial字体是挺常用的,它和宋体的区别在于粗细,更接近国际制版。
- (5)Windows中文版本操作系统下,中文默认字体为宋体或者新宋体,英文字体默认为Arial,新推出的版本也默认为微软雅黑。
2.文本(字体)大小:{font-size:数值;}
例:div{font-size: 12px;}
说明:
- (1)属性值为数值型时,必须给属性值加单位,属性值为0时除外;
- (2)单位还可以是pt(磅),在印刷领域广泛使用9pt=12px;
- (3)为了减少系统间的字体显示差异,IE Netscape Mozilla的浏览器制作商于1999年召开会议,共同确认16px/ppi为标准字体大小默认值,即lem。默认情况下,lem=16px,0.75em=12px;注:ppi即每英寸所拥有的像素数目;
- (4)em:表示元素字体高度,em值是根据父元素值来确定;em单位可省略;如:font-size:12px;line-height:2;则行高为24px;
- (5)font-size属性中的绝对尺寸包括xx-small(最小)=9px、x-small(较小)=11px、small(小)=13px、medium(正常)=16px、large(大)=19px、x-large(较大)=13px、xx-large(最大)=27px等7个属性值。CSS中规定默认的字体尺寸为"medium",不过有的浏览器可能不会遵守这个规定。因此,实际的字体尺寸还要看浏览器的具体设置
3.文本(字体)颜色:{color:颜色值;}
例:div{color: red;}
说明:
- (1)用十六进制表示颜色值:例如: color:#FOO
- (2)RGB: color:rgb(0,204,204);
- (3)rgba(00,255,255,0.6) css3新增属性,rgb三原色,a表示透明度 color:rgba(0,204,204,0.6);
- (4)用颜色名表示:(16种)black 纯黑、silver 浅灰、navy 深蓝、blue 浅蓝、green 深绿、lime 浅绿、teal 靛青、aqua 天蓝、maroon 深红、red 红色、purple 深紫、fuchsia 品红、olive褐黄、yellow 明黄、gray 深灰、 white 亮白
4.加粗:
{font-wight:bolder/bold/normal/100-900;}
5.字体倾斜:
font-style:italic(倾斜度小)/oblique(倾斜度大)/normal(取消倾斜,常规显示)
6.检索或设置对象中的文本的大小写text-transform:none无转换/capitalize首字母大写/uppercase全都大写/lowercase全都小写。
7.文本是否大小写 {font-variant:normal(正常的字体)/small-caps(小型的大写字母字体)}
说明: 对英文内容器作用。
四.CSS文本属性
1.水平对齐方式 {text-align:left/right/center/justify;}
说明: justify对内容以两端边界线对齐显示,两端对齐对中文不起作用。
3.行高 {line-height:normal/数值;}
行高可以用来控制文字的上下行距。
4.文本修饰:
text-decoration:none/underline/overline/linethrough/blink.(高版本浏览器不支持blink属性)
说明: none:没有修饰、underline:添加下划线、overline:添加上划线、line-through:添加删除线、blink:闪烁
5.首行缩进: text-indent:数值;设置第一行的缩进值,负值是向前进(可以直接设置长度,或设置百分比)
说明:
- (1)text-indent可以取负值,可实现隐藏文本,悬挂缩进。
- (2)text-indent属性只对第一行起作用,若第一行不是文本则无变化。
6.字符间距 {letter-spacing:value;}控制英文字母、汉字的字距
说明:每个文字以及字母直接的间距
7.词间距 {word-spacing:normal/数值;}控制英文单词词距。(通常用于英文词和词之间的间距)
说明: 完整的单词之间的间隔,不是字母之间。
10.文本阴影 text-shadow
说明: 例子 text-shadow: 5px 5px 5px #FF0000;(分别表示: 水平偏移值,垂直偏移值,模糊的半径,阴影的颜色)
五、CSS列表类属性
1.定义列表符号样式: list-style-type: disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);
2.使用图片作为列表符号: list-style-image: url(所使用图片的路径和全称);
3.定义列表符号的位置: list-style-position:outside(外边)/inside(里边); list-style:none;去掉列表样式
4.边框属性
综合设置: border: 1px solid red;
说明:
边框:border:粗细(数值+单位) 颜色 线型(solid/dashed/dotted/double);
右边框:border-right
左边框:border-left
上边框:border-top
下边框:border-bottom
solid:实现,dashed:虚线,dotted:点状线,double:双线。
六、CSS背景类属性
1.背景颜色 语法: 选择符{background-color:颜色值;} 简写: background:color值
2.背景图片的设置 语法: background-image: url(背景图片的路径及全程);
说明:网页上有两种图片形式:插入图片、背景图;插入图片:属于网页内容,也就是结构。背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。
3.背景图片的显示原则
说明:
(1)容器尺寸等于图片尺寸,背景图片正好显示在容器中;
(2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;
(3)容器尺寸小于图片尺寸,只显示元素范围以内的背景图;
4.背景图片平铺属性 语法:选择符 {background-repeat:no-repeat/repeat/repeat-x/repeat-y}
说明: no-repeat:不平铺、repeat:平铺、repeat-x:横向平铺、repeat-y:纵向平铺。
6.背景图片的位置 语法:background-position:值1 值2; 选择符{background-position:left/center/right/数值 top/center/bottom/数值;}
说明：
(1)水平方向上的对齐方式(left/center/right)或值;垂直方向上的对齐方式(top/center/bottom)或值。
(2)两个值:第一个值表示水平位置的值,第二个值表示垂直的位置。
(3)当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
(4)向左方向,向上方向都是负值。
7.背景图片大小 background-size: 数值/百分比/auto/cover/contain
8.背景属性的缩写语法:background: 属性值1 属性值2 属性值3;
背景缩写:background:#背景色 url(背景图片的路径及全程) np-repeat center top;
9.网页上常用的图片格式(压缩图片)
- (1)jpg:有损压缩格式,靠损失图片本身的质量来减少图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰)
- (2)gif:有损压缩格式,靠损失图片的色彩数量来减少图片的体积,支持透明,支持动画，适用于颜色数量较少的图像。
- (3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的源文件格式,适用于颜色数量较少的图像。
七.CSS浮动属性
1.float:定义网页中其他文本如何环绕该元素,满足我们的页面排版要求。
有三个属性值: left:元素活动浮动在文本左面; right:元素浮动在右面; none:默认值,不浮动。
浮动元素的三大特征:
- (1)div块元素失去"块状"换行显示特征,变成行内块元素
- (2)紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示。
- (3)占据行内元素的空间,导致行内元素围绕显示。
负作用: 因为浮动元素脱离了 标准文档流,会导致父元素高无法被撑开。解决方法:清除浮动。
2.清除浮动的三种方法:
- (1)添加空盒子,较流行。
缺点是为清除浮动,页面添加的空盒子较多,会造成冗余代码,新手容易晕菜。
定义:在被浮动的元素(同级元素)后面添加一个空的div,并且定义一个类名,赋给空div。
语法: .clear{clear:both;} - (2)overflow:hidden;较简单,兼容市面上大部分浏览器。
缺点:做开发时,有些公司会严格要求开发技术点,不建议使用。
定义:先定义一个类名,然后把定义好的类名赋给浮动元素的父级元素。
语法: .clear{display:block;overflow:hidden;} - (3)最流行、最常用、可兼容所有浏览器。称为万能清除法。
非要说缺点就是代码量大。开发推荐使用。
定义: 定义一个类名,使用伪元素:after,并把类名赋给被浮动元素的父级元素。
语法: clear:after{display:block;clear:both;content:".";visibility:hidden;height:0;}
clear{zoom:1;}
作业
