爱站程序员基地Css
- 一、css定义
- 二、css语法
- 三、三样式
- 四、选择器
- 五、Css的核心属性
- 六、CSS的浮动
- 七、文本属性
- 八 、背景图片位置设置
- 九、元素类型
- 十、定位
- 十一、盒子阴影
- 十二、动画
一、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>
