【CSS】基础笔记——第二天

▉ CSS复合选择器

后代选择器

又称为包含选择器

可以选择元素或元素组的子孙后代;原理是根据这一整个父子关系链进行非严格匹配;优点是可以匹配一个特定的标签组,减少代码量

loli ul li {
      color: pink; }		/* 快速匹配到
下的
    下的所有
  • */

子元素选择器

和后代选择器极为相似,但子元素是指"亲儿子",不是"子孙后代"

结合demo很容易记忆:

<div>
    <strong>儿子strong>
    <strong>儿子strong>
    <strong>儿子strong>
div>
<div>
    <p>
       <strong>孙子strong>
       <strong>孙子strong>
       <strong>孙子strong>
    p>
div>
div strong {
      color: pink; }			/* 后代选择器--中间用空格--会选出儿子和孙子 */
div>strong {
      color: pink; }			/* 子元素选择器--中间是">"号--只会选出儿子 */

交集选择器

由两个选择器构成,找到的标签是满足两个条件的

p.red {
      color: red; }				/* 选择的标签是

*/

并集选择器

p, span {
      color="pink"; }			/* 选择p和span标签 */

这降低了代码的重复性:当不同标签但样式相同时,便可以这样集体声明

链接伪类选择器

可以这样记忆:

  类选择器是一个点     .demo { }

  伪类选择是俩点(冒号)  :demo { }

a:link    未访问

a:visted   已访问

a:hover   鼠标悬停(★)

a:active   鼠标按下

↑ 上面的写法本质其实还是交集选择器

注意按照顺序,否则大概率发生错误

因为链接有默认样式,因此我们通常都要这样写 :

a {
     							/* 利用标签选择器,给所有链接置默认值(并取消下划线) */
	font-weight: 400;
	font-size: 16px;
	color: gray;
	text-decoration: none;
}
a:hover {
     					/* 一般我们只设置hover */
	color: pink;
}

 

 

▉ 标签显示模式(display)

—— HTML标签一般分为块标签行内标签

块级元素block-level

常见的块级元素有:<h1>~<h6>,<p>,<ul>,<ol>,<li>等,最典型的是

标签

特点

  独占一行

  高度、宽度、外边距、内边距都可以控制

  宽度默认是容器父级宽度)的100%

  像一个容器,或者说盒子;里面可以放块级或行内元素(容器内可以装任何元素)

  • 段落一定是文字组成的,因此p内不能再放块级元素,尤其不能放<div>
  • 同理h1~h6也都是文字类块级标签,里面也不能放其他块级元素
 

行内元素inline-level

常见的行内元素有:<a>, <strong>,<b>,<em>,<i>,<del>,<s>, <ins>,<u>等,最典型的是标签

特点

  一行多个

  高宽直接设置是无效

  宽度默认本身内容的宽度

  行内元素只能容纳文本其他行内元素

  • 链接里不能再放链接(那当然)
  • 特殊情况下a里面可以放块级元素,但是给a转换一下块级模式最安全
 

行内块元素inline-block

在行内元素中有几个特殊的标签:<img />,<input />,<td>,可以对它们设置宽高和对齐属性

