CSS学习笔记第二天
1、父子选择器
html中有如下代码:
<body>
<div>
<span>123</span>
</div>
<span>234</span>
</body>
此时可在CSS中如下写:
div span{
background-color:red;
}
此时所影响的就是div标签中的span标签的内容,这种形式称为父子或派生选择器。
父子关系是间接的也可以。
2、直接子元素选择器
直接子元素选择器用>符号指定直接父子关系以施加影响。
div > em{
background-color:red;
}
3、浏览器中遍历父子选择器的实质
浏览器遍历父子选择器查找的实质是从子端向父端方向逐级向上查找。
4、并列选择器
并列选择器用多个限制条件,选择一个元素,限制条件中间不加空格,形如下列代码:
div.demo{
background-color:green;
}
此时该样式影响的是具有class为demo的div标签。
并列选择器中如果有标签,标签要放在首位,因为标签无特殊标识。
5、多个并列选择器影响一个元素
多个并列选择器影响一个元素时,计算各个并列选择器的权重值,最多的那个施加影响。
当权重值一样的时候,后面的css代码会覆盖前面的代码。
6、分组选择器
分组选择器形式如下:横列数列都行
em,
strong,
span{
background-color:red;
}
这种形式下,标签em,strong,span都会被影响。
7、CSS部分属性
CSS代码由一个一个样式组成,一下介绍几个基本的样式:
字体
font-size:50px;
设置字体的大小为50像素,这里设置大小,实际上是设置字体的高。
font-weight:bold;
设置字体的粗细,上述等同于strong标签的作用。同时取决于字体包。
font-style:italic;
设置字体为斜体,等同于em。
font-family:arial;
设置字体为arial,类似宋体、雅黑啥的。
color:red;
设置字体颜色,有三种写法:
1、土鳖式(纯英文)
color:red;
2、颜色代码
color:#ff4400;
颜色代码由#加三原色饱和度构成
三原色 r(红) g(绿) b(蓝)
饱和度(16进制数) 00-ff 00-ff 00-ff
两位重复可单写:#ff4400 可写为#f40(即淘宝红)
3、颜色函数
color:rgb(0-255,0-255,0-255);其中是数字是十进制的。
border:1px solid black;复合属性
给元素加个盒子
border:border-width border-style border-color
可以拆开写
border未完待续。。。。。