学习内容:CSS复杂选择器
学习语言:CSS,html
htmlcss寒假学习

CSS复杂选择器

选择器

1.选择器在树里面的寻找方式为从叶子节点到根节点.
多个.
2.多个选择器可以用空格/>隔开,进而实现嵌套选择,注意逻辑自洽.
3.嵌套的复杂选择器,可以使用权重计算来判断选择器的权重,进而确定到底选择哪个.权重可见19日的CSS权重部分.选择器的权重直接把第一行的权重加起来就行了 .如果权重相同,则后面的会覆盖前面的.
3.两个选中相同容器的选择器,如果操作的属性不一样,它们是不会相互覆盖的.除非操作的属性一致(补充上面一点)
语雀内容

派生选择器/父子选择器

div span{......}
叫作父子选择器,可以选中被div包裹的span内容,同样的,也可以选择被form包裹的input标签,父标签 也可以是格式标签例如strong等.这是最基础的版本.
.wrapper .box em{....}
更进一步说,父子选择器,只要有父子关系即可,不一定需要是父子标签的关系,例如,上面的代码就可以选择以下内容.

  1.  <div class="wrapper">
  2.             <strong class="box">
  3.                 <em>123</em>
  4.             </strong>
  5.         </div>

div em{.....}
另外,父子选择器对范围最小的那部分,如果对应了多个标签,那么其将同时选中多个标签,包括子标签与子子标签,比如以上的代码就可以选中1,2,3.
div > em{......}
而当两个之间加上>时,其只会选择加上子标签,不会加上孙标签.

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title>Document</title>
  5.         <link rel="stylesheet" href="b.css"> 
  6.     </head>
  7.     <body>
  8.         <div>
  9.             <em>1</em>
  10.             <strong>
  11.                 <em>2</em>
  12.                 <em>3</em>
  13.             </strong>
  14.         </div>
  15.     </body>
  16. </html>

并列选择器

利用多个限制条件来找寻目标子标签,例如div.demo{.....},注意两个String之间没有空格.就可以选中以下代码.

  1. <div class="demo">
  2.             123
  3.         </div>

分组选择器

不是一种单独的选择器,是一种让几个选择器共用一个代码块的书写格式.上面的三行代码与下面的代码等价.

  1. em{background-color: aliceblue;}
  2. strong{background-color: aliceblue;}
  3. span{background-color: aliceblue;}
  5. em,
  6. strong,
  7. span{
  8.     background-color: aliceblue;
  9. }

CSS代码

碎片知识

1.CSS代码相对不注重逻辑性,而是一大堆对于CSS属性的定义

属性

font-size字体大小

默认大小为16,标准为12,设置编程软件字体大小的数值一般为高度

font-weight字体粗细

lighter(细),normal(正常),bold(粗),bolder(最粗),也可以用数字表示:100-900的整百数,有没有这些粗细取决于,这个字体包是否存在.

font-style字的样式.

font-famliy:字体

以Arial为主流.

color字体颜色

有三种输入方式
1.直接英文单词
2.使用颜色代码
例子:#ff4400,即红色的饱和度为ff,绿色的饱和度为44,蓝色的饱和度为00.使用两个十六进制字符生成一个颜色的饱和度.
同时,如果每个颜色的两个字符相同,可以简化成一个.#ff4433==#f43
透明色:transparent
3.使用颜色函数:

border加一个盒子

需要三个属性,依次是盒子边内侧的宽度,盒子的展示样式(实心,空心),盒子(边框)的颜色.同时需要注意的是border是一个复合的属性,其可以另外通过border-style之类的来改变其的其他属性.同时实施的主体不一定是整个边框,可以将实施主体从border变成border-left等,来实现对于不同边的控制.

实现水平垂直居中

如果行间距与容器内字的高度相同(设置字的高度即可),那么其为垂直居中,如果需要水平居中,则直接设置text-aglin即可.

EM

指一个容器内字符的像素宽度.也可以在line-height里面使用

text-decoration

主要有以下三种取值:
line-through:相当于删除线
underline:下划线

  1. em,
  2. strong,
  3. span{
  4.     font-style: italic;/*字体样式 斜体*/
  5.     font-weight:normal;/*字体粗细*/
  6.     font-size: 12px;/*字体大小*/
  7.     font-family: Arial;/*字体*/
  8.     color: aliceblue;
  9.     border: 1px,solid,black;/*加一个盒子*/
  10.     border-width: 100;/*盒子边宽*/
  11.     border-style: dotted;/*点虚线*/
  12.     border-style: dashed;/*条虚线*/
  13.     border-top-width: 0;
  14.     text-align: center;/*设置对齐方式*/
  15.     height: 100;/*设置容器内字的高度*/
  16.     line-height: 100;/*设置容器内行间距,也可以使用em当单位  */
  17.     text-indent: 2em;/*设置首行缩进,一个em等于这个容器上字体的宽度*/
  18.     text-decoration: underline;/*文本装饰,以这个为例:加一个删除符号*/
  19.     cursor: help;/*设置触碰时的指针*/
  20. }