CSS3入门与提高（一）

电玩女神 2023-03-02 13:19 1阅读 0赞

### 学会使用CSS选择器 ###

#### 标签选择器（元素选择器） ####

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者

元素名\{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; \}

#### 类选择器 ####

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
     标签调用的时候用 class=“类名”  即可

#### 多类名选择器 ####

1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
     2. 各个类名中间用空格隔开。

#### id选择器 ####

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

**类选择器和id选择器之间的区别**  
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

#### 通配符选择器 ####

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

#### 伪类选择器 ####

*  链接伪类选择器

1.  :link /\* 未访问的链接 \*/
2.  :visited /\* 已访问的链接 \*/
3.  :hover /\* 鼠标移动到链接上 \*/
4.  :active /\* 选定的链接 \*/

*  结构(位置)伪类选择器（CSS3)

1.  :first-child :选取属于其父元素的首个子元素的指定选择器
2.  :last-child :选取属于其父元素的最后一个子元素的指定选择器
3.  :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
4.  :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式

li:first-child {  /* 选择第一个孩子 */
            		color: pink; 
            	}
    li:last-child {    /* 最后一个孩子 */
            		color: purple;
            	}
    li:nth-child(4) {    /* 选择第4个孩子 n 代表 第几个的意思 */ 
    				color: skyblue;
            	}

*  目标伪类选择器(CSS3)  
    :target目标伪类选择器 :选择器可用于选取当前活动的目标元素（与a标签一起使用）

:target { 
    		color: red;
    		font-size: 30px;
    }

#### css注释 ####

使用  /*  需要注释的内容  */

### 熟记CSS外观属性 ###

*  color:文本颜色
 *  line-height:行间距
 *  text-align:水平对齐方式
 *  text-indent:首行缩进
 *  letter-spacing:字间距
 *  word-spacing:单词间距（适用于英文）

### 熟练掌握CSS3外观属性 ###

*  颜色半透明  
    **color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3)**
 *  文字阴影  
    **text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;**

### 引入CSS样式表（书写位置） ###

*  行内式（内联样式）

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

*  内部样式表（内嵌式）

*  外部样式表（外链式）

### 熟练掌握CSS三种显示模式 ###

*  块级元素(block-level)

常见的块元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

