前端第一天-css|前端第一天-css 简单样式和选择器前端第一天-css简单样式和选择

类选择器

.className { color : red; } aaa

1 ，类选择器表示的是选择定义了class （假设类选择器为 . first {}）为first的标签，括号里面的样式都是选中的这些标签的样式，class可以设置多个，因此可以选择多个标签。

注意点：
1 xxx 一个标签的class可以设置为多个，不同的className之间用空格分开，这时，可以使用多个.class 选择器选择这个标签，需要注意的是，比如两个标签

.first {} .second{}xxx

如果两个选择器中有相同的属性设置，后者会覆盖前者，覆盖的原则是CSS的定义顺序，和HTML的定义顺序无关。

2 类名选择器 --> #idName {}

#test { color: red; }1234

类选择器使用 # 来表示，在HTML元素中定义id值，#id值则表示选中id为这个值得标签。
类选择器和id选择器的区别就在于：类相当于名字，id相当于身份证号，是唯一标识，html元素可以定义多个相同的class值，而id不能重复。因此id只能选择一个标签，class可以选择多个标签。

还有标签选择器 h1 {} 和通配符选择 *{} 这些使用的比较少； CSS的字体样式

【前端第一天-css|前端第一天-css 简单样式和选择器】字体连写的方式

h1 { color: red; font: initial 400 40px "微软雅黑"; /* font ： font-style font-weight font-size font-family; (后面两个不能省略) */ }连接

注意：这个是设置字体的，给div设置这个连写就没有用。

font- style 字体样式

italic : 倾斜； normal ：正常;

font-weight 字体粗细

normal == 400 ; 正常 bold == 700; 加粗注意： 400 和700是没有单位的

font-size 字体大小

16px; 必须要带单位 em:代表一个字大小，1.5em 则为一点五倍的默认字体大小

font-family 字体

"微软雅黑" "黑体" 一般不用记，写多个字体会先匹配前面的字体，如果前面的字体没找到，再依次往后面找字体。

color : 颜色----不写了就是 rgb 16进制 line-height ：行高相对应的有单元格间距 -（少用）cellspacing

line-height: 60px; 可以给p标签设置行高 /* 如果行高等于盒子的高度，可以让字体垂直居中展示 */

text-indent: 首行缩进默认写法 text-indent : 2em; 首行缩进两格
text-decoration: 文字下划线，上划线，删除线设置

none: 正常 underline: 下划线； line-through:删除线；

复杂选择器 1 后代选择器

.nav p {} : 这个的意思是 class为nav的标签下的p标签，不管p标签是否是第一层元素还是内部嵌套的标签，都会被选中。

2 子代选择器

.nav > p {} ；这个叫做子代选择器，这个和上面的区别是，这个选择的是class为nav的标签下面的亲儿子，也就是第一层子标签中的p标签 --->这个p标签，直接儿子才会选中；

3 交集选择器 div.read {} 这个就是 class为read的div标签的意思，即两个条件都要满足
4并集选择器： .nav, .read {} :对多个选中的标签使用相同的样式表，也就是说不管是class为nav 或者ckass为read都会应用这个样式。
伪类选择器 ---a标签也就是链接的不同状态