CSS
CSS的三种导入方式
优先级：就近原则，哪个离这个元素近就为哪个样式
/*内部样式*/
<head>
<title></title>
<style>
h1{
color:#000000;
}
</style>
</head>
/*行内样式*/
<h1 style="color:red">
我是标题
</h1>
/*外部样式*/
/*方法一：链接法*/
<link href="css目录" rel="stylesheet">
/*方法二：导入法*/
<head>
<title></title>
<style>
@import url="css目录"；
</style>
</head>
选择器
三种基本选择器：优先级：id选择器>class选择器>标签选择器
/*1.标签选择器*/
h1{
}
/*2.类选择器*/
.xxx{
}
<h1 class="xxx"></h1>
/*3.id选择器 id全局唯一*/
#xxx{
}
<h1 id="xxx"></h1>
层次选择器
/*1.后代选择器：在某个元素后面的标签*/
body p{
} //body后面的所有p标签
/*2.子选择器：在某个元素后面的一代标签*/
body>p{
} //body后面一层的p标签
/*3.相邻兄弟选择器：同一层的下一个标签*/
.active + p{
}
<p class="active">p0</p>
<p>p1</p> //在这个类的同层下面一个标签找到p标签
/*4.通用选择器*/
.active~p{
}
<p class="active">p0</p>
<p>p1</p>
<p>p2</p> //在这个类下面的所有同层p标签
结构伪类选择器
例：
ul li:first-child{
} //ul下面的第一个li
ul li:last-child{
} //ul下面的最后一个li
p:nth-child(1){
} //选中p标签的父级的第一个标签，如果是p元素生效，不是则不生效
p:nth-of-type(1){
} //选中p标签的父级的第一个p标签
a:hover{
} //鼠标在a标签上的悬浮状态
属性选择器（常用）
例：
a[id]{
} //带有id属性的a标签
a[class *="front"]{
} //class中含有front的a标签
a[href ^= http]{
} //href中以http开头的a标签
a[href $= .com]{
} //href中以.com结尾的a标签
美化网页元素
span标签：重点要显示出来的字要用span套起来
rgba:最后一个a是设置透明度，取值在0~1
样例： rgba(255,0,0,0.5)
1.字体样式
| font-family | 字体 |
|---|---|
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| color | 字体颜色 |
2.文本样式
| text-align | 排版 | left,right,center |
|---|---|---|
| text-indent | 首行缩进 | |
| height | 文本的行高 | |
| line-hight | 每行的行高 | |
| text-decoration： | 线 | overline,line-through,underline,none |
| vertical-align: | 文本图片对齐 | middle |
| text-shadow | 阴影 | 10px 10px 10px black 水平阴影的位置，垂直阴影的 位置，模糊的距离，阴影的颜色 |
3.超链接伪类
| a:hover | 鼠标悬停的时候 |
|---|---|
| a:active | 鼠标按住未释放的时候 |
| a:visited | 链接访问过的时候 |
| a:link | 链接默认的状态 |
4.列表
| list-style: | none | 去掉li前面的小圆点 |
|---|---|---|
| circle | 空心圆 | |
| decimal | 数字 | |
| square | 正方形 |
5.背景
| background-img:url("") | 插入图片默认平铺 |
|---|---|
| background-repeat | repeat-x |
| repeat-y | |
| none-repeat |
6.渐变
background-color:#FFFFFF;
background-image: linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%);
盒子模型
margin:外边距
padding:内边距
border:边框
margin:0px 0px 0px 0px; //四个变量时理应为顺序上、右、下、左
margin:0px 0px; //两个变量时顺序为上下、左右
margin:0px; //一个变量时则把四个边都统一设为值
margin:0 auto; //可以设置居中，居中条件为必须是块元素，必须有固定宽度
2.规范用div分盒子
3.圆角
border-radius 4个变量分别是左上，右上，右下，左下
4.阴影
box-shadow:100px 100px 100px red
5.浮动
块级元素：独占一行
h1~h6 p div 列表…
行内元素:不独占一行
span a img strong…
6.父级边框塌陷问题
1.增加父级元素高度
2.增加一个空的div标签，清除浮动
.clear{
clear:both;
margin:0;
padding:0;
}
<div class="clear"></div>
3.overfloat
添加overfloat:scroll;
4.父级添加一个伪类
#father:after{
content:'';
display:block;
}
定位
1.相对定位
| position: | relative | 相对于原来的位置进行偏移 |
|---|---|---|
| left | ||
| right | ||
| top | ||
| bottom |
2.绝对定位
| position: | absolute | 没有父级元素的定位则相对于浏览器定位 |
|---|---|---|
3.固定定位
| position: | fixed | 相对于页面进行定位，常用于导航栏 |
|---|---|---|
4.z-index层次
| z-index: | 0~999 | 给便签的加个z轴，类似于置于顶层或底层 |
|---|---|---|
| opacity: | 0~1 | 设置背景透明度 |
动画
多在网上找，仅作了解即可
914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
