1.快速入门
- 单独新建一个css文件
- link标签引入css样式
优势：
- 内容和变现分离
- 网页结构表现统一，可以实现复用
- 样式丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录
2.三种css导入的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门</title> <!--3.外部样式--> <link rel="stylesheet" href="./css/style.css"> <!--2.内部样式--> <style> h1{ color: blue; } </style> </head> <body> <!--1.行内样式：在标签元素中，编写一个style属性--> <h1 style="color: green">我是标题</h1> <!--优先级：就近原则--> </body> </html>
优先级：就近原则
3.css选择器
3.1三种基本选择器：
- 标签选择器
- 类选择器
- id选择器
优先级：id选择器>类选择器>标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style> /*标签选择器，会选择页面上所有的标签*/ h1{ color: green; background: aqua; border-radius: 25px; } p{ font-size: 60px; } /* 类选择器的格式 .class的名称{} 好处：可以多个标签归类，是同一个class*/ .learning{ color: red; } /*id选择器格式 #id的名称{} 好处：全局唯一 */ #good{ color: blueviolet; } </style> </head> <body> <!-- 1.基本选择器： 1.标签选择器 2.类选择器 3.id选择器 优先级（不遵循就近原则）：id选择器>class选择器>标签选择器 --> <h1 class="learning">java</h1> <h1 class="learning">java</h1> <h1 id="good">java</h1> <p class="learning">java</p> <p>java</p> <p>java</p> </body> </html>
3.2层次选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 通用兄弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style> /*p{ background: blueviolet; }*/ /* 后代选择器格式 标签 标签{} */ /*body p{ background: blueviolet; }*/ /*子代选择器格式 标签>标签{} */ /*body>p{ background: red; }*/ /*相邻兄弟选择器格式 .class的名称+（同辈）标签{} */ /*.active+p{ background: blueviolet; }*/ /*通用兄弟选择器格式 .class的名称~同辈标签{}*/ .active~p{ background: blueviolet; } </style> </head> <body> <!-- 层次选择器： 1.后代选择器：后面所有标签 2.子选择器:后面一代的标签 3.相邻兄弟选择器：同辈,对下不对上，只有一个 4.通用兄弟选择器:同辈，对下不对上，可以多个 --> <p>p1</p> <p class="active">p2</p> <p>p3</p> <p>p4</p> <ul> <li> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li> </ul> <p>p5</p> </body> </html>
3.3结构伪类选择器
<style> ul li:first-child{ background: blueviolet; } ul li:last-child{ background: red; } /*选中当前p元素到父级元素，选中父级元素的第二个，并且是当前元素才生效*/ p:nth-child(2){ } /*选中父元素下的p元素的第二个*/ p:nth-of-type(2){ } </style>
伪类：带有：
3.4属性选择器（重要）
1.标签[属性名]
2.标签[属性名=属性值]
=绝对等于
*=包含
^=开头
$结尾
4.属性
4.1字体样式
font-family 字体
font-size 字体大小
font-weight 字体粗细
4.2文本样式
text-align 对齐方式
text-indent 首行缩进
text-decoration 上中下画线
text-shadow 阴影
height 块的高度
line-height 行高
4.3列表样式
list-style
none 去掉无序列表圆点，有序列表数字
circle 空心圆
decimal 数字
square 正方形
4.4背景
background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺方式
background-positon 背景位置
background-image:linear-gradient:背景渐变
4.5盒子模型
margin 外边距
border 边框
border-radius 圆角边框
padding 内边距
4.6display和浮动
display:方向不可控制
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联在一行，也是一种实现行内元素排列的方式
float:left 浮动起来会脱离标准文档流，所以要解决父级边框塌陷问题
4.7父级边框塌陷问题
解决方案：
1.设置父级元素的高度，不推荐
2. 浮动元素后面增加一个空的div标签， clear:both 清除浮动
3.在父级元素中增加一个overflow:hidden(父级元素尺寸是子级元素称起来的)
4.父级添加一个伪类：after {
content:' ';
display:block;
clear:both;
}
4.8定位
相对定位； 相对原来的位置进行定位的偏移，仍然在标准文档流中，原来的位置会被保留
position:relative;
top,letf,right,bottom
绝对定位；不在标准文档流中，原来的位置不保留，相对于浏览器或者父级元素的定位
position:absolute;
top...
固定定位；直接写死在页面具体位置
position:fixed;
z-index；图层显示级别，默认最低0（opacity:0.5背景透明度）