*  行内元素(inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

*  块级元素和行内元素之间的区别

块级元素的特点：
    （1）总是从新行开始
    （2）高度，行高、外边距以及内边距都可以控制。
    （3）宽度默认是容器的100%
    （4）可以容纳内联元素和其他块元素。

行内元素的特点：
    （1）和相邻行内元素在一行上。
    （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
    （3）默认宽度就是它本身内容的宽度。
    （4）行内元素只能容纳文本或则其他行内元素。
    注意：
    1. 只有文字才能组成段落  因此 p  里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
    2. 链接里面不能再放链接。

## 行内块元素（inline-block） ##

在行内元素中有几个特殊的标签——`<img />、<input />、<td>`，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。  
**行内块元素的特点：**  
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。  
（2）默认宽度就是它本身内容的宽度。  
（3）高度，行高、外边距以及内边距都可以控制。

### CSS复合选择器 ###

*  交集选择器  
    交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，**两个选择器之间不能有空格**，  
    交集选择器 是 并且的意思。 即…又…的意思  
    比如： p.one 选择的是： 类名为 .one 的 段落标签。
 *  并集选择器  
    并集选择器 和 的意思， 就是说，**只要逗号隔开**的，所有选择器都会执行后面样式。  
    比如 .one, p , \#test \{color: \#F00;\}
 *  后代选择器  
    子孙后代都可以这么选择。 或者说，它能**选择任何包含在内 的标签。**
 *  子元素选择器  
    子元素选择器**只能选择作为某元素子元素的元素**。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格

.nav li {  /* 空格 后代选择器 可以选择 儿子 孙子 重孙子.. */
    			color: red;
    		}
    		.nav > li {   /* 大于号 子元素选择器 只选择 亲儿子 */
    			color: pink;
    		}

### 属性选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>**选择器</th> 
   <th>**示例</th> 
   <th>**含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>E[attr]</strong>****</td> 
   <td></td> 
   <td>存在attr属性即可</td> 
  </tr> 
  <tr> 
   <td><strong>E[attr=val]</strong>****</td> 
   <td></td> 
   <td>属性值完全等于val</td> 
  </tr> 
  <tr> 
   <td><strong>E[attr*=val]</strong>****</td> 
   <td></td> 
   <td>属性值里包含val字符并且在“任意”位置</td> 
  </tr> 
  <tr> 
   <td><strong>E[attr^=val]</strong>****</td> 
   <td></td> 
   <td>属性值里包含val字符并且在“开始”位置</td> 
  </tr> 
  <tr> 
   <td><strong>E[attr$=val]</strong>****</td> 
   <td></td> 
   <td>属性值里包含val字符并且在“结束”位置</td> 
  </tr> 
 </tbody> 
</table>

### 伪元素选择器（CSS3) ###

*  E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
 *  E::first-line 文本第一行；
 *  E::selection 可改变选中文本的样式；

### CSS 背景(background) ###

<table> 
 <thead> 
  <tr> 
   <th>background-color</th> 
   <th>背景颜色</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>background-image</td> 
   <td>背景图片地址</td> 
  </tr> 
  <tr> 
   <td>background-repeat</td> 
   <td>是否平铺</td> 
  </tr> 
  <tr> 
   <td>background-position</td> 
   <td>背景位置</td> 
  </tr> 
  <tr> 
   <td>background-attachment</td> 
   <td>背景固定（fixed）还是滚动(scroll)</td> 
  </tr> 
  <tr> 
   <td>背景的合写（复合属性）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

*  背景平铺（repeat）

**语法：**

background-repeat : repeat | no-repeat | repeat-x | repeat-y

**参数：**

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

repeat-x : 　背景图像在横向上平铺

*  背景位置(position)

/* /* 1.利用方位名词 top bottom 来更改背景图片位置 */
    
                /*background-position: left top; 默认的是 左上角 */
                /*background-position: bottom right ; 方位名词没有顺序，谁在前都可以 */
                /* background-position: center center ; */ 
                /* background-position: left; 如果方位名词只写一个，另外一个默认为center */
               /* background-position: 10px 30px; 2. 精切单位 第一值一定是x坐标 第二个值一定是y坐标,注意这里的 坐标轴的圆心在左上角 */
                 /* 3. 混搭 */
                background-position: center 10px ;
                /* center 10px 水平居中的 垂直是 10px 10px center 水平10px 垂直是 居中 */

*  背景附着

background-attachment: fixed;  /* 默认的是 scroll 滚走的 */

*  背景透明(CSS3)

最后一个参数是透明度，在0-1之间

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

*  多背景(CSS3)

background-image: url('images/gyt.jpg'),url('images/robot.png');

### 熟练掌握CSS三大特性 ###

*  CSS层叠性  
    是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
 *  CSS继承性  
    所谓继承性是指书写CSS样式表时，子标签会继承父标签的**某些样式**，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
 *  CSS优先级  
    关于css权重关系——**CSS特殊性（Specificity）**  
    specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

<table> 
 <thead> 
  <tr> 
   <th>继承或者* 的贡献值</th> 
   <th>0,0,0,0</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>每个元素（标签）贡献值为</td> 
   <td>0,0,0,1</td> 
  </tr> 
  <tr> 
   <td>每个类，伪类贡献值为</td> 
   <td>0,0,1,0</td> 
  </tr> 
  <tr> 
   <td>每个ID贡献值为</td> 
   <td>0,1,0,0</td> 
  </tr> 
  <tr> 
   <td>每个行内样式贡献值</td> 
   <td>1,0,0,0</td> 
  </tr> 
  <tr> 
   <td>每个!important贡献值</td> 
   <td>∞ 无穷大</td> 
  </tr> 
 </tbody> 
</table>