不经一番寒彻骨，怎得梅花扑鼻香。

css的作用
层叠(级联)式样式表
cascade style sheet
美化html 网页的

颜色相关的样式

前景色

color: 单词
       rgb(红色, 绿色, 蓝色)  范围从 0~255
       16进制值  格式 `#红绿蓝` 范围从 0~FF       
       rgba(红色, 绿色, 蓝色, 0.0~1.0)
       特殊取值
       白色 rgb(255,255,255)
       黑色 rgb(0,0,0)

背景色

background-color:颜色

背景图

background-image:url(图片地址)
background-repeat: no-repeat(不重复) repeat-x repeat-y 在哪个轴上重复

盒子模型

margin 外间距
margin-left
…
border 边框
border-left 边框宽度 边框线类型 边框颜***r> …
padding 内间距
padding-left 左
padding-right 右
padding-top 上
padding-bottom 下

定位方式

div
position: absolute; /绝对定位/
坐标的原点在左上角
left: x 轴的坐标
top: y 轴的坐标
z-index z 轴坐标 取值越大，越靠上

width: 宽度
height: 高度

字体相关

font-size : 字体大小
font-family: 字体种类 （电脑上事先需要有这个字体）
font-style:italic; 倾斜
font-weight: bold; 加粗
text-decoration: line-through 贯穿线
text-decoration: underline 下划线

显示隐藏

display: none; 隐藏
display: block; 显示

样式表

1. 类选择器

.名字 之后使用标签的 class=“名字引用”

2. ID选择器

根据标签的id属性来进行匹配
#id值 之后使用标签的 id=“id值”

3. 元素选择器

根据标签的名字进行匹配

优先级: 如果不同的选择器匹配到了同一个元素，

  • style属性定义的样式最高，id选择器优先级次之，类选择器次之，元素选择器最低,
  • 同级选择器，后定义的优先
  • 可以用 !important 改变优先级，可以把优先级提升到最高

4. 父子选择器

/* 找到一个p标签，并且它的父标签必须是div */
div>p {color:red;}

格式
父标签>子标签

5. 祖先后代选择器

格式
祖先标签 后代标签

6. 伪类选择器

按钮 鼠标移入改变样式，鼠标移除还原
:hover 移入
:first 匹配选中的第一个
:last 匹配选中的最后一个
:focus 获取焦点时