CSS3
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
结构
可以像这样css与html不分离，在里面写css代码
这就是一个选择器，选择了所有h1标题
正确的css与html分离：
css文件中没有style标签
在html文件里链接css文件
也可以使用标签内定义style属性
优先级：（外部样式？内部样式）<行内样式
其中，
p4 内部样式和外部样式哪个优先级高取决于html文件内link语句和style语句的顺序。哪个在下面最后样式就是哪个。猜测可能css文件与html文件的关系可以类比C语言中的头文件
总体上呈现就近原则
选择器
作用是选择页面上的某一个/某一类元素
标签选择器
类选择器
可以像这样设置多个类
id选择器
注意类名和id都不能以数字开头
两个的区别在于，多个标签可以共属同一个类，但是一个id只能对应一个标签，id具有全局唯一性
不遵循就近原则，定位越精准越优先，id>class>标签
高级的
层次标签
像这样的结构，想要选中前三个，不用类标签，就用层次标签。
只能选择下面只有一个相邻兄弟
选择下面的所有弟弟，对下不对上
结构伪类选择器
带冒号的就是伪类
或
此时h1标签不上色，所有p标签也不上色
所以流程是：1.找到该p的父类2.判断p的父类的第一个元素是否为p类3.是的话，上色。不是的话，什么也不做
第二种：1.找到p的父类2.找到该父类的第二个p元素，上色。
属性选择器
标签名[要筛选出的属性]{......}
如图。a标签中带有id属性的东西 、
还可以在[ ]中指定属性值
而且这个属性值还可以用正则表达式。更加牛逼了
下面的例子用不用引号都无所谓
注意符号为*=
href以http开头，符号^=
href属性以pdf结尾，符号$=
其实span跟一个自定义标签没啥差，毕竟起作用的是id。只是我们约定俗成使用span来干这些事
还可以有俩。一个中文字体，一个英文字体
最后一般会这样合并。顺序：斜体、粗体、大小、字体
文本居中居左居右
首行缩进2个字
类似行间距
一般这两个配对出现
上中下划线
去掉a标签默认的下划线
关于伪类
鼠标按住不释放的状态
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<a href="#">办公</a>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
#nav{
width: 300px;
background-color:rgb(211, 206, 218)
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: rgb(223, 110, 82) url(C:\\Users\\17765\\Desktop\\a.jpg) 270px 10px no-repeat;
}
ul li{
line-height: 30px;
color: rgb(180, 110, 5);
list-style:armenian;
background:url(C:\\Users\\17765\\Desktop\\a.jpg) o-repeat ;
}
ul li a{
text-decoration: none;
}
a:hover{
color: rgb(255, 0, 0);
} 
要调这些东西的背景大小，只需要把它们都括在一个div标签，调节div的大小就行
有点那种创建一个空的gameobject父对象来管理的感觉了
加入背景图片的方法
默认全部平铺
水平平铺
实现红框右下角的箭头
往往会初始化内外边距=0 。可以直接*{ }通配符操作
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="CSS\\style.css">
</head>
<body>
<div id="app">
<h2>会员登陆</h2>
<form action="#" >
<div>
<span> 用户名：<input type="text"></span>
</div>
<div>
<span> 密 码：<input type="password"></span>
</div>
<div>
<span> 年 龄：<input type="text"></span>
</div>
</form>
</div>
</body>
</html>*{
/* 初始化 */
margin: 0;
border: 0;
}
h2{
/* 调整行高、剧中、字体大小 */
line-height: 30px;
text-align: center;
font-size: 20px;
}
div{
/* 块居中 */
margin: 0 auto;
}
#app{
/*
设置块属性
块的宽度、块的边框、块的背景色
*/
width:300px;
/* 边框大小、边框是实线（solid）还是虚线（dashed）、边框颜色 */
border: 1px solid rgb(4, 52, 100);
background-color:rgb(188, 205, 221);
}
form div span input{
/* 设置输入框的边框 */
border: 2px solid rgb(3, 36, 70);
/* 设置输入框盒子的外边距，让输入框之间间隔大一些 */
margin :10px;
}
上右下左顺时针排列
使用的前提是，外面得是个块元素，且块元素得有大小
圆角
阴影
也可以用来发光
关于图片居中
法一：使用display:block;+margin : 0 auto;
可以加在CSS代码
<body>
<img src="C:\\Users\\17765\\Desktop\\a.png" alt="" >
</body>img{
display: block;
margin:0 auto;
border-radius: 100%;
}法二：text-align+margin: 0 auto;
<body>
<div>
<img src="C:\\Users\\17765\\Desktop\\a.png" alt="" >
</div>
</body>img{
border-radius: 100%;
}
div{
text-align: center;
margin: 0 auto;
}由此可见margin: 0 auto;与text-align的区别。
前者是让一个模块相对于页面居中。后者是让一个模块内的东西相对于模块居中。所以第一种方法是用display: block;直接把img当成了一个块，第二个方法是把img当成了块里的一员，所以需要先居中块，再居中img。
display
<body>
<div>div块元素</div>
<span>span行内元素
<br>
haha
</span>
</body>div{
background-color: azure;
width: 100px;
height: 100px;
/* 转化成了行内元素 */
display:inline;
}
span{
background-color:aquamarine;
width: 100px;
height: 100px;
/* 转化成了块元素 */
display: block;
}
同时也可以既是行内元素，又是块元素
*{
border: 0px;
margin: 0px;
}
div{
background-color: azure;
width: 100px;
height: 100px;
/* 转化成了行内元素 */
display:inline-block;
}
span{
background-color:aquamarine;
width: 100px;
height: 100px;
/* 转化成了块元素 */
display: inline-block;
}还有一个属性是none，可以让他消失
float
感受一下浮↓与不浮↑的差别
<body>
<div>
<div>
<img src="C:\\Users\\17765\\Desktop\\qq.png" alt="">
</div>
<ul>
<li><a href="#">功能特权</a></li>
<li><a href="#">游戏特权</a></li>
<li><a href="#">生活特权</a></li>
<li><a href="#">会员活动</a></li>
<li><a href="#">成长体系</a></li>
<li><a href="#">年费专区</a></li>
<li><a href="#">超级会员</a></li>
</ul>
</div>
</body>*{
margin: 0;
}
div{
background-color:rgb(49, 45, 40);
display: inline-block;
}
a{
text-decoration: none;
color: white;
}
ul{
padding: 0;
background-color:rgb(49, 45, 40);
display: inline-block;
}
ul li{
list-style: none;
margin: 20px;
float: left;
}注意，float和display效果似乎不能兼用如果要用float必须默认display类型为block
浮动其实就是把该块所在文档流空间释放
一开始是这样
给粉块加上float
会变成这样
这是为啥捏？
相当于第一个div浮动后，它的文档流空间就被清楚了，于是第二个div就成为了大div的第一个孩子。就是说这两个重叠了
如果两个都加上float，那就浮一起去了。
类比于图层概念。浮动就是相当于把这个东西所在的图层的这个东西的空间清除，重新排布图层内的东西，并把这个东西移动到最上面的图层上。
但是浮动也会带来问题。
比如说这样，本来希望文字依然是在图片下方的区域，可是文字也因为图片浮走了而飘上来了。
这时候在不想浮的东西上写一个清除浮动就行
由于浮动的原理是释放文档流空间，故而浮动还会导致父元素的空间塌陷
解决方法：
1.使用overflow
2.多加一个空div
3.也可以用伪类解决，这样更显清晰
定位
分为相对定位和绝对定位。还涉及z-index层级
相对定位不比浮动，仍然在标准文档流中
*{
margin: 10px;
padding:5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #000;
}
#first{
border: 1px dashed blue;
/* 相对定位 */
position: relative;
/* 距离top/left多少，不是往 */
top: -50px;
left: 20px;
}
#second{
border: 1px dashed red;
}
#third{
border: 1px dashed green;
}<body>
<div id="father">
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
</div>
</body>练习
<body>
<div id="father">
<div id="block1" class="block">
<a href="#">超链接1</a>
</div>
<div id="block2" class="block">
<a href="#">超链接2</a>
</div>
<div id="block3" class="block">
<a href="#">超链接3</a>
</div>
<div id="block4" class="block">
<a href="#">超链接4</a>
</div>
<div id="block5" class="block">
<a href="#">超链接5</a>
</div>
</div>
</body>*{
margin: 0;
}
#father{
margin: 10px;
width: 320px;
height: 320px;
border: 1px solid brown;
}
a{
text-decoration: none;
color:white;
line-height: 100px;
}
.block{
width: 100px;
height: 100px;
background-color:pink;
text-align: center;
position: relative;
left: 10px;
top:10px;
}
.block:hover{
background-color:blue;
}
#block2{
top:-90px;
left:200px;
}
#block3{
top: -90px;
left: 105px;
}
#block4{
top: -90px;
}
#block5{
top: -190px;
left: 200px;
}绝对定位：
1.如果元素有定位的父级元素（多用这个）
相对于父级元素偏移定位
2.如果元素没有定位的父级元素
相对于浏览器边框定位，就是说拖动浏览器边框，它里浏览器边框的位置不变
固定定位
无论如何都在那个位置，不会相对浏览器
淘宝那种上下滚动右边不动的侧边栏就是这种
z-index
就是图层
数字越大越上面，越小越底下
透明度
扫一扫
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
