CSS-狂神笔记
CSS：
一、简单了解
- CSS选择器，美化网页（美化文字，阴影，超链接，列表美化，渐变），盒子模型，网页动画。
<style>
h1{
color:red;
}
style>
语法：
选择器{
声明1；
声明2；
}
3. 外部样式的两种写法
链接式：
导入式：
二、选择器
作用：选择页面上的某一个或者某一类元素
2.1 基本选择器
1.标签选择器
会选择页面上所有的这个标签的元素
2.类选择器
类选择器的格式 .class的名称{
3.id选择器
id必须保证全局唯一，不遵循就近原则
<style>
#miao{
color:red;
}
style>
<h1 id="miao">标题1h1>
2.2 层次选择器
1.后代选择器：在某个元素的后面
后面的都变成红色
body p{
background:red;
}
2.子选择器
body后面的p标签背景变成红色
body>p{
background:red;
}
3.相邻兄弟选择器
相邻向下的
.active + p{
background:red;
}
4.通用选择器
当前选中元素的向下所有兄弟元素
.active~p{
background:red;
}
2.3 结构伪类选择器
ul的第一个元素
选中p1：定位到父元素，选择当前的第一个元素
p:nth-child{
background:red;
}
选中父元素下的p元素的第二个类型
p:nth-of-type{
background:red;
}
2.4 属性选择器
存在id属性的元素 a[]{}
a[id=first]{
background:red;
}
*=是包含
a[class*="links item"]{
background:red;
}
选中href中以http开头的元素
a[href^=http]{
background:red;
}
以。。。结尾的
a[href$=doc]{
background:yellow;
}
三、文本样式
3.1 颜色
RGB
RGBA rgba(0，255，255，0.5);
3.2 文本样式
左右居中:
text-align:left/right/center
3.3 首行缩进
text-indent：2em
行高
line-height：
text-decoration:underline //下划线
text-decoration:overline //上划线
text-decoration:line-through //中划线
3.4 阴影
text-shadow：
3.5 超链接伪类
a:hover
a:active
3.6 背景图像
background-image:url(“image/tx.jpg”);
默认是全部平铺，x方向和y方向
background-repeat：repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
箭头：
background：red url("…/images/d.gif") 270px 10px no-repeat;
3.7 渐变
网站：grabient
background-image:linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
3.8 盒子模型
margin：外边距
padding：内边距
border：边框
边框：边框的粗细，样式，颜色
<style>
h1,ul,li,a,body{
margin:0;
padding:0;
text-decoration:none;
}
#box{
width:300px;
border:1px solid red;
}
form{
background:green;
}
div:nth-of-type(1)input{
border:3px solid black;
}
div:nth-of-type(2)input{
border:3px dashed red;
}
div:nth-of-type(3)input{
border:3px solid green;
}
style>
<div id="box">
<h2>会员登陆h2>
<form action="#">
<div>
<span>用户名span>
<input type="text">
div>
<div>
<span>密码span>
<input type="text">
div>
form>
div>
外边距
border/padding: 0 0 0 0
上 右 下 左（顺时针）
border-radius: 50px; 左上 右上 右下 左下
浮动：
块级元素：独占一行
h1-h6 p div 列表
行内元素：不独占一行
span a img strong
行内元素可以被包含在块级元素中，反之不可以
display:inline-block
inline行内元素
inline-block是块元素但是可以在一行。
float:left/right/none;
clear:right; 清除右侧浮动
1.浮动元素后加空div
2.设置父元素的高度
3.overflow
4.父类添加伪类after
定位
1.绝对定位
position:absolute;
2.相对定位
position:relative;
top: -20px; 往上20px;
left:20px; 往右20px;
3.固定定位
position:fixed;
透明度
opacity:0.5;