css知识点总结

前言

css是页面的化妆师，也是每个前端必须要掌握的基础。

基础

---

字体设置

---

各种字体之间必须使用英文状态下的逗号隔开。
现在网页中普遍使用14px+
中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-fanily:‘Times new Roman’;
尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示
尽量不用中文,有兼容问题,最好用对应的英文或者unicode编码。

* {
   font-family: "Microsoft  YaHei",tahoma,arial,"Hiragino Sans GB"
 }

字体粗细

span {
    font-weight:400;
 }

tips：数字400 => normal(不加粗) ,而700 => bold(加粗),推荐使用数字

font 综合设置

span  {
   font: font-style font-weight font-size/line-height font-family
 }

tips: 要写全要按以上顺序书写,可省略，但必须保留font-size和font-family,否则font属性不起作用

选择器

id
class
行内
标签
通配符选择器 *
链接伪类选择器
:link 未访问的链接
:visited 已访问的链接我们已经点击过一次的状态
:hover 鼠标移动到链接上
:active 选定的链接 当我们点击别松开鼠标显示的状态

结构伪类选择器(css3新特性)

:first-child 选取属于父元素的首个子元素的指定选择器。
:last-child 选择属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型 even 偶数 odd 奇数,如果用公式n从0开始 (从上往下数)
:nth-last-child(n) 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数，n 可以是数字、关键词或公式(从下往上数)

<ul>
  <li>第一个孩子</li>
  <li>第二个孩子</li>
  <li>第三个孩子</li>
  <li>第四个孩子</li>
  <li>第五个孩子</li>
  <li>第六个孩子</li>
  <li>第七个孩子</li>

<ul>
/*li是ul的孩子，后面对应选择第几个孩子*/

 // even => 2n  偶数 2、4、 6 
 li:nth-child(even) {
     color:red
 }
 // odd => 2n+1/2n-1 奇数 1、3、5、7 
 li:nth-child(odd) {
     color:red
 }

:target

目标伪类选择器：选择器可用于选取当前活动的目标元素

:target {
   color: red;
   font-size:3
 }

tips：link visited hover active 顺序不要改变，按照lvha的顺序。可简单写,只写一个hover。

css复合选择器

• 交集选择器

既属于p又属于red

p.red{
  font-size:    20px;
 }
<p class='red'>111</p>
 <p >222</p>
并集选择器
只要选择器都会执行后面样式

div,
p,
span {
color:blue;
font-size:18px
}

• 后台选择器

子孙后代都可以选择，用空格隔开

div p {
 color:pink;
}
<p>211</p>
<div>
  <p>
  111
  </p>
</div>

• 子元素选择器

只选择亲儿子

div > p {
 color:pink;
}

• 属性选择器(css3)

/*包含title这个属性*/
 
 a[title] {
  color:red;   
 }
 
 /*包含的属性等于*/
 
 input[type='text'] {
      color:red;
 }
<a href='#'
 title='测试1'>测试1</a>
 
 <input
 type="text"
 ></input>

首行缩进

p {
   text-indent:2em
}

tips:1em就是一个字的宽度 如果是汉字的段落，1em 就是一个汉字的宽度。

字间距和单词间距

div {
    letter-spacing:2px; /* 字间距*/ 
  }
  
  p {
   word-spacing:10px; /*单词间距*/
 }

颜色半透明(css3)

/*参数: r、g、b、a*/
 color:rgba(0,0,0,0.3)

文字阴影(css3)

/*水平位置 垂直位置 
模糊距离
阴影颜色
*/

h1 {
 text-shadow:1px 2px 3px rgba(0,0,0,0.3);
}

块级元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性、常用于网页布局和网页结构的搭建
块级元素的特点:
总是从新行开始
高度、行高、外边距以及内边距都可以控制。
宽度默认是容器的100%
可以容纳内联元素和其他块元素

• 常见的块元素有:

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

行内元素

行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有:
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<span>、<u>、<ins>

• 行内元素的特点

和相邻行元素在一行上。
高、宽无效，但水平方向的padding和margin可以设 置，垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或者其他行内元素。(a特殊)

行内块元素(特殊的行内元素)

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