CSS入门

css

1.继承

继承:有一些属性给父类或祖先元素设置后，其后代元素也会继承该样式，这就叫做继承性。

• 继承性是从当前元素开始，一直到最小的元素。

• 后代元素能够继承来自祖先元素的文字样式。这些属性包括：color，text-开头，line-开头的，font-开头的。

• 关于盒子、定位、布局的属性，不能被继承。
  

2.层叠

样式表：行内式>内嵌式与外链式 （就近原则）
选择器：ID选择器>类选择器>标签选择器
复杂选择器权重的计算比较数基础选择器的数量：

• ID选择器的数量 类选择器的数量 标签选择器的数量
• ID选择器的权重记为100，类选择器记为10，标签选择器记为1.
• PS：不进位，255个标签等于一个类名。没有任何实战的意义。
• ** 权重相同时，比较书写顺序，在后面的会覆盖前面的。**
  注意：
  1.并集选择器计算权重时，要分开计算。
  2.如果不能直接选中元素，通过继承性影响的话，权重为0。
  3.同一个标签，携带了多个类名，且样式有冲突时，跟类名的顺序无关，和样式的先后顺序有关。
  总结：
  对于相同的选择器：样式表的排序：行内>内嵌与外链（就近原则）
  对于非行内样式表，选择器排序：id>类>标签。

3.important

important 翻译：重要的。
格式： k:v !important;
注意：
1.！important 提升的是一个属性，而不是选择器的权重。
2.！important无法提升继承的属性，权重仍然是0。
作用：

• 将该属性的权重提为最高。
• **慎用！**使用不当的话，容易造成该关键字成倍增加，很有可能 将网页这个css样式搞崩，最后不得不重构css样式。

4.行高

line-hight：行高，一行文字实际占有的高度。
表示方式：px，百:分比，em。
px：1920*1080 ，横向有1920个像素（px）， 纵向有1080个像素（px）。
百分比：参照字体大小。
em：字体的倍数。
注意：
设置行高，字号时，一般设置为偶数。这样可以保证，他们的差一定是偶数，方便计算与居中。
特殊用法：
要让一行文字在盒子中垂直居中，可以让行高等于盒子高。【只适用于单行文字。】

5.字体大小

font-size：字号 ，字体大小。
设置方式：单词，px，em，百分比。
字体大小默认为16px。
eg:
1.xx-small----- xx-largr
用的极少。
2.px 【推荐使用】
3.em 相对于父元素的font-size属性计算的。
1em=父元素的font-size的值。
4.百分比 ：相对于父元素的font-size属性计算的。

快捷键：
fz30 = font-size: 30px;

6.字体

font-family： 字体
1.字体分为英文字体和中文字体。有些英文字体不会作用到中文字体上，而中文字体会作用到英文上。
2.字体属性值可以为多个，后面的字体为备选字体，当前面的字体，电脑上没有加载时，会去加载后面的字体，如果都没有，会使用默认字体（微软雅黑）
3.书写顺序：英文字体写在前面，中文字体写在后面。
4.中文字体也有英文名称

• 宋体：Simsun；
• 黑体：SimHei；
• 微软雅黑：Microsoft YaHei；

注意：
1.使用英文别名可以提高网页的加载速度。
2.防止源码中的中文乱码。
font-size 、font-family
font是一个复合属性。
font:字体大小/行高 字体;（font: 24px/40px “华文行楷”;）

7.字体加粗

font-weight：字体加粗
属性值：数字，单词。

1. 数字：100-900.越往上越粗
2. 单词：normal（正常） /bold（加粗）/ bolder（更粗）/lighter（细）;一般使用单词形式的正常与加粗。
   快捷键：
   fwb = font-weight: bold;

8.字体样式

font-style ：字体样式
normal ：正常， 默认值
italic ：斜体， 【使用斜体的话，推荐使用】
oblique ：【不推荐使用】
区别：
1.italic： 带有倾斜属性的字体才可以设置。
2.oblique： 没有倾斜属性的字体也可以设置。

**快捷键：**fs

9.文本溢出

禁止文本换行： white-space: nowrap;
溢出内容隐藏 ：overflow: hidden;
使用省略号来代替被修剪的文本 : text-overflow: ellipsis;

10.段落对齐方式

text-align: 设置段落的对齐方式。

left 左对齐 默认值
center 居中对齐
right 右对齐。
与文本的行数没有关系。

11.文本缩进

text-indent ：文本缩进
单位：px em 百分比。
百分比;是按照盒子的宽度。可以是负数，负数向前（左）缩进，正数为向后（右）缩进。

12.文本修饰

text-decoration 文本修饰
有四个常见的样式:
正常 ; none
下划线 :underline
上划线: overline
中划线：line-through
eg: text-decoration: line-through;

13.单词间距

word-spacing:单词间距，单位是px ,对于中文无效。
eg:word-spacing: 24px;

14.字母间距

letter-spacing:字母间距，单位是px
eg:etter-spacing: 24px;

15.大小写转换

uppercase 大写
lowercase 小写
eg:text-transform: lowercase;

1.6垂直对齐方式

top： 顶部对齐
middle ：中间对齐
sub ：底部对齐
eg:vertical-align:middle;

基线对齐 ：相当于四线格中的第三条线。 默认的对齐方式为基线对齐。一般用于图片与文字的对齐。