CSS
去源码之家,门户网站去进行下载,或者使用element-ui,飞冰ice.work
目前使用Less作为css语言替代器
Cascading Style Sheet 层叠级联样式表
css的初始化:
h1,ul,li,a,body{
margin:0;
padding:0;
text-decoration:none;
}
美化网页
<head>
<!--编写CSS代码
语法:
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{ color:red; }
</style>
</head>
<body>
<h1> XXX </h1>
</body>
以上代码进行CSS与HTML分离:建立文件夹css,并建立文件style.css文件
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1> XXX </h1>
</body>
css/style.css:
/*注释*/
h1{ color:red; }
css优势:
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利于SEO(Search Engine Optimization,搜索引擎优化),容易被搜索引擎收录
CSS的导入方式
行内样式:在标签元素里面,编写该style属性,编写样式
内部样式:在head里面,编写该style属性,编写样式
外部样式:在.css文件里面,编写该style属性,编写样式
链接式:html标签:
导入式:css2.1特有的
<style> @import url("css/style.css")</style>
优先级:就近原则
选择器
作用:选择页面上的某一个或者某一类元素
基本选择器
1.标签选择器
会选择到页面所有的标签,例如:h1{ }
<head>
<style>
h1{ color:red; }
</style>
</head>
<body>
<h1> XXX </h1>
</body>
2.类选择器 class
好处:可以多个标签归类,是同一个class,可以复用;可以跨标签归类;可以进行写多个类名字例如:.class的名称{ }
<head>
<style>
.xx{ color:red; }
</style>
</head>
<body>
<h1 class="xx">X</h1>
<h1 class="xx">X</h1>
<p class="xx xx11 xx22">X</p><!--多个类名字-->
</body>
3.ID选择器
#id名称{ },ID必须保证全局唯一。
<head>
<style>
#id{ color:red; }
</style>
</head>
<body>
<h1 id="xx">X</h1>
</body>
优先级:不遵循就近原则,ID选择器 > 类选择器 > 标签选择器
层次选择器
减少id和class的使用
后代选择器
在某个元素后面
body p{ background:red } /*对body后面的所有p标签进行操作*/
<p> p </p> /*进行操作*/
<li><p> p </p> /*进行操作*/</li>
子选择器
在某个元素后面的第一代才有
body>p{ background:red } /*对body后面的所有第一级p标签进行操作*/
<p> p </p> /*进行操作*/
<li><p> p </p> /*不进行操作*/</li>
相邻兄弟选择器
向下一个同辈,进行选择
.active + p{ background:red } /*对body后面的class是active的p标签之后的一个p标签进行操作*/
<p class = "active">p</p>
<p> p </p> /*进行兄弟选择器操作*/
<p> p </p> /*不进行操作*/
<li><p> p </p> /*不进行操作*/</li>
通用选择器
向下面所有同辈,进行选择
.active ~ p{ background:red } /*对body后面的class是active的p标签之后的一个p标签进行操作*/
<p class = "active">p</p>
<p> p </p> /*进行通用选择器操作*/
<p> p </p> /*进行通用选择器操作*/
<li><p> p </p> /*不进行操作*/</li>
结构伪类选择器
伪类:条件;加一个过滤
<head>
<style>
/*ul的第一个子元素*/
ul li:first-child{ }
/*ul的最后一个子元素*/
ul li:last-child{ }
/*选择p1,定位到父元集,选择当前第一个元素
选择当前p元素的父级元素body,选中父级元素的第一个,并且是当前元素*/
p : nth-child(1){ }
/*选中父元素下的p元素的第二个,类型*/
p : nth-of-type(2){ }
/*鼠标移动到a标签进行高亮*/
a.hover{ }
</style>
</head>
<body>
<p> p1 </p> <!--body元素的第一个-->
<a href="">xx</a>
<ul>
<li><p> p </p> </li><!--ul的第一个子元素-->
<li><p> p </p> </li>
<li><p> p </p> </li>
</ul>
</body>
属性选择器*
对a标签存在id属性值为first的元素进行操作
a[id= first] { }
对a标签存在id属性的元素进行操作
a[ id ] { }
[ 属性名 ] / [ 属性名 = 属性值(正则) ]
对a标签存在class属性的元素进行操作
a[ class ] { }
对于有多个属性值则使用*=,表示只有包含这个属性值就进行操作
<!--使用a[ class *= "link" ] { } 可以对下列class包含link的元素进行操作-->
<a href="" class = "link item">xx</a>
<a href="" class = "link first">xx</a>
<!--使用a[ hred ^= http ] { } 可以对下列href以http开头的元素进行操作-->
<a href="http:xx" class = "link item">xx</a>
<a href="http:xyy" class = "link first">xx</a>
<!--使用a[ hred $= y ] { } 可以对下列href以y结尾的元素进行操作-->
<a href="http:xxy" class = "link item">xx</a>
<a href="http:xyy" class = "link first">xx</a>
美化网页元素
<span>突出文本的标签在css里面添加样式</span>
字体样式
<style>
body{
font-family: "Arial Black" ,楷体; /*字体,中文楷体,英文"Arial Black*/
color:#a13d30;
font-size:50px;
font-wright:bolder;
}
p{
font: oblique bolder 12px "楷体"
}
</style>
font-family:字体
font-size:字体大小,xxpx:xx像素,xxem:xx个缩进(两个字)大小
font-wright:字体粗细,bolder,lighter,数值
font:样式 粗细 大小 字体
文本样式
颜色
color:
单词(red),
RGB{ #FF0000,rgb( 255,0,0)},RGB:0-F
RGBA( rgba( 255, 0, 0, 0.5 ) ), RGBA的A:0-1
文本排版
位置:text-align:right,left,center
首行缩进:text-indent : 12em;
背景:background : #000000;
行高:line-height : 10px; ;和块的高度(height)一致就可以上下居中
下划线:text-decoration : underline;
中划线:text-decoration : line-through;
上划线:text-decoration : overline;
去掉a标签(超链接)的下划线:text-decoration : none;
文本对齐:vertical-align:middle;
<head><style>
img,span{
vertical-align:middle; /*center...*//*对齐要有参照物,字体对齐的参照物是img*/
}
</style></head>
<body>
<p>
<img src="xx.png" alt="">
<span>asdsd<span> <!--asdsd与img对齐-->
</p>
</body>
文本阴影
text-shadow : h-shadow v-shadow blur color
水平位置 垂直位置 模糊距离(可选) 阴影颜色 (可选)
超链接伪类
进行对超链接修饰,link–visited–hover–active 按照顺序去写
<head><style>
/*默认颜色*/
a{
text-decoration:none;
color:#000000;
}
/*未访问的状态*/
a.link{
color:blue;
}
/*已访问的状态*/
a.visited{
color:red;
}
/*鼠标悬浮颜色*/
a:hover{
color:orange;
font-size:10px;
}
/*鼠标按住未释放的状态*/
a.active{
color:green;
}
</style></head>
<body>
<p>
<a href ="#">xxx</a>
</p>
<p>
<a href ="#">
<img src="xx.png" alt=""></a>
</p>
</body>
列表
ul li { }
list-style:
- none:去掉原点
- circle:空心圆
- decimal:数字
- square:正方形
text-indent:1em
背景
div{
width:100px;
height:100px;
/*border:边框的大小 属性(实线,虚线) 颜色*/
border: 1px solid red;
/* background-image:背景是图片*/
background-image:url("xx.jpg");
/*background-repeat:平铺方式
repeat-x 水平铺 repeat-y 竖直铺
repeat 平铺(默认-重复设置图片进行铺满) no-repeat 不平铺(只有一张图片)
round 环绕*/
background-repeat:repeat-x;
/*可以进行放在一行:颜色,图片,图片位置,平铺方式*/
background:red url("xx.jpg") 20px 10px no-repeat;
}
渐变
www.grabient.com/
background-image : 径向渐变,圆形渐变
盒子模型box
margin:外边距
padding:内边距
border:边框
盒子模型尺寸计算:border+margin+padding+内容元素
边框
/*border:边框的大小 属性(实线,虚线) 颜色*/
border: 1px solid red;
border: 1px dashed black;
内外边距
margin- 外边距, border- 边框, padding- 内边距:+
top,bottom,left,right,上下左右
margin:0; //上下左右一致
margin:0 auto ; //上下一致和左右一致,在div中使用外边距进行居中,前提是块元素有固定的宽度,或者在div中设置display:block。
有时候需要在在div中将margin:0 auto和text-align:center(内联元素居中)结合,将文本居中。简单来说就是要讲元素设置为div块元素。
margin:0 0 0; //上,左右,下分别写
margin:0 0 0 0; //上,右,下,左分别写
圆角边框
div{
height:100px;
border-radius:100px;/*上下左右的半径都是100px,可以使用百分比*/
border-radius:100px 20px;/*左上右下的半径都是100px,左下右上的半径是20px*/
border-radius:100px 20px 10px 5px;/*左上,右上,右下,左下,顺时针*/
border-radius:100√2px;/*上下左右的半径都是高度的√2倍,此时为圆*/
}
圆圈: 圆角 = 半径+边框
阴影
box-shadow: 10px 10px 100px yellow /*x y 阴影半径 颜色 */
浮动
文档流
块级元素:独占一行
h1-h6,p,div,列表等等
行内元素:不独占一行
span,a,img,strong等等
行内元素可以被包含在块级元素中,反之不可以
display:设置元素状态,行内元素排列方式
- block 块级元素
- inline 行内元素
- inline-block 块元素,但是可以内联,在一行,将块元素变成行元素,使之变成一行
- none 没有
float:(left,right) : 浮动,独立于原来的背景。float的原始作用是为了实现文字环绕的作用,可以理解为部分脱离文档流。
clear:both:清除浮动效果,意味着这个盒子的顶边框将会低于
在它之前
的任何浮动盒子的底外边距
,按照标准文档流进行顺序(向下)排版。
父级边框塌陷的问题
使用float会使元素进行浮动,但是父级边框会坍塌,浮动元素不在父级边框内。
解决方法:
-
增加父级元素的高度。固定高度时有限制。
-
浮动元素增加一个空的div标签,清除浮动。代码要避免空div。
.clear{
claer:both;
margin:0;
padding:0;
}
- overflow:隐藏多余元素,在父级元素进行添加。下拉的场景避免使用。
overflow:hidden:如果有高度,则超过高度的地方直接隐藏切掉。
overflow:scroll:添加滚动条
overflow:auto
- **父类添加伪类:after。推荐使用。
/*在父类father之后操作*/
#father:after{
content:'';/*添加一个空白内容==空的div*/
display:block;/*将文本变为一个块*/
clear:both;/*清除浮动*/
}
定位
相对定位
相对于原来的位置进行移动,元素设置此属性之后仍然处于文档流中,不影响其他元素布局。保留原来的位置。
position:relative;/*上下左右*/
top:-20px;/*向上移动,相对于其原来位置的顶部,向下移动-20px*/
left:20px;/*相对于其原来位置的顶部,向左移动20px*/
bottom:10px;/*相对于其原来位置的底部,向上移动10px*/
right:10xp;
绝对定位
没有父级元素的情况下,相对于浏览器定位。相对于父级定位时,在父级元素中添加相对定位,在父级范围内移动。相对于浏览器/父级位置进行移动,元素设置此属性之后不在文档流中,原来的位置不保留。
position:absolute;/*上下左右*/
top:-20px;
right:10xp;
固定定位
position:fixed;/*导航栏*/
bottom:10px;
right:10xp;
z-index
层级概念,默认为0,要浮现设置为999层。
opacity:0.5;/*背景透明度*/
filter:Alpha(opacity=50);/*IE8之前背景透明*/
动画
使用div进行对每一帧设置。
canvas动画库