CSS引入方式
1.内部样式表(内嵌式) 把定义的CSS属性放在html文档中的<style></style>标签中 2.行内样式表(行内式)权重高 直接在需要CSS属性的标签内部添加style=属性 例如:<p style="color: red; font-size: 25px;"></p> 3.外部样式表(链接式) 在html文件外部单独创建一个CSS文件，里面只有CSS样式属性，html中使用<link rel="stylesheet" helf="CSS路径/CSS的url地址">引入使用CSS的三大特性 CSS的层叠性 主要解决样式冲突情况，遵循就近原则 CSS的继承性 子标签会继承父标签的某些样式(主要是文字相关的) CSS的优先级 相同的选择器根据层叠性执行。不同的选择器根据选择器的权重来执行。复合选择器会有权重叠加。选择器权重：!important >行内样式style="" >ID选择器>类选择器、伪类选择器>(标签)元素选择器>继承或者*(继承的权重是0)。
显示模式 块元素 独占一行，宽度和高度皆可以自由设置，宽度默认是父级同宽
行内元素 相邻的行内元素在一行上，宽度和高度设置无效，默认宽度是内容本身的宽度
行内块元素 一行可以有多个元素，本身的宽度是内容的宽度，宽度和高度皆可以自由设置
元素显示模式的转换 把行内元素转换成块元素(常用)
定义: a { display: block; }元素显示模式的转换 把块元素转换成行内元素
定义: div { display: inline; }元素显示模式的转换 把行内元素转换成行内块元素(常用)
定义: div { display: inline-block; }基础选择器
标签选择器： 定义后，与标签选择器同名的标签，全部都会生效 定义: p { color: red; } 类选择器： .类定义，class调用。类选择器是通用属性，任何标签都可调用该属性 定义: .red { color: red; } 调用: <div class="red">男人</div> id选择器： #定义id名，id调用。id选择器是私有属性，只能被调用一次 定义: #red { color:red } 调用: <div id="red">男人</div> 通配符选择器： 通配符选择器，无需调用，定义即生效 定义: * { <!--清除所有标签元素的内外边距--> margin: 0 padding: 0 }复合选择器
后代选择器 元素1是父级标签，元素2是子级标签，最终修改的是全部子级元素2的属性。父级只是提供精确定位 定义: ol li { color: red; } 子选择器 元素1是父级标签，元素2是子级标签，最终修改的是最近一级的元素2的属性。 定义: ol>li { color: red; } 并集选择器 可以选择多组标签,同时为这些标签定义相同的样式。通常用于集体声明,每一个元素通常都独占一格 定义: div, p, .pig li { color: red; } 伪类选择器 链接伪类选择器 链接伪类定义有顺序，link->visited->hover->active，顺序错误会导致定义无效。如果单独定义一个链接伪类则无需遵循顺序要求 a:link 未访问过的链接选出来 定义: a:link { color: red; } a:visited 已访问过的(鼠标点击过的)链接选出来 定义: a:visited { color: red; } a:hover 选择鼠标经过的链接 定义: a:hover { color: red; } a:active 选择鼠标已按下当时没有弹起的链接 定义: a:active { color: red; } 文本伪类选择器 :focus 用于选取获得焦点的表单元素，通常与input标签同用 定义: input:focus { color: red; }字体属性
font-family 定义字体 定义: body { font-family: "微软雅黑"; } font-size 定义字体大小，标题文字大小需要手动指定 定义: body { font-size: 20px; } font-weigth 定义字体的粗细，默认为400 定义: body { font-weight: 500; } font-style 定义文字样式(列如：斜体) 定义: body { font-style: normal; } font 文字属性复合定义，有严格的顺序规定；定义时文字大小和字体属性必须有，其他可以省略。 顺序：font:font-style font-weight font-size/line-height font-family; 定义: body { font: normal 500 20px "微软雅黑"; }文本属性
color 定义文本文字颜色 定义: p { color: red; } text-align 文本对齐，默认是左对齐left 定义: div { text-align: center; } text-decoration 装饰文本，例如:下划线、删除线、上划线等。默认是none p { text-decoration: underline; } text-indent 文本的首行缩进，em是相对单位，是根据字体的像素来自动调整 p { text-indent: 2em; } line-height 定义文本的行间距 p { line-height: 25px; }背景样式
background-color 背景颜色,默认是透明(transparent) 定义: div { background-color: red; } background-image 背景图片,一般大图片、logo、装饰性小图片，都用背景 图片 定义: div { background-image: url(图片url地址); } background-repeat 背景平铺,默认是平铺(repeat) 定义: div { background-repeat: no-repeat; } background-position 背景图片位置 定义: div { background-position: center;或者 background-position: 20px 20px; } background-attachment 背景图像固定,默认是背景图片随着内容滚动(scroll) 定义: div { background-attachment: fixed; } background 复合属性写法 定义: div { background: red url(图片url地址) no-repeat center fixed; } 定义: div { # 背景色半透明,内容不会受到影响,a是alpha的缩写,取值在0~1之间 background: rgba(0,0,0,0.3); }