CSS基本语法

标签：行高   设定   颜色   css3   lock   sed   文件   classname   像素   

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

CSS基本语法

标签：行高   设定   颜色   css3   lock   sed   文件   classname   像素   

原文地址：https://www.cnblogs.com/Roc-Atlantis/p/9374626.html