第三次作业

最新推荐文章于 2024-11-14 00:00:11 发布

m0_73967576

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量37

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_73967576/article/details/134583721

版权

CSS
分为内嵌外链	我们通常用外链
body里divdiv然后在head里用link rel="stylesheet"href="./test.css
test.css里直接用div写	div{}
内嵌：/写css样式/如style
/选择器{ /如div{
div{ （全选为div的）	标签选择器
.class名 (只选其中一小类）	类选择器
#id名	id选择器
*{ （全部标签）	通配符选择器
包含选择器
如：.uli>li	子代选择器（只能选到儿子）
如：.uli li	后代选择器（儿子孙子都能选到）
复合选择器
如：p，（逗号) .div{	俩个大类一起选中
如：input[type=url](方括号里写属性)	属性选择器
如：input[type^="pa"	以pa开头
如：input[type$="l"	以l结尾
如：input[type*="a"	是属性中包含a的
伪类选择器
hover（a：hover{）	悬停鼠标放在标签上的时候
active	激活鼠标按下不松时
focus	某个标签获得焦点时的样式
ul li:nth-child( ){	找某某的第几个孩子（最初的顺序）
ul li:nth-of-type() {	找ul li元素的排序的孩子
ul li:nth-child(2n-1) {	找第奇数个孩子
伪元素选择器
ul li::before { content: "666"; }	在之前加上666
ul li::after { content: "666"; }	在之后加上666
p::selection { background-color: pink; }	鼠标选中部分背景颜色
标签选择器 0001
class选择器 0010
id选择器 0100
伪类选择器 0010
伪元素选择器0001
包含选择器权重之和
属性选择器 0010
内联样式 1000
CSS字体样式
style（在head里)	标签选择器（里边用div）
font-style：italic	字体是否倾斜
font-weight：400	字体粗细（400正常800加粗）
font-size：10px	字体大小（单位px）
font-family：“微软雅黑”	字体样式
font连写600 italic 29px“雅黑”	顺序固定
text-indent：28px 用2em做单位（自适应）	首行缩进（大小根据size改变) p{
text-align：center	文本水平位置 div{
line-height：50px	行高（平分）
background-color	背景颜色div{
text-decoration：none	删除下划线
text-decoration：line-through	网页字上的删除线
CSS颜色样式
、。
#fff	（二进制三原色）
rgb（，，）	调色板三原色
rgba	透明度（最后一位0~1）
div{opacity：	背景透明度
列表
li {
list-style-type: none;	把无序列表前面的原点删除
list-style-position: inside;	点在里面
background-image: url(../	背景图片的引入
background-repeat: repeat-y;	背景图片不重复
background-position: left top	定位
background-attachment: fixed;	背景图定死在最底层的人
background-size: cover;	强行铺满
div { direction: rtl; }	从右至左排列
隐藏元素
display: none;
visibility: hidden;
opacity: 1;	透明度1有0透明
元素的类型	元素：块元素、行内元素、行内快元素
块元素：默认独占一行，设置宽高、设置内外边距 div、h1~h6、p、li
行内元素：无法直接设置宽高、内外间距 a、span
行内块元素：可以直接设置宽高、不会独占一行 img、input
div {
display: inline-block;	把div设置为行类块元素
将其他元素转换为块元素 */	/* display: block; *
边框
border-width:	边框线宽度
border-style: double;/dotted	边框样式双线条/点状
border-color: black;	边框颜色
border: 1px solid red;	连写顺序
border-radius: 50%;或者用像素	边框弧度
文本域
textarea {
width: 300px;
height: 70px;
resize: none;	文本域用户不可更改
}
div {
width: 300px;
height: 300px;
background-color: pink;
cursor: cell;	光标放置在此区域改变样式
}
定位
<style>
.father {
position: relative;	此处父类选择器要相对定位
width: 900px;	相对于父亲做定位
height: 400px;
background-color: aqua;
}
.son1 {
position: absolute;	儿子要绝对定位
top: 200px;
right: 0px;
z-index: 1;	优先显示
background-color: blue;
}
.son2 {
position: absolute;
top: 150px;
right: 0px;
background-color:blueviolet;
}
.son {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
</div>
固定定位
div {
position: fixed;
粘性定位	（一个导航栏那样的）
.posi {	class命名
position: sticky;