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>

stylesheet  样式表

<link rel = "relationship"  type="text/css"  href="./01.css">

 rel ——> relationship 

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 {

}

/*CLASS选择器*/
        .first-item {
            width: 900px;
        }

        .item {
            width: 700px;
            padding: 20px;
            border: 1px solid #369;
        }
        <p class="item">撒旦萨芬记录卡是否健康拉法基</p>
        <p class="first-item item">撒旦萨芬记录卡是否健康拉法基</p>

 

ID选择器
#idName {

}

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

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

 

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

}

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

.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

• padding：20px 距离边框的空间长度（填充长度）
• background 可以设置 背景颜色、背景图片、定位等 ；
  而background-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