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>*/ 全局选择器（作用于所有的元素）
* {
}
组合 后代元素
选择器 选择器
.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基本语法
原文地址：https://www.cnblogs.com/Roc-Atlantis/p/9374626.html