Web前端——2.css选择器

css样式大全 

参考网站：

http://www.w3school.com.cn/cssref/index.asp 

该网站包含了HTML和JavaScript（一门语言）的具体讲解，非常值得一看！！！

1.字体样式

①font：修饰字体的快捷样式

font：字体  大小；        （大小要写像素）

font—family：               字体；

font—size：**px；          表示多大字号

font—weight：bold；          表示字体加粗，使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

font-family：         修饰选择字体
font-size：             修饰字体大小
font-weight：        修饰字体是否加粗

②color：修饰字体颜色样色（十六进制rgb（0-255））

color：#000000；    表示黑色

color：#FFFFFF；     表示白色

color:#******;           表示任意颜色

color：rgb（**，**，**）；

color：rgba（**，**，**，0-1）；                                      后面a为透明度，数值范围0-1之间

③text-align：修饰字体水平对齐方式

text—align：left；           左居中

text—align：right；        右居中

text—align：center；     水平居中

text-align属性只对块元素有效，行元素因为没有宽度和高度，自身多大就占用多大位置，所以不存在是否居中之说。

④line-height：修饰字体所占行高

line——height：**px；      设置行高，块元素可通过此拉倒行高达到垂直居中效果

⑤border：元素边框

border：**px  solid/dashed  color；         设置边框像素，边框线条为实线/虚线

border—radius：50% ；                  radius为角度，可通过调节百分比设置角度大小，50%可以将矩形变为圆形。也可以不写百分比，写上像素数，

border—left：**px ；  

一般为原来像素的一半，考虑到原来的像素可能会被修改，所以最好写成百分比，便于维护。

⑥display：行元素和块元素的转换、隐藏元素

display：block；          表示将行元素转换成块元素（常用），转换的同时会换行

display：inline-block；     表示将行元素转换成块元素（常用），转换的同时不会换行

display：inline；          表示将块元素转换成行元素（一般不常用）

display：none；           隐藏元素

⑦margin：元素外边矩

margin—top：**px；                   表示上边的外边矩与元素的距离

margin—bottom：**px；            表示下边的外边矩与元素的距离

margin—left：**px；                   表示左边外边矩与元素的距离，即左缩进

margin—right：**px；                表示右边的外边矩与元素的距离，即右缩进

margin：**px  **px   **px    **px；             表示上、右、下、左（钟表顺时针方向）

margin：0；                                表示上下左右全为0个像素（只有为0时可以不用写px），同理，只写一个数据说明上右下左全为某个值。

margin：auto；                          表示居中

margin：0   auto；                    表示top和bottom即上下为0，左右自动居中

与margin对应的是padding（内边距），用法和margin一样。

⑧text-decoration：修饰字体边线

text—decoration：none ；                     表示字体无下划线

⑨text-shadow：字体阴影  （box—shadow：盒子阴影）

text—shadow：5px   3px  2px   red；                  分别表示x轴偏移量、y轴偏移量、阴影字体的模糊度、阴影字体颜色

2.背景样式

background：背景快捷方式


background-color：背景颜色


background-image：背景图片


background-position：背景定位


background-attachment：背景定位方式


background-repeat：背景重复