CSS学习笔记(详细)

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">p0p>
<p>p1p>       //在这个类的同层下面一个标签找到p标签
		
/*4.通用选择器*/
.active~p{
		
}
<p class="active">p0p>
<p>p1p> 
<p>p2p>    //在这个类下面的所有同层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 设置背景透明度

动画

多在网上找,仅作了解即可

你可能感兴趣的:(css)