CSS
1.CSS四种样式
内部
<!--
<style>
h1{
color:red;
}
</style>
-->
外联,链接式
• <linkrel="stylesheet"href="CSS/style.css">
行内
• <h1style="color:green">Helloworld</h1>
外部导入式
<style>
@import url("CSS/style.css");
</style>
2.选择器
- 标签选择器
h1{
color:#123414;
}
- 类选择器
.qin{
color:red;
}
<h1class="qin">Helloworld</h1>
- ID选择器
#qin{
color:red;
}
<h1id="qin">Helloworld</h1>
- 优先级
优先级 ID>类>标签
3.层级选择器
- 后代选择器
/*body后面的背景更改*/
body p{
background:red;
}
- 子选择器
/*body后面第一代p更改 */
body>p{
background:red;
}
- 相邻兄弟选择器
/*类相邻(后面)只有一个 */
.active +p{
background:red;
}
- 通用选择器
/*通用兄弟选择器,当前选中元素的所有兄弟元素*/
.active~P{
background:red;
}
4 结构伪类选择器
-
伪类: 过滤的条件
-
ul第一个子元素和最后一个子元素
<style>
ul li:first-child{
background:red;
}
ul li:last-child{
background:red;
}
</style>
- 选中p:定位到父元素,选择当前的第一个元素
/*:伪类定位到父类,选择当前第一个元素,并且是当前元素(此处为p)才生效,根据顺序来选*/
p:nth-child(1){
background:red;
}
/*:伪类定位到父类,选择此类型的第二个元素,根据类型来选择*/
p:nth-of-type(2){
background:red;
}
/*每一个div的input标签*/
div:nth-of-type(1) input{
}
5.属性选择器
- 存在id属性的元素 a[]{}
/*a标签中带有id的,正则匹配,属性名=属性值id为first的*/
a[id=first]{
background:yellow;
}
/*=绝对等于
*=是包含这个元素
^=开头
$=结尾
*/
a[class*="links"]{
background:yellow;
}
/*以http开头的*/
a[href^="http"]{
background:yellow;
}
/*以http结尾的*/
a[href$="http"]{
background:yellow;
}
文本样式
1.字体样式
font-famliy:楷体,其他英文字体;字体
font-size:em px 大小
font-weight 200 粗细
color 颜色
font:(风格)oblique (粗细)bloder (大小)12px (字体)"斜体"
2.文本样式
text-align:center 排版
line-height:300px 行高
text-indent:2em 首行缩进
text-decoration :none 下划线
vertical-align:middle 文本图片水平对齐
3.超链接伪类
a:hove{
/*鼠标悬浮*/
font-size:50px;
color:green;
}
a:active{
/*鼠标按住为释放*/
color:green;
}
a:visited{
/*点击后颜色*/
}
4.列表
ul li{
height:30px;
list-style:none;/*无样式*/
}
5.背景图片
div{
border:1px solid red;/*大小 边框样式 颜色*/
background-image:url(".jpg")/*图片,默认平铺*/
background-repeat:repeat-x /*只水平平铺*/
background-repeat:no-repeat /*不平铺*/
background-postion:300px 200px /*位置*/
background: red url("") 270px 10px no-repeat/* 颜色 图片 图片位置 平铺方式*/
}
6.渐变
<style>
body{
background-image:linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
}
</style>
7.盒子模型
- 什么是盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ueAjtdZQ-1661180821172)(C:\Users\程速琦\AppData\Roaming\Typora\typora-user-images\image-20220222221054093.png)]
margin:外边距
padding:内边距
border:边框
- 边框
<style>
body{
margin:0px auto/*外边距为0,上下为0 左右自动对齐*/ 作用居中元素
padding:0px 0 0 0;/*上下 左右*/
}
</style>
/*居中适用情况*/
margin:0 auto 块元素 ,块元素有固定宽度,并且内部元素不会自动居中,需要套一层div,div居中,
-
盒子多大
margin+border+padding+内容宽度
8 .圆角边框和阴影
border-radius:10px;/*边框角*/
/*需要考虑宽高才能设置好一个半圆和扇形*/
box-shadow:10px 10px 1px yellow;/*盒子阴影 */
位置
- 标准文档流
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hpePiqIk-1661180821173)(C:\Users\程速琦\AppData\Roaming\Typora\typora-user-images\image-20220223145603031.png)]
-
块级元素 :独占一行
-
h1-h6 p div 列表。。。
-
行内元素:不独占一行
-
span a img strong。。。
-
块级元素可以包含行内元素,反之不行
1.display,在标准文档流内
block 块元素
inline 行内元素
inline-block 是块元素但可以内联,在一行
none
2.float,脱离标准文档流
/*浮动*/
float right /*左右浮动脱离文本流*/
float left
clear:both 关闭浮动,又变回块元素
3.父级边框浮动塌陷
-
浮动会使元素脱离父级边框,导致父级元素无内容塌陷
-
浮动
-
clear:left 清除左侧浮动,如果左侧有就到下一行 clear:right清除右侧浮动 clear:both清除左右两侧浮动 clear:none不清除浮动 如果有浮动则到一行
1.解决办法
- 设置固定的父级高度
2.解决办法
- 内部设置一个空的div,清除浮动,用来撑开父级div
<div>
<img>/*浮动元素*/
<img>/*浮动元素*/
<div class="clear"><div>/*清除浮动*/
<div>
.clear{
clear:both;
margin:0;
padding:0;
}
3.解决办法
-
overflow
overflow:hidden 超出部分隐藏 overflow:socrll 超出部分形成滚动条
-
给父级元素添加overlow属性,因为父级元素没有高度,所以高度是由内部元素确定的
4.解决办法
- 伪类,可以避免空的div
#father:after{
/*添加一个伪类,在父级元素后执行,模拟添加一个空的div*/
content:''
display:block;
clear:both;
}
4.定位
- 相对定位
- 绝对定位
/*相对定位,相对于原来的位置进行定位*/
/*相对原来位置移动,原来位置保留,仍在文档流之内,不会塌陷*/
postion:relative;
top:-20px;//距离上面减少20个像素
left:-20px;//距离左面减少20个像素
bottom:-20px;
right:-20px;
/*绝对定位,没有父级元素的前提下,基于浏览器定位*/
/*父级元素存在定位,通常会相对父级定位*/
/*可以移出父级范围内?*/
position:absolute;
top:30px;//距离父级,或者浏览器顶部30px
right:-30px;
/*固定定位,位置在浏览器位置不变*/
potion:fixed;
right:0;
5.z-index
- 相当于图层
/*绝对定位时,会重叠*/
z-index:0;//默认为0,层级越高越在上层,最高无限
opacity:0.5;背景透明度
fiilter:alpha(opacity=50);早期透明度
动画
Canvas动画
关键帧动画
js动画,等等
多浏览器适配。
了解即可