CSS总结（一） | 易学教程

css的三种书写方式

行内样式
```
<div style="color: pink;">熊二</div>
```

内嵌样式

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   div {
      color: blue;
      }
  </style>
</head>

外联样式（外链样式）

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="样式.css">
</head>
<body>
  <div>熊大与熊二</div>
</body>

颜色属性

颜色的值的三种表示方式

使用表示颜色的单词
十六进制表示法 0-9 a-f color: #nn nn nn; n的取值：0-9, a-f （推荐使用）

注意：当每两位相同的时候可以简写成三位
rgb表示法 rgb(n,n,n) n的取值： 0-255

color: red;
color: #00ab22;*/
color: rgb(255,0,0);*/

字体属性

font-size：设置字体大小

font-style：设置字体样式

font-weight：设置字体粗细

font-size: 100px;

font-style: italic;   /*设置字体倾斜*/

font-weight: bold; /*加粗字体*/
font-weight: bolder;/*更粗字体*/
font-weight: lighter;/*细字体*/
font-weight: 100;  /*注意：font-weight的值设置的是数字的时候，一定不要带单位*/

字体属性简写：

/*写法：*/
font: font-style font-weight font-size font-family;
/*示例：*/
font: 600 italic 50px 'simsun'

注意：
1.font简写的时候font-size和font-family一定要写，而且位置必须是font-size在前font-family在后

2.font-style和font-weight的位置可以变，但是只能在 font-size的前面。而且可有可无

文本相关属性

文本水平居中

text-align: center;
/*text-align: right;*/
/*text-align: left;*/

如果元素的宽度不是由内容决定，设置其中的文本的水平位置，给这个元素本身设置text-align属性即可一行显示多个或者是宽度由内容决定的元素，设置其文本的水平位置，我们需要给其父元素设置text-align属性

文本首行缩进

/* px：一个单位： em：相对长度单位*/
text-indent: 80px;     
text-indent: 2em;

文本修饰线

text-decoration: underline;  /* 下划线*/
/*text-decoration: overline; 上划线*/
/*text-decoration: line-through;  中划线*/

text-decoration: none;去除文本修饰线

css中选择器

基础选择器（简单选择器）
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器（通用选择器）
复合选择器（将标签选择器、类选择器、id选择器通过一定的规则组合起来的新的选择器）
- 后代选择器
- 子代选择器
- 并集选择器
- 交集选择器

标签选择器

将标签名作为选择器的名称，标签选择器会选择页面上所有的这一类标签

  <style>
    h1 {
      color: pink;
    }
    div {
      color: blue;
    }
  </style>

类选择器

类选择器的特点：

1.一个元素可以同时拥有多个类名

2.一个类可以被多个元素同时使用

作用范围：在页面上拥有这个类名的元素

.pink {
  color: pink;
}
.blue {
  color: blue;
}
.font {
  font-size: 50px;
  font-weight: 600;    /*skyblue*/
}

id选择器

 #one {
      color: blue;
    }

注意：在一个页面上有且只能有一个叫这个id名字的元素，简单来说就是页面的id属性的值不能重复
一般不推荐使用id选择器，id一般都是在js中使用的最多*

通配符选择器

* {
  color: pink;
}

通配符选择器会选择器页面上所有的元素都设置相同的样式
注意：一般不推荐使用，一般都是在css初始化的使用
css的初始化：去除浏览器默认给到元素的样式的过程

后代选择器

.father span {
      color: pink;
    }

子代选择器

.father>span {
      color: green;
}

注意：子代选择器只能选择直接子元素（只能选择儿子这一代）

并集选择器

div,span,.one,a {
  color: pink;
  font-size: 50px;
 }

交集选择器

p.one {
      color: pink;
      font-size: 100px;
}

注意：使用交集选择器的时候，如果存在有标签选择器，标签选择器一定要写在前面

伪类选择器

链接伪类选择器：

:link （链接）只对a标签有效
:visited (已经被访问了) 只对a标签有效
:hover (悬停) 对所有的元素有效
:active (激活) 对所有的元素有效

span:hover {
   color: purple;
 }

目标伪类选择器：

