CSS注释:以/*开头 以*/结束 eg :/* 这是CSS注释 */
1.字体属性:
--- font-family:字体类型(行书还是楷书或是其他字体类型)eg:body {font-family:"楷体";}
--- font-size:字体大小。
取值范围:xx-small:绝对字体尺寸,最小
x-small:绝对字体大小,较小
small:小
medium:绝对字体默认值,正常默认值
large:大
x-large:较大
xx-large:最大
lager:相对字体尺寸,相对于父对象中字体尺寸进行相对增大。
smaller:。。。相对减小
像素值和百分比:像素值是最常用的,
百分比的取值是基于父对象中的字体的尺寸。用父对象字体尺寸乘以自对象中的字体百分比,得到自对象的字体大小。
eg:body {font-size:30px;} 或者:body {font-size:50%; }
--- font-style:字体风格(斜体。。。)
取值:
italic:斜体子。
oblique:中间状态,同样是斜体字。
normal:普通字体,没有任何风格(默认值)
--- font-weight:字体加粗
取值:100、200、300、400、500、600、700,800,900
bold:加粗,粗细程度等于700的粗细程度。bold = 700
normal:正常字体,不加粗 等于400
bolder:很粗的,等于900
lighter:细的,相当于100
--- font-variant:将小写的英文字母转化为大写
取值:normal:默认值,表示正常显示,原来是什么样,现在还是什么样。
small-caps:将小写的英文字母转换为大写字母,且字体较小。
--- font:复合属性
可以取值:字体族科(字体类型),字体大小,字体风格,字体加粗,每个值之间用空格隔开
复合属性取值有顺序,
分别是:字体风格 字体粗细 字体大小 字体类型,
eg: div {font:italic bold 50px "宋体";}
如果同时设置这四个样式的话,必须按照这个顺序写,这四个样式才能全部生效。
font-variant这是属性没有整合到font复合属性中,只能单独写。
2.颜色和背景属性:
--- color:用来设置指定元素的文本颜色。颜色值是一个颜色的英文单词或者是一个十六进制的颜色值。
--- background-color:背景颜色。用来设置指定元素的背景的颜色。值也是一个颜色值。
--- background-image:背景图片。用来设置指定元素的背景的图片。值是一张图片的路径。
注意:在使用背景图片时:background-image的值是:url(图片路径),url() 不能少,图片路径放在小括号里面。当背景图片和背景颜色同时设置时,背景图片会覆盖在背景颜色上,就会看不到背景颜色。
eg:body {background-image:url(images/img.jpg); }
--- background-repeat:背景重复(平铺)
取值:no-repeat:背景图片不重复(不平铺)
repeat:默认值,背景图片重复(平铺)
repeat-x:背景图片向X轴方向(水平)重复(平铺)
repeat-y:背景图片向Y轴方向(垂直)重复(平铺)
--- background-position:背景的位置。
--- background:是背景的一复合属性,整合了背景颜色,背景图片,背景重复,背景位置这四个属性。
eg: body {
background:green url(bj1.jpg) no-repeat Top center;
}
写法:多个值之间用空格隔开,
--- 与font的区别:background与font同是复合属性,与font不同的是,background的四个值没有顺序,哪个放前面哪个放后面都一样,但是font的属性必须要有顺序才能看到效果。
3.段落属性:
--- word-spacing:单词间隔。(网页中每相邻的两个用空隔开的英文单词或者是中文之间的距离。)
取值:像素值。可以使用负数。
--- letter-spacing:字符间隔,就是网页中相邻两个字符间的距离。
取值:像素值
--- text-decoration:文本修饰,用来控制一段文字的下划线、上划线、删除线。。。
取值:underline:下划线
overline:上划线
none:这是默认值,没有任何修饰,常用来去除超链接的下划线。
line-through:删除线。
--- vertical-align:垂直对其方式
取值:baseline:浏览器默认的垂直对齐方式;
sub:文字的下标。 常用来写化学方程式。
super:文字的上标。常用来写数学表达式。
top:垂直靠上对齐。
text-top:是元素和上级元素的字体向上对齐。
middle:垂直居中对齐,常用来设置图片与文字的垂直对齐方式。
text-bottom:使元素和上级元素的字体向下对齐。
--- text-transform:文本转换,英文单词大小写之间的转换。
取值:none:默认值,不转换。
capitalize:使用每个单词的第一个字母大写。
uppercase:每个单词的所有字母都大写。
lowercase:每个单词的所有字母小写。
--- text-align:水平对齐方式。
取值:left:左对齐。
right:右对齐。
center:水平居中对齐。
justify:两端对齐(一段文字没有占满一整行,使用了justify的话,就可以占满这行。)、部分浏览器不支持该属性。
--- text-indent:文本首行缩进。
取值:像素值,还可以是其它的长度单位(cm,em . . .)。
(em:一个长度单位,1em 等于 12px左右, 2em 约等于两个正常大小的汉字的宽度。)
--- line-height:文本行高,相邻两行之间的间隔、默认是这行文字有多高,这行的行高就是多高。
是本行上面的空白 + 文字本身的高度 = 行高
取值:同上↑。
--- white-space:处理空白
取值: normal:默认值。
pre:会将源代码中的空格保留,
nowrap:强制在同一行显示文本、直到遇到<br/>或者文本结束。
--- unicode-bidi、direction:文本反排 (开发用不到,了解即可。)
unicode-bidi配合direction一起使用,来设置对象的阅读顺序。
unicode-bid:
取值: bidi-override:表示严格按照direction属性的值重排
normal:默认值。
embed:表示对象打开附加的嵌入层,direction属性的值指定嵌入层,在对象内部进行隐式重排序。
direction:
取值: ltr:表示从左到右的顺序阅读
rtl:从右到左的顺序阅读。
inherit:表示文本流的值不可继承。
4.外边距与内边距属性:
:外边距(margin)
--- margin-top:上边距,用来设置元素的上边界(与其它盒子的距离)。
--- margin-bottom:下边距。
--- margin-left:左边距。
--- margin-right:右边距。
--- margin:是综合了以上四个属性,可以同时设置四个方向的外边距。
取值:都是一个长度值或者百分比。
margin的取值可以是一个、两个、三个、四个、多个值之间用空格隔开:
一个值:表示的方向是上下左右四个方向。
margin:10px;
两个值:第一个值表示上下两个方向的边距,第二个值表示左右两个方向。
margin:10px 20px;
三个值:第一个值表示上方向,第二个值表示左右方向,第三个值表示下方向。
margin:10px 20px 30px;
四个值:分别表示上、右、下、左方向的边距。
margin:10px 20px 10px 20px;
:内边距(padding),用法与外边距一样
--- padding-top:上内边距。
--- padding-bottom:下内边距。
--- padding-left:左内边距。
--- padding-right:右内边距。
--- padding:综合以上四个属性。
取值:都是长度值或百分比。
padding:的取值与margin一样,可以是多个,padding的多个值对应的方向与margin的多个值对应的方向相同。
5.边框属性(border):
--- 边框样式:
border-style:用来设置四个方向的边框
border-bottom-style:设置下边框样式
border-top-style:设置上边框样式
border-left-style:设置做边框样式
border-right-style:设置右边框样式
取值:
none:默认值,没有边框。
dotted:点线边框。
dashed:虚线边框。
solid:实线边框。
double:双实线边框。
groove:边框具有立体感的沟槽。
ridge:边框呈脊形。
inset:使整个边框凹陷,及在一个变宽嵌入一个立体边框。
outset:使整个边框凸陷,及在一个变宽嵌入一个立体边框。
--- 边框宽度:
border-width:用来设置四个方向的边框宽度。
border-top-width:上边框宽度。
border-bottom-width:下边框宽度。
border-left-width:左边框宽度。
border-right-width:右边框宽度。
取值:一个长度值,或者百分比。
--- 边框颜色:
border-color:用来设置四个方向的边框颜色。
border-top-color:上边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border-right-color:右边框颜色
取值:是一个颜色对应英文单词或者是一个表示颜色的十六进制颜色值。
--- border-top:上边框样式
--- border-bottom:下边框样式
--- border-left:左边框样式
--- border-right:右边框样式
--- border:是所有边框样式的复合属性,用来设置四个方向的边框样式。
以上五个属性由边框样式,宽度,颜色综合。
取值:有三个值,综合了样式,宽度,颜色三个属性
比如:border-top:1px solid red;这个属性表示上边框是一个宽度为1px,颜色为red(红色)的实线。
这三个值分别用空格隔开,没有顺序,样式属性值(如solid等)必不可少,否则将无法正确显示边框。