CSS-选择器和标签

1、标签

• <strong>代表文字加粗</strong>
• <em>代码文字倾斜</em>
• <del>代表文字有删除线</del>
• <ins>代表文字有下划线</ins>

2、网页字体常用设置

• font-style:normal;                           经常用于清除字体倾斜
• font-style: italic;                              字体倾斜
• list-style: none;                               清除li标签前的小圆点·
• text-decoration:none;                     清除a标签下划线
• text-decoration: line-through；       删除线
• text-indent: 2em;                            首行缩进两字符

3、常用选择器

      基本选择器：id选择器、类选择器、标签选择器、伪类选择器、通配符选择器、

      复合选择器：交集选择器、并集选择器、兄弟选择器（+，~）、后代选择器、子元素选择器、属性选择器、伪元素选择器

4、伪类选择器

• a:link           未被访问的链接
• a:visited      被访问过的链接，由于用户隐私问题，所以使用visited伪类只能设置字体颜色color
• a:hover        鼠标移入时的状态
• a:active        超链接被点击时的状态
• input:focus   获取焦点时的状态，只能设置input标签

5、伪元素选择器

    ::before 表示元素最前边的部分，一般before都需要结合content样式一起使用

    ::after 表示元素最前后边的部分

    常用方法：给某个div后面添加一根可以控制长短的竖线或横线

<style type="text/css">
    #box{
	    width: 100px;
	    height: 100px;
        background-color: #FFC0CB;
	    position: relative;
    }
    #box::after{
	    content: "";
	    width: 1px;
	    height: 100px;
	    background-color: black;
	    position: absolute;
	    top: 0;
	    right: 0;
    }
</style>
<div id="box"></div>

6、选择器优先级

当使用不同的选择器，选择同一个元素并且设置相同的样式时，
       这样，样式之间产生了冲突，最终采用哪个选择器定义的样式，由选择器的优先级(权重)来决定
       优先规则：

       !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

       全：!importan > 行内样式 > id选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器> 通配符选择器 = 子选择器 = 兄弟选择器 > 继承 > 浏览器默认属性

当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 。

权重计算规则：
       行内样式，如: style=””，权值为1，0，0，0。
       ID选择器，如：#content，权值为0，1，0，0。
       类，伪类和属性选择器，如.content  E:link  E[attr]，权值为0，0，1，0。
       标签选择器和伪元素选择器，如div p  ::before，权值为0，0，0，1。
       通配符、子选择器、兄弟选择器等的。如*、>、+,权值为0，0，0，0。
       继承的样式没有权值。!important的权重最高

7、标签显示模式（重点！！！）

（1）块级元素：

常见块级元素：<h1>~<h6。、<p>、<div>、<ul>、<ol>、<li>等

特点：每个块级元素通常会独占一行，可以对其设置高度、宽度、对齐方式等，默认宽度是所在容器的100%，可以嵌套行内元素和块级元素；

（2）行内元素：

常见行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

特点：行内元素不独占一行，不可以对其设置高度、宽度、对齐方式等，默认宽度就是它本身内容的宽度，只能容纳文本或其他行内元素（a标签不能嵌套a标签）；

（3）行内块元素：

常见块级元素：<img />、<input />、<td> 、<canvas>

特点：和相邻行内元素（行内块）在同一行，但是之间会有空白缝隙，可以对其设置高度、宽度、对齐方式等，默认宽度就是它本身内容的宽度。

8、标签模式转换（重点！！！）

• display: none   此元素不会被显示
• display: inline   块级元素转为行内元素
• display: block   行内元素转为块级元素
• display: inline-block   行内块元素
• display: inherit   规定应该从父元素继承display属性的值

9、背景

（1）背景缩放：

background-size: contain    图片按照等比例缩放，缩放后的图片如果填不满盒子会有剩余，图片不会被扭曲变形

background-size: cover       直接放大图片，保证充满盒子

（2）线性渐变：

线性渐变风格登录框：

<style type="text/css">
    button{
	width: 300px;
	height: 40px;
	border: 0;
	border-radius: 20px;
	background: linear-gradient(to right,#a6c1ee,#fbc2eb);
	color: #fff;
	font-size: 18px;
	}
</style>
<button type="button">登录</button>

效果展示：

10、object-fit 属性的用法介绍

• fill（不保持纵横比缩放图片，使图片完全适应）
• contain（保持纵横比缩放图片，使图片的长边能完全显示出来）
• cover（保持纵横比缩放图片，只保证图片的短边能完全显示出来）
• none（保持图片宽高不变）
• scale-down（当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致）

11、取消无图片时的默认边框

/* 取消无图片时的默认边框 */
#home_page img[src=""],#home_page img:not([src]){
    opacity:0;
}