一、css定义
1.1
css：层叠样式表
二、css语法
2.1
选择{声明，属性}
选择{属性:属性值;属性:属性值…}
三、三样式
3.1
内联样式表
使用方法：
在div标签内直接定义属性
stype={属性:属性值;属性:属性值…}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 内联样式，选择，属性，属性值 -->
<div style="width: 200px;height: 100px;background-color: #6495ED;">
今天是懵逼的一天
</div>
</body>
</html>
3.2
内部样式表
使用方法：
在div标签内定义一个id=“name”
在head标签内写入styple标签
#name{属性:属性值;属性:属性值…}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--内部样式，#选择id开头 {属性：属性值；属性：属性值；属性：属性值} -->
<style type="text/css">
#neibu{
width: 300px;
height: 200px;
background-color: #00FFFF;
}
</style>
</head>
<body>
<!-- 内联样式 -->
<div id="neibu">
今天是懵逼的一天
</div>
</body>
</html>
3.3
外部样式表
使用方法：
使用link元素导入外部样式表时，需将该元素写在文 档头部，即与之间。
rel：用于定义文档关联，表示关联样式表；
type：定义文档类型；
div{
width: 300px;
height: 300px;
background: green;
}
然后回到原编辑文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--外部样式、导入css里的文件 -->
<link rel="stylesheet" type="text/css" href="../css/css1.css"/>
</head>
<body>
<div>
今天是懵逼的一天
</div>
</body>
</html>
四、选择器
4.1
id选择器
使用方法：
创建ddiv是给id指定一个名
在head标签内使用 stype,在stype标签中写入
以#id开头作为选择，{属性：属性值；属性：属性值}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 这里是注释，选择id给于属性配置 ,设置宽度为100像素，高度为200像素，背景色为绿色*/
#neibu {
width: 100px;
height: 200px;
background-color: #7FFF00;
}
</style>
</head>
<body>
<div id="neibu">
今天是懵逼的一天
</div>
</body>
</html>
4.2
class类选择器
使用方法：
创建ddiv是给class指定一个名
在head标签内使用 stype,在stype标签中写入
以.name开头作为选择，{属性：属性值；属性：属性值}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.neibu {
width: 100px;
height: 200px;
background-color: #7FFF00;
}
</style>
</head>
<body>
<div class="neibu">
今天是懵逼的一天
</div>
</body>
</html>
4.3
群组选择器
使用方法：
创建div是给class指定一个名
在head标签内使用 stype,在stype标签中写入
以.name开头用逗号风格所有选择，作为选择，{属性：属性值；属性：属性值}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.neibu{
width: 100px;
height: 200px;
background-color: #7FFF00;
}
</style>
</head>
<body>
<div class="neibu">
今天是懵逼的一天
</div>
<p>learning</p>
<div class="neibu">
继续苦逼的学习
</div>
</body>
</html>
4.4
通配符选择器
使用方法：
在head标签内使用 stype,在stype标签中写入
以匹配的所有元素作为选择，{属性：属性值；属性：属性值}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 匹配所有元素 */
*{
width: 100px;
height: 200px;
background-color: #7FFF00;
}
</style>
</head>
<body>
<div class="neibu">
今天是懵逼的一天
</div>
<div >
继续苦逼的学习
</div>
</body>
</html>
4.5
包含选择器
使用方法：
选择父类的所有子类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div p{
width: 100px;
height: 200px;
background-color: #7FFF00;
}
/* li{
width: 100px;
height: 200px;
background-color: #7FFF00; */
}
</style>
</head>
<body>
<p>ww</p>
<div>
<ul>
<li>今天</li>
<li>明天</li>
<li>后天</li>
<li>明后天</li>
<p>额</p>
</ul>
</div>
</body>
</html>
4.6
链接样式
a:link{color: aqua;} 还未点击的样式
a:visited{color: blueviolet;} 已点击后的样式
a:hover{color: #00FFFF;} 鼠标停留时的样式
a:active{color: cornflowerblue;} 鼠标点击是的样式
4.7
权重
css中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型选择符的权重为0001 a p div span form … 1
class选择符的权重为0010 .class 10
id选择符的权重为0100 # 100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0010
包含选择符的权重：为包含选择符的权重之和
内联样式的权重为1000
继承样式的权重为0000
注：如果权重相同时，则执行后写的样式；
当不同选择符的样式设置有冲突的时候，高权重选择 符的样式会覆盖低权重选择符的样式。
例如：b .demo的权重是1+10=11 .demo的权重是10
所以经常会发生.demo的样式失效
*相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。
（注意：是css样式中定义该选择符的先后，而不是html中使用先后）
4.8
html的注释 <!--******注释内容++++++++++====-->
css的注释 /*-----------------注释内容--------------------*/
4.9
~：包含
^：开头
$：结尾
标签名[ 属性~=值 ]{ }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 选择器 */
li[title~='two']{
background:red ;
}
li[title^='one']{
background:red ;
}
li[title$='three$']{
background:red ;
}
</style>
</head>
<body>
<ul>
<li id="e" class="a">今天</li>
<li title="one two three" class="b" >明天</li>
<li title="one two three" class="b" >明天</li>
<li title="one two three" class="b" >明天</li>
</ul>
</body>
</html>
4.10
结构性伪类选择器
标签名：first-child：匹配子集的第一个元素
标签名：last-child：匹配子集的最后一个元素
标签名：nth-child(n)：匹配子集的第n元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li:first-child{
background: green;
}
li:last-child{
background: green;
}
li:nth-child(1){
background: red;
}
</style>
</head>
<body>
<ul>
<li>嘤嘤嘤</li>
<li>少时诵诗书</li>
<li>四isis</li>
<li>是多大的撒多</li>
<li>dark居然</li>
<li>发送开发商</li>
</ul>
</body>
</html>
4.11
元素：first-of-type：匹配同级兄弟元素中的第一个元素
元素：last-of-type：匹配同级兄弟元素中的最后一个元素
元素：nth-of-type(n)：匹配同类型中的第n个同级兄弟元素
4.12
元素名 > 包含的元素名{ 属性 }：层级元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul > li{
background: red;
}
</style>
</head>
<body>
<ul>
<h1>0</h1>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
4.13
前元素 + 后元素：相邻兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1 + li{
background: blueviolet;
}
</style>
</head>
<body>
<ul>
<h1>0</h1>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
五、Css的核心属性
5.1
font-size：number_px：设置字体大小
font-weight：number：设置字体加粗
font-style: italic：设置字体倾斜
text-transform: capitalize：设置全部字符中首个字母大写
text-align: center：设置文本居中
vertical-align: middle：设置文本垂直居中，在设置居中时需要设置line-height：number_px(这个高度等于父级的高度)
boder: number_px solid #color：设置边框，边框方向按时钟方向原则，可以分别设置，也可以多种设置方式，当设置两个值时则，先找自己有没有值，如果没有就去自己的对面找，如果找不到则选择右边框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a{
/* 设置高度为400像素 */
height: 400px;
width:400px;
/* 设置背景颜色 */
background-color: aquamarine;
}
p{
/* 设置字体大小为100像素 */
font-size: 20px;
/* 设置字体加粗 */
font-weight: 100;
/* 设置字体的倾斜 */
font-style: italic;
/* 设置字符颜色 */
color: #6495ED;
/* 设置字符为一行的首字母大写，capitailize整句首字母大写，lowercase小写，uppercase大写 */
text-transform: capitalize;
/* 设置符居中,靠左为left，靠右为right */
/* text-align: center; */
/* 设置文本删除线，none不设置，underling添加下划线，overline添加上划线 */
text-decoration: line-through;
/* 设置字间距,nromal正规的，inital最初的,unset不设置 */
/* letter-spacing: normal; */
/* 字符间距 */
/* word-spacing: normal; */
/* 首行缩进 */
/* text-indent: 50px; */
/* 设置字体垂直居中 */
/* display: table-cell; */
/* text-align:center; */
/* line-height:600px; */
/* vertical-align: middle; */
}
li{
/* 设置列表符号样式，disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号) */
list-style-type: circle;
/* 使用图片作为列表样式 */
/* list-style-image: url(js/11.jpg); */
/* 设置列表样式位置，outside在外面，inside在里面 */
list-style-position: outside;
/* 还可以简写 */
/* list-style: inside url(js/11.jpg) ;*/
/* 设置边框属性，高度300像素，宽度300像素
solid实线，dashed:虚线，dotted:点状线，double:双线
2px为四边线的大小，可以一一设置，按时钟方向，上又下左
当设置两个值时则，先在第二个值的对面找，如果找不到则选择右边框的值*/
width: 300px;
height: 300px;
border: solid 2px #6495ED;
}
</style>
</head>
<body>
<div id="a" class="c">
<p>hello World!</p>
</div>
<div>
<ul class="c">
<li>列一</li>
<li>列二</li>
</ul>
</div>
</body>
</html>
六、CSS的浮动
6.1
float：left：左浮动
float：right：右浮动
clear: both：清除两边浮动
after：清除后面的浮动
before：清除前面的浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#ab{
/* width: 320px; */
height: 120px;
border: solid 2px #00FFFF;
}
#b{
width: 100px;
height: 100px;
border: solid 2px #8A2BE2;
margin: 10px 400px 10px 20px;
/* 设置右浮动 */
float: right;
}
#a{
width: 100px;
height: 100px;
border: solid 2px #8A2BE2;
margin: 10px;
/* 设置右浮动 */
float: right;
}
#e{
width: 100px;
height: 100px;
border: solid 2px #8A2BE2;
margin: 10px;
/* 设置右浮动 */
float: right;
}
#c{
width: 100px;
height: 100px;
border: solid 2px #8A2BE2;
margin: 10px;
/* 设置右浮动 */
float: right;
}
.d::after{
content: "";
clear: both;
display: block;
}
</style>
</head>
<body>
<div id="ab" class="d">
<div id="b"></div>
<div id="c"></div>
<div id="a"></div>
<div id="e"></div>
</div>
</body>
</html>
七、文本属性
7.1
文本溢出
overflow:visible默认值/hidden修剪/scroll显示滚动条
省略号设置
text-overflow:width容器宽度
text-overflow:ellipsis设置溢出的文本为省略号
注：必须是单行文本才能设置溢出
八 、背景图片位置设置
background-position:参数;水平方向属性值 垂直方向属性值;
九、元素类型
9.1
块状类型
特点：
默认独占一行
可以使用边框，定位
可以自定义宽度、高度
作为其他元素的容器
可以容纳其他内联元素和块状元素
把它比喻成盒子
9.2
内联元素
特点
不能自定义宽度和高度
始终独占一行，逐个显示
遵循盒模型基本规则，有个别属性不能正常显示
9.3
元素转变
转换成块状元素：display:block
转换成内联元素：display:inline
转换成行内块元素：display:line-block
此元素不被显示：display:none
十、定位
position定位属性
默认属性：static，不能使用left、right、top、bottom声明
相对定位：relative（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】
绝对定位：absolute相对于父级的定位，其位置相对于最近的已定位父元素而言的位置，若父级都没有定位，则以html（根元素）可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。(层叠的顺序z-index:value)
相对于浏览器定位：fixed是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#cc{
width: 400px;
height: 400px;
background: #00FFFF;
/* 相对定位 */
position: relative;
}
#aa{
width: 100px;
height: 100px;
background: #8A2BE2;
/* 绝对定位，逐级向外找父级，如果没有则使用html */
position: absolute;
/* 使用定位之后，就支持left */
left: 0;
}
#rr{
width: 100px;
height: 100px;
background: #8A2BE2;
/* 绝对定位，逐级向外找父级，如果没有则使用html */
position: absolute;
/* 使用定位之后，就支持left */
right: 0;
}
</style>
</head>
<body>
<div id="cc">
<div id="aa"></div>
<div id="rr"></div>
</div>
</body>
</html>
相对浏览器定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a{
width: 100px;
height: 300px;
border: 1px solid deeppink;
position: fixed;
left: 0;
text-align: center;
vertical-align: middle;
line-height: 300px;
margin: 100px 0 100px 0;
background-color: #FF1493;
}
#b{
width: 100px;
height: 300px;
border: 1px solid deepskyblue;
position: fixed;
right: 0;
text-align: center;
vertical-align: middle;
line-height: 300px;
margin: 100px 0 100px 0;
background-color: #FF1493;
}
#c{
height: 100px;
border: 1px solid #FF1493;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
</style>
</head>
<body>
<div id="c">
欢迎来到赌场!
</div>
<div id="a">
澳门皇家赌场
</div>
<div id="b">
美女在线发牌
</div>
</body>
</html>
十一、盒子阴影
box-shadow:水平 垂直 模糊(可选) 颜色(可选) inset阴影向内(可选)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子阴影</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border: 1px solid #00BFFF;
background-color: #00BFFF;
box-shadow: 10px 10px 10px 10px dodgerblue ;
position: absolute;
left: 400px;
top: 200px;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
十二、动画
12.1
background：background: linear-gradient()：线性渐变
background：radial-gradient()：径向渐变
background：repeating-linear-gradient()：重复渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
border: 1px solid #1E90FF;
border-radius: 10px;
/* background: linear-gradient(to right,blue,red); */
background: linear-gradient(10deg, blue, red);
}
#color_box_radius {
width: 200px;
height: 200px;
border: 1px solid #1E90FF;
border-radius: 10px;
background: radial-gradient(red, yellow, blue);
}
#repeat {
width: 200px;
height: 200px;
border: 1px solid #1E90FF;
border-radius: 10px;
background: repeating-linear-gradient(red, yellow, blue);
}
</style>
</head>
<body>
<div id="box"></div>
<div id="color_box_radius"></div>
<div id="repeat"></div>
</body>
</html>
12.2
transition-property：检索或设置对象中的参与过渡的属性
transition-duration：检索或设置对象过渡的持续时间
transition-delay：检索或设置对象延迟过渡的时间
transition-timing-function：检索或设置对象中过渡的动画类型
分为：
linear：线性过渡
ease：平滑过渡
ease-in：由慢到快
ease-out：由快到慢
ease-in-out：由慢到快再到慢
注：四种方式可以简写为一行
transform.rotate()：旋转，单位为deg(度)，turn(圈)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>180度旋转</title>
<style type="text/css">
#container {
width: 400px;
height: 400px;
border: 1px solid #00BFFF;
}
#box1 {
width: 100px;
height: 100px;
position: absolute;
background: linear-gradient(to right, red, green, yellow);
transition: all 2s ease-in;
transition-timing-function: linear;
}
</style>
</head>
<body>
<div id="container">
<div id="box1"></div>
</div>
<button id="change">走你</button>
<script type="text/javascript">
var change = document.getElementById('change')
var box1 = document.getElementById('box1')
change.onmousedown = function(){
box1.style.transform = 'rotate(180deg)'
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 方式一 */
@keyframes one_anim{
0%{
top: 0;
left: 0;
width: 100px;
height: 100px;
}
12.5%{
top: 0;
left: 0;
width: 500px;
height: 100px;
}
25%{
top: 0;
left: 400px;
width: 100px;
height: 100px;
}
37.5%{
top: 0;
left: 400px;
width: 100px;
height: 500px;
}
50%{
top: 400px;
left: 400px;
width: 100px;
height: 100px;
}
62.5%{
top: 400px;
left: 0px;
width: 400px;
height: 100px;
}
75%{
top: 400px;
left: 0px;
width: 100px;
height: 100px;
}
87.5%{
top: 0px;
left: 0px;
width: 100px;
height: 500px;
}
100%{
left: 0;
top: 0;
}
}
/* 方式二 */
@-ms-keyframes two_anim{
from{
width: 0;
}
to{
width: 400px;
}
}
#contial{
width: 500px;
height: 500px;
border: 1px solid #00BFFF;
position: relative;
}
#box{
width: 100px;
height: 100px;
background: linear-gradient(to right,red,blue,yellow);
position: absolute;
/* 动画名字 */
animation-name: one_anim;
/* 动画时长 */
animation-duration: 10s;
/* 变换速率 */
animation-timing-function: linear;
/* 动画方向 */
/* animation-direction: reverse; */
/* 重复次数 */
animation-iteration-count: 10;
}
</style>
</head>
<body>
<div id="contial">
<div id="box"></div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
