CSS3
说明 此笔记为本人学习遇见狂神说的教程学习笔记，侵删。
快速入门
html文件中
代码语言：javascript复制<!-- 规范，<style> 可以编写css的代码，每个声明，最好使用分号结尾
语法：(里面不能写html代码， 注释/**/)
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>外部引用（建议）
单独写一个.css文件，用link引入
<link rel="stylesheet" href="css/style.css">css的优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录！
css导入方式
代码语言：javascript复制h1{
/*外部样式*/
color: blue;
}<head>
<style>
h1{
/*内部样式*/
color: green;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<!--
行内样式：在标签元素内，编写一个style属性，编写样式
优先级 行内>内部>外部 （错误！）
就近原则，谁离得近就是谁，外部导入的位置 or 覆盖原则？
行内多个 ;结尾
-->
<h1 sytle="color: red">标题</h1>外部标签两种写法
链接式
代码语言：javascript复制<!--链接式-->
<link rel="stylesheet" href="css/style.css">导入式 CSS 2.1 特有
先加载网页骨架在加载美化
代码语言：javascript复制<!--导入式-->
<style>
@import url("css/style.css");
</style>选择器
选择页面上的某一个或某一类元素
基本选择器
- 标签选择器
<style>
/*标签选择器，会选择页面上所有的这个标签的元素*/
h1{
color: #123456;
background: #f98f;
/*圆角*/
border-radius: 20px;
}
p{
font-size: 80px;
}
</style>- 类 选择器 class
<style>
/*类选择器的格式， .class的名称{}
可以多个标签归类,是同一个class，可以复用跨标签
*/
.hhh{
color: aqua;
}
.www{
color: antiquewhite;
}
</style>- id选择器
<style>
/* id选择器 id全局唯一！
#id名称{}
*/
#hhh{
color: aqua;
}
</style>顺序： id > class > 标签
高级选择器
层次选择器 - 不包括自己
后代选择器：在某个元素的后面
代码语言：javascript复制body p{
background: red;
}子选择器
代码语言：javascript复制body>p{
background: green;
}相邻兄弟选择器
只有一个 相邻（向下）
代码语言：javascript复制.[class] p{
background: gold;
}通用选择器
当前元素向下的所有兄弟元素
代码语言：javascript复制.[class]~p{
background: yellow;
}结构伪类选择器
代码语言：javascript复制<style>
/*选择ul的第一个子元素*/
ul li:first-child{
background: green;
}
/*选择ul的最后一个子元素*/
ul li:last-child{
background: gold;
}
/*选择p标签，定位到其父标签，选择当前的第(x)个元素，
当该元素与设置的标签一致时，应用修改
不分类型
*/
p:nth-child(2){
background: red;
}
/*选中父元素，下的第(x)个，类型
分类型
*/
p:nth-of-type(3){
background: aqua;
}
/*经过*/
a:hover{
background: black;
}
</style>属性选择器（常用）
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*存在id属性的元素
a[id]{}
属性名，属性名 属性值（可正则）
= 绝对等于
*= 包含
^= 开头
$= 结尾
*/
a[class*="links"]{
background: green;
}
a[id=first]{
background: yellow;
}
/*选中href中以http开头*/
a[href^=a]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://livinfly.top" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">7</a>
<a href="a.jpg" class="links item">6</a>
<a href="2.png" class="links item">5</a>
<a href="abc" class="links item">4</a>
<a href="sss.doc" class="links item">3</a>
<a href="aaa.txt" class="links item last">2</a>
</p>
</body>
</html>美化网页元素
span标签：重要的字放进去（约定俗称的东西） div也类似
字体样式
代码语言：javascript复制<!--
font-family 字体（可以同时一个中文一个英文……
font-size px em 字体大小 em是字，px是像素
font-weight: bold lighter 可以直接改值 粗细
color 颜色
font: oblique bolder 16px "楷体";
-->文本样式
- 颜色
- 文本缩进
- 缩进
- 行高
- 装饰
- 文本图片居中
<!--
color
文字，#FFFFFF
RGB，RGBA（透明度 0~1）
排版
text-align: center; 居中
text-indent: 2em; 首行缩进
background 背景色
height 背景高度
line-height 行高
想要文字上下居中，行高与背景高度一致
text-decoration: underline; 下划线
line-through; 中划线（删除线
overline; 上划
多标签选择器
img,span{
vertical-align: middle; 竖直居中
}
-->阴影
代码语言：javascript复制/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: #ffffff 10px -10px 2px
}超链接伪类
代码语言：javascript复制a{
text-decoration: none;
color: black;
}
/*未访问*/
a:link{
color: aqua;
}
/*悬停*/
a:hover{
color: orange;
font-size: 30px;
}
/*点击*/
a:active{
color: green;
}
/*访问过*/
a:visited{
color: pink;
}列表样式
代码语言：javascript复制/*
list-style
none 去掉
circle 空心圆
decimal 数字
square 正方形
<div id="nav">
xxxxx
</div>
*/
ul li{
height: 30px;
list-sytle: none;
text-indent: 1em;
}背景
- 背景颜色
- 背景图片
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("xx.jpg");
/*默认是全部平铺*/
/*颜色 图片 图片位置 平铺方式*/
background: red url("") 270px 10px no-repeat
background-image: url("");
background-repeat: ...;
background-position: 122px 2px;
}
/*
background-repeat:repeat-x;
只在第一行平铺
repeat-y
no-repeat
*/
</style>渐变
Grabient
径向，圆形
代码语言：javascript复制background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);盒子模型
- margin：外边距
- padding：内边距
- border：边框
边框
border: 粗细 样式 颜色
body默认有默认的外边距
代码语言：javascript复制h1,ul,li,a,body{
/*相当于初始化*/
margin: 0;
padding: 0;
text-decoration: none;
}
div:nth-of-type(1) input{
}外边距与div居中
居中（要求：块元素，有固定宽度！！img需要放在div中）
margin是顺时针，只有两个时，是上下和左右
margin: 0 automargin border padding 内容宽度
圆角边框
左上开始的顺时针方向
貌似就顺着填
代码语言：javascript复制div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
/*半径，有时需要迁就长宽*/
}阴影
代码语言：javascript复制div{
box-shadow: 10px 10px 100px yellow
}浮动
标准文档流
块级元素：独占一行
代码语言：javascript复制h1~h6 p div list...行内元素：不独占一行
代码语言：javascript复制span a img strong...行内元素可以被包含在块级元素中，反之不可以。
代码语言：javascript复制<!--
display: [];
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行
none 消失
float: [];
left, right 行内左右浮动
clear: both 不贴着上一个浮动
-->父级标签塌陷问题
代码语言：javascript复制<!--
clear: [];
right 右侧不允许有浮动元素
left
both
none
-->增加父级元素高度
增加一个空的div标签，清除浮动
代码语言：javascript复制<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}overflow
代码语言：javascript复制在父级元素中增加一个 overflow: hidden;父类添加一个伪类: after
代码语言：javascript复制#father:after{
content: '';
display: block;
clear: both;
}定位
border: dashed（虚线？）
相对定位
相对于自己原来的位置偏移
position: relative；
right: 20px;
....
绝对定位
仍然基于xx定位
position: absolution
- 没有父级元素定位的前提下，相对浏览器定位
- 父级元素存在定位，会相对于父级元素进行偏移
- 在父级元素范围内移动（好像可以出去？）
绝对的，不保留原来位置。
固定定位
position: fixed;
固定定位是固定在某个地方，浏览器向下移动页面也不动；
绝对定位是会动的。
z-index
（好像）定位，浮起来，才有层级的关系
0~n级图层，覆盖的问题
z-index: 10;
不透明度
opacity: 0.5;
filter: opacity(0.5);
后记
还有CSS预处理器：
- SASS
- LESS（功能简单，效率较低，但够用）
