CSS语法

css文件格式：p { color : red ; text-align : center ; font-size : 1.25rem ; }

在html里引用：<link href = css文件所在地址；rel = "stylesheet">

选择器

标签选择器：标签名{}

类选择器：.类名{}

id选择器：#id{}

行内选择器 从上往下优先级逐级增高

通配选择器:*{} 优先级最低

属性：color：字体颜色

font-size：字体大小

font-family：字体

text-align：文本对齐

text-decoration:line-through：定义穿过文本下的一条线

text-decoration:underline：定义文本下的一条线

text-decoration:none：定义标准的文本

font-style: italic;斜体文本

font-weight:字体粗细

line-height:设置行高

letter-spacing可以指定字符间距

text-indent用来设置首行缩进背景

background-color背景颜色

background-image背景图片

background-repeat背景重复

background-size背景尺寸

background- position 背景位置

伪类：

标签名:hover{}当鼠标移入，切换到该样式表

标签名:active{}当鼠标点击，切换到该样式表

标签名:focus{}当键盘输入，切换到该样式表

透明度：Img{opacity: }0----1,由完全透明到完全不透明

标签分为块级标签，行级标签，行级块标签

块级标签：独占一行，默认宽度和浏览器一致或与父标签一致，高度默认与内容一致，否则为0，可用height,width设置

行级标签：只占内容大小，不能设置宽高

行级块标签：只占内容大小，可以设置宽高

<a>可以包含除自身外的所有标签

<p>不可以包含块标签

display属性可以设置标签属性 block:行级->块级

inline:块级->行级

none:隐藏标签

<div>:块级标签，用来布局网页

<span>:行级标签，用来选中文档中的文字

盒子模型：

width和height设置的是内容区的宽高

清楚浏览器的默认样式：

*{

padding: 0px;

margin: 0px;

}

文档流：是指各标签在窗口中的位置。其中块标签都会各占一行

解决的方法是浮动：使用float属性，它有left,right,none值

浮动后的标签不占原来的文档流位置，没有将文档流撑开，也叫高度塌陷

解决方法是1.为父标签设置高度

2.清除浮动影响：<div style="clear: left;"></div>