当带点击a标签时，此时页面会滚动条会定位到id为对应的id的段落处，此时的目标就是h3，或者h2，当点击哪一个连接时候对应id的元素就会被选中。

  <style>
     /*target {
      属性：属性值;
     }*/
     h3:target {
      color:  pink;
      font-size: 30px;
     }
  </style>
<body>
  <ul>
    <li><a href="#personInfo">个人信息</a></li>
    <li><a href="#childLife">早年经历</a></li>
  </ul>
  <h3 id="personInfo">个人信息</h3>
  <p>张钧甯（Ning Chang），1982年9月4日出生于德国，毕业于台湾中央大学产业经济研究所法律组硕士班，华语影视女演员。
2002年，张钧甯参演个人出道作品《流星花园Ⅱ》。2006年，因主演医疗剧《白色巨塔》而被观众熟知 [1]  。2008年，张钧甯凭借伪纪录片《情非得已之生存之道》获得第10届台北电影节最佳女演员奖。2009年，她主演的警匪剧《痞子英雄》在台湾播出。2013年，凭借爱情剧《最美的时光》获得更多关注 [2]  。
2014年，主演警匪片《痞子英雄：黎明升起》 [3]  。2015年，凭借古装剧《武媚娘传奇》获得时尚星秀人物盛典度最具突破女演员 [4]  ；同年，由其主演的武侠剧《少年四大名捕 》在湖南卫视首播 [5]  。2016年，她出演了宫斗剧《如懿传》 [6]  。2017年，主演民国传奇女性剧《女管家》 [7]  与青春爱情电影《六人晚餐》相继上映 [8]  。2018年，主演都市情感剧《温暖的弦》 [9]  ，凭借《虎啸龙吟》获第24届华鼎奖中国百强电视剧最佳女配角 [10]  。</p>
<h2 id="childLife">早年经历</h2>
<p>张钧甯出身于书香门第。在德国慕尼黑出生，成长于台湾。2000年，十八岁的她考入台北大学历史系，大二转入法律系就读。随后，她在一次西门町逛街时，接受工读生的邀请填写问卷，几个月后工读生成为艺人经纪助理时想到充满学生气息的张钧甯，她便在这机缘巧合下进入了演艺圈。起初，她以拍摄音乐录音带及广告为主 [11-12]  。</p>
<body>

结构伪类选择器：

从HTML的结构上去选择元素。

语法：

选择器:first-child   选择第一个子元素

选择器:last-child  选择最后一个子元素

选择器:nth-child(n)    n:表示的是选择的是第几个子元素（只看元素的位置和元素本身无关）

选择器:nth-last-child(n) n:表示的是选择的是第几个子元素（只看元素的位置和元素本身无关）  从后往前数

常用方法：

/**选择第一个li元素和最后一个li元素**/   
li:first-child {
      color: pink;
      font-size: 20px;
     }
     li:last-child {
      color: pink;
     }
    li:nth-child(1),li:nth-child(2) {
      color: blue;
    }
    /**选择第奇数或偶数个元素**/
   li:nth-child(2n+1) {
      color: pink;
      font-size: 50px;
    }
    li:nth-child(odd) {
      color: pink;
    }
    li:nth-child(even) {
      color: blue;
    }
   .one li:nth-child(2n) {
      color: pink;
    }
/**选择第二个div元素**/
   div:nth-child(2) {
      color: blue;
    }
/**选择父ID为boxx的第四个div元素**/
    .boxx p:nth-child(4) {*/
        color: pink;
    }
/**选择第四个p元素**/
    .p:nth-child(4) {
      color: pink;
    }

元素常见的三种显示方式

行内元素
块级元素
行内块级元素

行内元素

行内元素：   display:inline

特点：
    1.一行可以显示多个
    2.大小由内容决定
    3.不能设置有效宽高

常见行内元素： span、em、a、img

img是一个特殊的行内元素，可以设置有效宽高

块级元素

块级元素：  display：block

特点：
    1.独占一行
    2.可以设置有效宽高
      
常见的块级元素：  h1-h6、p、div、ul、li、ol、dl、dt、dd

行内块级元素

行内块级元素：   display：inline-block
特点：
    1.一行可以显示多个
    2.可以设置有效宽高
常见的行内块级： input、textarea、select

来源：https://www.cnblogs.com/chen88/p/11577921.html

标签

Pink

nth-child

css第一个元素

css选择器