CSS基本语法

1.CSS使用

link 引入外部的CSS文件

<link rel="stylesheet" type="text/css" href="./style.css">

<style></style> 在html中写
```
<style>
    p { color:red } </style>
```
使用html元素的style属性
```
<p style="color:red;"</p>
```

2 CSS格式组成

选择器负责圈定范围，要修改的元素集合声明由属性名和属性值组成，中间用冒号连接(属性名:属性值)，用于设定具体样式
CSS由选择器和一或多个声明组成，多个声明之间用分号

选择器{
  属性名:属性值;
  属性名:属性值;
}

4.3 CSS注释

/*注释内容*/

4.4 CSS基本长度单位

em 倍数默认字体大小的倍数
px：pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；%
百分比
pt：point，是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用；
cm 厘米
mm 毫米

4.5 CSS 颜色单位

colorName： red/green/bue/purple/orange/yellow/pink/skyblue

rgb数字 rgb(34,45,23) rgb(20%, 57%, 100%)

16进制 #abcdef #f90 #ccc

background-color: rgb(100, 200, 50);
background-color: rgb(100%, 50%, 10%);

background-color: #ab1234;
background-color: #abcdef;

5 CSS选择器

首先要清楚的一点：任何元素都有class和id

标签名选择器
tagName {

}

h1 {
color: green;
font-size: 60px;
}

类名
.className {

}

 1 /*CLASS选择器*/
 2         .first-item {
 3             width: 900px;
 4         }
 5 
 6         .item {
 7             width: 700px;
 8             padding: 20px;
 9             border: 1px solid #369;
10         }
11         <p class="item">撒旦萨芬记录卡是否健康拉法基</p>
12         <p class="first-item item">撒旦萨芬记录卡是否健康拉法基</p>

类选择器

ID选择器
#idName {

}

/*ID选择器*/
        #myFriend {
            color: #f90;
        }

        /*<p id="myFriend">撒旦萨芬记录卡是否健康拉法基</p>*/

ID选择器

全局选择器（作用于所有的元素）
* {

}

组合后代元素
选择器选择器

.list li {
border: 1px solid orange;
}

组合子元素
选择器>选择器找list元素下的内容，然后找list的子元素，如果子元素li下面还有元素，不会被修改样式。

.list>li {
border: 1px solid orange;
}

群组
选择器,选择器，选择器

/*群组选择器或者 or*/
h1,hr,p,.item {

}

多条件
p.item

p元素下的class = "item"的

6 选择器优先级

ID > CLASS > tagName > *

组合选择器数数

7 CSS属性常用

字体

font-family
font-size
font-weight normal/bold
font-style normal/italic
font-variant normal/small-caps
font 复合属性

颜色

color

文本

word-spacing
letter-spacing
text-align: left / center /right
vertical-align: baseline / middle ....
line-height 行高
text-decoration ： none/overline/underline/line-through
text-indent: 2em
word-wrap: break-word
overflow-wrap word-wrap的别名 CSS3
white-space pre pre-wrap