css⽂字向右对齐_好程序员web前端分享CSS属性组成及作⽤好程序员web前端分享CSS属性组成及作⽤
css设置文字垂直居中学习⽬标
· 1、css属性和属性值的定义
·
2、css⽂本属性
· 3、css列表属性
· 4、css背景属性
· 5、css边框属性
· 6、css浮动属性
⼀、css属性和属性值的定义
属性：属性是指定选择符所具有的属性，它是css的核⼼，css2共有150多个属性
属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜⾊值等。
⼆、CSS⽂本属性
1、⽂本⼤⼩：{font-size:12px;}单位还可以是em，是⽗级元素的font-size的倍数；/系统默认的字号⼤⼩为16px
说明：
1) 属性值为数值型时，必须给属性值加单位，属性值为0时除外。
2)单位还可以是pt，9pt=12px;
3)为了减⼩系统间的字体显⽰差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体⼤⼩默认值，即1em.默认情况下，1em=16px,0.75em=12px; rem
2、⽂本字体：{font-family：字体1，字体2，字体3；}
说明：
浏览器⾸先会寻字体1、如存在就使⽤改字体来显⽰内容，如在字体1不存在的情况下，则会寻字体2，如字体2也不存在，按字体3显⽰内容，如果字体3 也不存在；则按系统默认字体显⽰；
当字体是中⽂字体时，需加双引号；
当英⽂字体由多个单词组成时，需加双引号如(“Times New Roman”)
当英⽂字体只有⼀个单词组成是不加双引号；如：(Arial)；
Windows中⽂版本操作系统下，中⽂默认字体为宋体或者新宋体，英⽂字体默认为Arial.
3、⽂本颜⾊：{color：颜⾊值;}red/#f00/rgb(255,0,0)
说明：
⽤⼗六进制(是计算机中数据的⼀种表⽰⽅法)表⽰颜⾊值：
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F
颜⾊模式：光⾊模式
R G B
FF 00 00
颜⾊值的缩写：
当表⽰三原⾊的三组数字同时相同时，可以缩写为三位;
当⽤⼗六进制表⽰颜⾊值时，需要在颜⾊值前加“#”
# fa 00 00
RGB表⽰⽅式：color:rgb(255,0,0);
4、⽂字加粗font-weight:bolder(更粗的)/bold(加粗)/normal(常规)/100—900;
说明：
在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，⽽900对应最重的字体变形，
5、⽂本倾斜：font-style：italic/oblique/normal(取消倾斜，常规显⽰);
说明：
italic和oblique都是倾斜的⽂字, 但区别在于Italic是指斜体字，⽽Oblique是倾斜的⽂字，对于没有斜体的字体应该使⽤Oblique属性值来实现倾斜的⽂字效果.
6、⽔平对齐⽅式{text-align:left左/right右/center居中/justify两端对齐(在部分浏览器中，对于中⽂不起作⽤);} 只针对⽂本或图⽚
7、垂直对齐⽅式 {vertical-align:top上/bottom下/middle居中/baseline基线(某些特定的元素类型起作⽤);}
8、⽂字⾏⾼ {line-height:normal/value;}line-height:20px; line-height:2em; (当⾏⾼的单位省略时，默认为em)
说明：
当单⾏⽂本的⾏⾼等于容器⾼时，可实现单⾏⽂本在容器中垂直⽅向居中对齐；
当单⾏⽂本的⾏⾼⼩于容器⾼时，可实现单⾏⽂本在容器中垂直中齐以上；
当单⾏⽂本的⾏⾼⼤于容器⾼时，可实现单⾏⽂本在容器中垂直中齐以下(IE6及以下版本存在浏览器兼容问题)
o
o
o 9、⽂本修饰 text-decoration:none/underline/overline/line-through
说明：
none：没有修饰
underline：添加下划线
overline：添加上划线
line-through：添加删除线
o
o 10、⾸⾏缩进：{text-indent:value;}
说明：
1)text-indent可以取负值；
2)text-indent属性只对第⼀⾏起作⽤。
o 11、检索英⽂字母⼤⼩写{text-transform:none⽆转换/capitalize⾸字母⼤写/uppercase全都⼤写/lowercase全都⼩写;}。
o 12、字间距{letter-spacing:value;}控制英⽂字母或汉字的字距。
o 13、词间距{word-spacing:value;}控制英⽂单词词距。
o
o
o 扩展：14、⽂本流控制{layout-flow:horizontal/vertical-ideographic;}
说明：
1)horizontal:⾃左向右
2)vertical-ideographic:⾃上⽽下
o 15、⽂字属性简写：font:bolder italic 12px/1.5em "宋体"; 简写时，字体和字号是必备font属性的简写：字号，⾏⾼，字体 说明:font 的属性值应按以下次序书写(各个属性之间⽤空格隔开) 顺序: font-style font-weight font-size / line-height font-family
o (1)简写时 , font-size和line-height只能通过斜杠/组成⼀个值，不能分开写。
o (2) 这种简写法只有在同时指定font-size和font-family属性时才⼀起作⽤，如果你没有设定font-weight , font-style , 他们会使⽤缺省值。
三、CSS列表属性
o 1、定义列表符号样式
list-style-type：disc(实⼼圆)/circle(空⼼圆)/square(实⼼⽅块)/none(去掉列表符号)；
o 2、使⽤图⽚作为列表符号
list-style-image：url(所使⽤图⽚的路径及全称)；
o 3、定义列表符号的位置
list-style-position:outside(外边)/inside(⾥边)；
list-style:none；去掉列表符号
四、边框的属性和属性值
border：边框宽度 边框风格 边框颜⾊;
例如：border:5px solid #ff0000
边框宽度：border-width:
边框颜⾊：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)none(去掉边框);
可单独设置⼀⽅向边框，
border-bottom：边框宽度 边框风格 边框颜⾊; 底边框
border-left：边框宽度 边框风格 边框颜⾊; 左边框
border-right：边框宽度 边框风格 边框颜⾊; 右边框
border-top：边框宽度 边框风格 边框颜⾊; 上边框
五、CSS背景属性
1、背景颜⾊ {background-color：颜⾊值;}
2、背景图⽚的设置 background-image：url(背景图⽚的路径及全称)；
3、背景图⽚平铺属{background-repeat:no-repeat不平铺/repeat平铺/repeat-x X轴平铺/repeat-y Y轴平铺 }
4、背景图的位置{background-position:left/center/right/数值 top/center/bottom/数值;}
⽔平⽅向上的对齐⽅式(left/center/right)或值
垂直⽅向上的对齐⽅式(top/center/bottom)或值
background-position：值1 值2;
两个值 ：第⼀个值表⽰⽔平位置的值，第⼆个值：表⽰垂直的位置。
当两个值都是center的时候写⼀个值就可以代表的是⽔平位置和垂直位置 ；
当元素⼩背景图⼤的时候，想显⽰右下⽅的背景图，通过负值来调整背景图的位置；
5、背景图的固定{background-attachment:fixed固定/scroll滚动;}
fixed 固定，不随内容⼀块滚动，根据可视窗⼝固定位置；
scroll：随内容⼀块滚动。
⽹页上常⽤的图⽚格式
1)jpg ：有损压缩格式，靠损失图⽚本⾝的质量来减⼩图⽚的体积，适⽤于颜⾊丰富的图像;(像素点组成的，像素点越多会越清晰 )
2)gif：⽆损压缩格式，⽀持透明，⽀持动画，适⽤于颜⾊数量较少的图像;
3)png:⽆损压缩格式，⽀持透明，不⽀持动画，(是fireworks的 源⽂件格式)，适⽤于颜⾊数量较少的图像;
六、CSS浮动属性
语法：float:none/left/right;
浮动的⽬的：就是让竖着的元素横着显⽰
⼀个元素设置float：left/right；时，元素会脱离⽂档流(半脱离)，不占空间；
有三个取值：
left：元素向左浮动
right：元素向右浮动
none：默认值，不浮动。
清除浮动可以理解为打破横向排列。
清除浮动的属性是clear，语法：
clear : none | left | right | both
none：默认值。允许两边都可以有浮动对象
left：清除左浮动/不允许左边有浮动对象
right : 清除右浮动/不允许右边有浮动对象
both : 清除两端浮动/不允许有浮动对象
有⼀点是要记住的那就是
对于CSS的清除浮动(clear)，⼀定要牢记：这个规则只能影响使⽤清除的元素本⾝，不能影响其他元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。