day04 选择器的权重和核心属性

一、选择器权重 （四位表示）

1.标签选择器的权重 0001 2.类名选择器的权重 0010 3.id 选择器的权重 0100 4.群组选择器的权重 看选择器具体应用哪一个 5.后代选择器 选择器权重之和（要起作用的标签）

二、css 样式层叠性

不同选择器定义同一个元素时，不同的样式都可以显示，相同的样式按照权重大小显示

三、伪类选择器（除了 hover 之外，只能用于 a 标签）

a：link-----------鼠标未访问之前的状态 a：visited--------鼠标访问之后的状态 a：hover----------鼠标悬停时状态（所有标签都可以使用） a：active--------鼠标按下时的状态 注意：顺序不能颠倒

a：link{
    color： palegreen；
}
a:visited{
    color: peru;
}
a:hover{
    color: yellow;
}
a:active{
    color: rgb(12, 216, 243);
}

四.css 属性

  1.宽度

  width: 200px;

  2.高度

   height: 200px;

  3.背景色

  background-color: red; 颜色的种类 1.英文单词 2.#9e18b2 十六进制（ 0-9 a-f） 6 位 #000000----#000 #ff0000----#f00 3.rgb（0，0，0） 取值范围 0-255 之间 4.rgba（0，0，0，。5） 最后一位表示透明度 透明度取值范围 0-1 0 透明 1 不透明

  4.文字颜色

  color: red;

  5.文字大小

  font-size: 16px; 文字默认大小 16px 浏览器最小显示文字大小：12px---------谷歌浏览器 其他浏览器最小可能是 10px

  6.字体样式

  font-family： "微软雅黑"；----------（默认微软雅黑）

    1.单个字体样式

    字体如果是中文或者一个英文单词可以不用双引号包裹起来

    字体样式是多个英文的情况下，必须用双引号包裹起来

    2.多个字体样式

    多个字体样式用逗号隔开，如果第一个字体样式有就直接显示，第一个没有的情况下，在看第二个有没有

    3.字体类型

    1.字体放到对应的font文件夹中 ，字体一般类型 ttf 2. @font-face { font-family:"hahaha"; 定义字体名称 src: url(font/AaYangGuanQu-2.ttf); 字体引入路径 } 3.使用 :root{ font-family: "hahaha"; }

  7.文字粗细

  font-weight: 100-900|blod|bloder|lighter; 100,200,300 | lighter=============== 细体 400,500=============================正常 600,700,800,900，blod，bolder========加粗

  8.文字倾斜

  font-style: italic|oblique|normal; italic 倾斜的文字 oblique 倾斜体 normal：正常

  9.文字的水平对齐方式

  text-align: left|center|right|justify; left=======左对齐（默认） right======右对齐 center=====居中 justify====两端对齐（部分浏览器支持，对中文不起作用）

  10.文字的垂直对齐方式

  line-height: value; line-height=height---------文字垂直居中 line-height> height--------文字偏下 line-height< height--------文字偏上

  11.文本修饰

  text-decoration: none|underline|overline|line-through; none===============没有线修饰 underline==========文字上线修饰 overline===========文字下线修饰 line-through=======文字中线修饰

  12.首行缩进

  text-indent: 32px|2em|-10px; 32px，文字默认时 16px 16*2=32 -10px 可以为负数 2em 2 倍

  13.font 复合属性

   font：weight style size/line-height family====顺序不能改变

  14.字间距

  letter-spacing: 10px ;

  15.浮动：float：left|right

  元素脱离文档流 给父元素的所有直接子元素添加