特点

  • 这样的特殊元素既有块级元素的特点(可设置宽、高、边距),又有行内元素的特点(一行多个

  • 默认宽度就是本身内容的宽度
 

标签显示模式转换display

块→行内  display:inline

行内→块  display:block

块、行内→行内块  display:inline-block

demo:

span {
     					/*span是行内元素,本来不能设置宽高,转化后可以;另外注意,转换为块元素后每行也只能有一个了*/
	display: block;
	width: 100px;
	height: 100px;
}

 

 

▉ 行高

▶ 文本在水平方向可以画四条线,注意理解:顶线中线基线底线(自上向下)

其中,行高是两行的基线之间的距离

▶ 行高 = 上距离 + 内容高度 + 下高度

▶ 单行文本垂直居中的方法:文字的行高等于盒子的高度(★常用)

原理是在设置行高时,文字分布在这个行高的中间(上下边距平分)

▶ 当行高 > 盒子高度,文字偏下;行高\ < 盒子高度,文字偏上
 

 

▉ 背景

背景颜色background-color(默认值为transparent,透明)

背景图片background-image(默认值为none;参数写url(),图片地址写在括号内,就不用写引号了)

注: 背景图片级别高于背景颜色,会盖住颜色;
   背景图片默认平铺:background-repeat: repeat;参数可以改为no-repeat、repeat-x、repeat-y

背景位置background-position

参数可以是length(坐标数字、百分数)和position(top、center、bottom,left、center、right)

注意:

  1. 前提是要有background-image属性,背景颜色不行
  2. 如果指定两个都的是方位名词,则与其顺序无关。比如bottom rightright bottom效果一样
  3. 如果只指定了一个方位名词,则另一个默认center
  4. 如果指定两个都是精确坐标,则是(x, y)的顺序,显然与顺序有关
  5. 如果只指定了一个精确坐标,则另一个默认center
  6. 方位名词和精确坐标可以混用

背景附着background-attachmentscroll 滚动(默认);fixed 固定

背景连写

font连写类似,背景连写对顺序没有强制要求

background: transparent url(loli.png) no-repeat scroll center top;		/*demo*/

背景透明(CSS3)

background: rgba(0, 0, 0, 0.3);

最后一个参数是alpha透明度,取值0~1

.3指的就是0.3
 

 

▉ background典型案例——链接导航栏

.nav {
     
      text-align: center;             /*div的内部元素居中*//*这句代码好用且常用,但需要理解体悟一下*/
}
.nav a {
     
      display: inline-block;          /*样式转换为行内块*/
      width: 120px;                   /*宽*/
      height: 30px;                   /*高*/
      /*font-weight: 400;*/           /*字体默认字重*/
      /*font-size: 16px; */           /*字体默认自号*/

      text-decoration: none;          /*文本装饰:链接样式取消下划线*/
      text-align: center;             /*(水平居中)文本水平对方式:*//*因为继承性,这句代码甚至可以删掉*/
      line-height: 30px;              /*(垂直居中)行高等于高度*/

      color: #fff;                    /*字体颜色*/
      background-color: pink;         /*背景颜色*/
}
.nav a:hover {
                     /*鼠标悬停↓*/
     color: yellow;                  /*字体颜色*/
     background-color: orange;       /*背景颜色*/
}
<body>
    <div class="nav">
        <a href="#">一个萝莉a>
        <a href="#">两个萝莉a>
        <a href="#">三个萝莉a>
    div>
body>

 

 

▉ CSS三大特性

CSS层叠性

就近原则

样式冲突时,哪个样式离结构近,就执行哪个样式。

看起来是这样的:后面的样式把前面的样式层叠掉了;注意只有样式冲突时才会发生层叠

CSS继承性

子承父业

字标签会继承父标签的某些样式(text-,font-,line-这些开头的可以继承,color也可以继承 )

作用:简化代码,降低了CSS的复杂性

CSS优先级

▶ 定义CSS样式时,经常出现两个或多个样式用在同一个元素上 :

如果选择器相同,则层叠;如果选择器不同,则出现优先级问题

权重计算公式CSS Specificity

									 /* 继承或者*			 0, 0, 0, 0   */
div {
                                     /* 标签选择器 			 0, 0, 0, 1   */
     color: pink;
}
.one {
                                    /* 类选择器(伪类选择器) 	 0, 0, 1, 0   */
     color: blue;
}
#two {
                                    /* id选择器 			 0, 1, 0, 0   */
     color: purple;
}    
                                     /* style=""行内样式表 	 1, 0, 0, 0   */
div {
     
      color: pink!important;         /* !important			 ∞            */
}
<div class="one" id="two" style="color: yellow;"> 萝莉萝莉 div>         

权重叠加

交集选择器,后代选择器等会出现权重叠加

几个例子,一看便知:

div ul li → 0, 0, 0, 3
.nav a → 0, 0, 1, 1
a:hover → 0, 0, 1, 1

注意

  1. 不是直接包裹,就是继承;继承的权重是0;
  2. 判断时,直接看是否有直接包裹的选择器
  3. 如果权重相同,就根据CSS层叠性,即就近原则

一些关于权重的典型题目:Day2倒数第二节

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

☀ 注

文章案例改编自《黑马程序员-web前端

&Lolisaikou

你可能感兴趣的:(CSS,css,html,css3)