CSS基础
CSS规则由两个主要部分构成：选择器 属性操作
css 的四种引入方式：
- 行内式：在标记的style属性中设定CSS样式
<!--<div style="color: deeppink;background-color: aquamarine"> DIV</div>-->
- 嵌入式：将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
- 链接式：将一个.css文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
- 导入式：将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中
<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>
选择器
基本选择器：
- 标签选择器 标签名
- Id 选择器 #id值
- class 选择器 .class值
- 通用选择器 *
组合选择器：
- 后代选择器： 父标签（空格）子标签 #父标签里所有符合子条件的子标签都选择出来
- 子代选择器： 父标签 > 子标签 #父标签下子标签符合条件的选择出来，（子标签下符合条件的不算）
- 多元素选择器：用逗号分隔上面的选择器
- 毗邻选择器 左标签 + 右标签 （必须紧挨着）
- 普通兄弟选择器 左标签 ～ 目标标签
属性选择器：
- 标签名[属性]
- 标签名[属性=值] 精确匹配
- 标签名[属性～=值] 类有多个值时，匹配类里所有的值
- 标签名[属性^=值] 匹配以值开头的 div[egon^=123] 即egon属性必须以123k开头
- 标签名[属性$=值]以之结尾
- 标签名[属性*=值] 包含值都行
伪类选择器：
- 针对超链接标签的操作
A:link 未操作时的
A:hover 虚浮时的
A:active 点击时的
A:visited 点击后的
- before after
Span:after{content=‘’;display=block}
选择器的优先级：
!important 优先级最高
行内式 <div style=“color:red"
ID=100 —-----> class="10------"> element =1
继承标签格式
优先级值一样的时候听从最后面的
继承：
默认继承父标签的一些格式;
2:属性操作
- color 颜色
- Background 背景
- Font-size 字体大小
- Font-color
- Text-align:left,center,right,justfity（两端对齐） 文本位置
- Font-weight 字体大小
- Font-style 字体
- Word-spacing单词间距
- Letter-spacing 字母间距
- Line-heigh 垂直剧中
- Vertical-align:baseline;top;middle;像素 文本和图片对齐
background：URL（地址） no-repeat center center———简写模式
- Background-image:url(地址) 背景图片
- Background-repeat:no-repeat;weith,height
- Background-position:100px 200px.(距离左边100像素，距离最上边100像素)或者可以center center
- Border=像素 边框( 3px dashed red)
- Border-style:dashed(断点线)
- border-color：red
- Border-width:3px
- Border-right 右边框
- Border-radius =20% 边框圆润度
- List-type 列表属性
- List-style:square;circle;none
- Margin(外边距)&padding(内边距)
- Margin 是元素与元素之间的距离 margin 0 auto 居中
- padding是内容与边框的距离
- Float :left; right
- Clear :left;none;right;both
- Left:清除左侧的浮动（左侧不能有浮动的元素）q1
- right：清除右侧浮动
- None：
- both：
- Display
- Display:none
- Display:block（块）
- Display:inline(内连)
- Display:inline-block(可以有内连标签并排显示，也有块标签可以设长宽)
- Position
- Position:fixed 固定位置
- Position: relative相对定位
- 参照物是原来自己的位置
- 原来的物理的位置仍然存在
- Position:absolute
- 参照物是body
- 原来的物理位置不存在了
- Position:static 默认，原文档流
只有块级标签才可以调宽高：
- Width 款
- Heigh 高
