CSS
1.选择器
1.内部样式
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<body>
<h1>我是标题</h1>
<body/>
2.导入式
<!--导入式-->
写法一：
<style>
@import url("css/style.css");
</style>
*写法二：<link rel="stylesheet" href="css/style.css">
<body>
<h1>php</h1>
<body/>
1.1 基本选择器
id选择器> class 选择器 > 标签选择器
标签选择器：直接调用body下的元素
<style>
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: #a13d30;
background: #3cbda6;
border-radius: 24px;(圆角)
</style>
类选择器：自定义class类型进行调用
.自定义{
xx
}
<body>
<h1 class="自定义">标题1</h1>
</body>
id选择器
/* id选择器 : id必须保证全局唯一！
#id名称{}
优先级：
不遵循就近原则，固定的
id选择器> class 选择器 > 标签选择器
*/
class选择器： . 自定义（可用多次）
id选择器： # 自定义（只能一次，且为优先级最高）
1.2 层次选择器
1.后代选择器：xx(body)框架下同类xx§元素全部生效
body p{
background:red;
}
2.子选择器 一代：儿子 xx(body)下面的第一代元素才有效果
body>p{
...
}
3.相邻兄弟选择器：同辈 只有相邻下面的一个元素生效
只有一个 相邻（向下）
.active+p{
...
}
4.通用选择器 当前选中元素向下所有的兄弟元素
通用兄弟选择器，当前选中元素的向下所有兄弟元素
.avtive~p{
..
}
1.3 结构伪类选择器
ul li:first-child{
background: #0000FF;
}
ul li:last-child{
background: red;
}
/*选中p1:定位到父元素，选择当前第一个元素
选择当前P元素的父级元素，选中父级元素的第一个，并且是当前元素才能生效
*/
p:nth-child(1){
background: #0000FF;
}
/*选中父元素，下的p元素第二个 */
p:nth-of-type(2){
background: red;
}
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>da
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
伪类
a:hover{
background: red;
}
<a href="">伪类</a>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-utTbkV88-1644310702675)(C:\Users\Vechis\AppData\Roaming\Typora\typora-user-images\image-20220109214125697.png)]
带 ：号的 基本为伪类
1.4 属性选择器
id与class结合
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px Arial;
}
/* 属性名， 属性名 = 属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[]{}*/
/*a[id]{*/
/*background: yellow;*/
/*}*/
/*id=first的元素*/
/*a[id=first]{*/
/*background: #63ff23;*/
/*}*/
/*class 中有 links的元素*/
/*a[class*="links"]{*/
/*background: yellow;*/
/*}*/
/*!*选中href中以http开头的元素*!*/
/*a[href^=http]{*/
/*background: yellow;*/
/*}*/
a[href$=jpg]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
2.美化元素
2.1 字体样式
- font-family 字体类型
font-size 字体大小
font-style 字体风格
font-weight 字体粗细 粗到细：bolder–bold–lighter 可直接用数字 100-900之间
font 在一个声明中设置所有字体的属性 字体风格 粗细 大小 类型
例如：.l1{
font-family: "Times New Roman", 恺体;
font-size: 36px;
font-style: initial;
font-weight: 900;
}
.l2{
font: initial 800 36px 楷体;
}
代码详例：9.字体样式.html
2.2 文本样式
- 颜色 color/rgb/rgba
文本对齐 text-align:left/right/center
首行缩进 text-indent:2em
行高 line-height:25px (块元素居中文字需要)
文本装饰 text-decoration:underline/overline/line-throught/none (去除超链接下划线等应用)
图文同位 vertical-align:middle：top/bottom （记下）
代码详例：10.文本样式.html
2.3 文本阴影及超链接伪类
阴影： text-shadow: skyblue -10px -10px 2px;
/*阴影： 颜色 y轴 x轴 阴影大小（半径）*/
超链接伪类：xx:hover{color...} /*鼠标悬浮的状态 注意不是 . 而是： */
xx:active{color,..} /*鼠标按住未释放的状态*/
代码详例：11
2.4 列表样式
列表样式即 ul,li
- list-style
none : 无
circle： 空心园
decimal：数字
square: 方块
2.5 背景图片样式
background-repeat: no-repeat 背景图像将仅显示一次
-
repeat-y 背景图像将在垂直方向重复
-
repeat 是默认属性，使背景图像在水平和垂直方向上重复
2.6 渐变
参考https://www.grabient.com/
body{
background-color: #0093E9;
background-image: linear-gradient(93deg, #972862 0%, #80D0C7 63%);
}
3.Box模型
由margin(外边距)、border(边框)、padding(内边距)、元素组成。
因body总有一个默认的外边距，一般开发会将各种元素xx的margin,padding设为0.
常见操作：h1,ul,li,a,body{
margin=0
padding=0
text-decoration:none;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PIu4DY6S-1644310702677)(C:\Users\800047\AppData\Roaming\Typora\typora-user-images\image-20220207110942234.png)]
3.1 盒子模型
新建盒子
body{
<div id="box">
<div>第一个盒子</div>
<div>第二个盒子</div>
<div>第三个盒子</div>
</div>
}
<style>
body{
margin=0;
padding=0;
}
div:nth-of-type(1){
border:1px solid red;
}
div2,3....
</style>
3.2 边框使用
边框：border-color/style/xx px
其中border-style:solid 实线 / dashed 虚线
一般复写border: 颜色 样式 粗细。
.l1{
border:red solid 2px;
等同于
border-color=red;
border-style=solid;...
}
3.3 内外边距及div居中
一般在h5页面内格式为:
<body>
<div>
.....外加层div标签 内容再里面写 方便进行居中等操作。
</div>
</body>
因内边距padding 外边距 margin 基本在一开始设置为0
body{
padding=0; margin=0;
}
重点在于margin外边距的居中使用（margin设置为顺时针方向）
margin：0px 0px 0px 0px；或者margin:0px auto;
3.4 border-redius
盒子为4直角，border-radius可用于做四角的角度设置而成为扇形，圆形等特殊图像
同margin顺时针设置各个方位数值，从左上开始改变。
div{
width: 50px;
height: 50px;
border: 10px solid red;
border-radius:0px 0px 0px 100px;
}
3.5 圆角边框
border-radius的简写：0px 20px 0px 20px == 0px 20px 同理 20px 0px 20px 0px == 20px 0px;
例：正方形头像变化为圆形
<body>
<img src="images/tx.jpg" alt="#">
</body>
<style>
img{
border-radius: 25px;
}
</style>
3.6 盒子阴影
box-shadow
box-shadow: 10px 10px 1px skyblue;
/*box-shadow:x轴偏移 y轴偏移 阴影 面积 阴影颜色 */
补充： /*margin:0 auto;居中的要求：要求块元素有固定的宽度*/
<div style="width: 100px">
<img src="images/xx.jpg" alt="">
</div>
4.浮动
首先得了解行内元素与块元素
行内元素有：
span,img ,a,input,textarea
b,br, select ,label ,map ,strong
行内元素特点：
（1）设置width无效
（2）设置height无效，但是可以设置line-height；
（3）margin只有左右有效，上下无效；
（4）padding和margin一样只有左右有效，上下无效，但是不一样的是元素的范围增大了，但是对周围的元素没有影响；
块级元素有：
buttom,div,dl,dt,form表单
h1 ,h2 ,h3 , h4 ,h5标题
hr ,li ,ul ,table系列
4.1 diaplay
通过display属性将块级元素(div,ul,li…)和行内元素(span,img…)进行相互转换。
display: block 块元素 / inline 行内元素 / inlne-block 块元素，内联在一行 / none 消失
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid firebrick;
}
span{
width: 100px;
height: 100px;
border: 10px solid rebeccapurple;
display: inline-block;
}
</style>
也是实现行内元素排列的方式，但更多用float
4.2 float
为了测试能看出效果，一般设置为一下：
div{
margin:10px;/*外边距 有点外边距看效果*/
padding: 5px; /*内边距 每个元素间距5px */
}
左右浮动 float:right/left .两个元素在父级框内向左和向右浮动。
.l1{
border: 2px dashed darkblue;
display: inline-block;
box-radius: 50px;
float: right;}
.l2{
border: 2px dashed rosybrown;
display: inline-block;
float: left;}
取消浮动：clear: right 不允许有右侧的浮动 / left / both 不允许有两侧浮动
4.3 overfloaw
4.4 父级边框塌陷问题
在父级边框内任意浮动的元素可能会造成父级边框塌陷的问题
解决的4种办法,最好和常用为第一种
2.增加父级元素高度
#father{
border:10px solid red;
height:80000px;
}
增加一个空的div标签，清除浮动
5.定位
5.1 相对定位
position：relative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px; /*字体大小*/
line-height: 25px;/*字体行高*/
}
#father{
border: 2px solid darkred;
padding: 0;
}
#first{
border: 2px solid darkorange;
background-color: #858585;
position: relative; //相对定位
left: 20px;
}
#second{
border: 2px solid darkmagenta;
background-color: #986b0d;
position: relative;
right: 20px;
}
#third{
border: 2px solid darkcyan;
background-color: #fddc6c;
position: relative;
right: 40px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
5.2 固定定位
position：fixed 一般用于回到顶栏的箭头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background-color: #fad65c;
position: fixed; //固定定位
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<a name="top">这是顶部</a>
<div>div1</div>
<div><a href="#top">回到顶部</a></div>
</body>
</html>
5.3 绝对定位
position: absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px; /*字体大小*/
line-height: 25px;/*字体行高*/
}
#father{
border: 2px solid darkred;
padding: 0;
position: relative;
}
#first{
border: 2px solid darkorange;
background-color: #858585;
position: relative;
left: 20px;
}
#second{
border: 2px solid darkmagenta;
background-color: #986b0d;
position: absolute; //绝对定位
right: 20px;
}
#third{
border: 2px solid darkcyan;
background-color: #fddc6c;
position: relative;
right: 40px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
5.4 z-index层级及透明的度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- img,span{-->
<!-- vertical-align: middle;-->
<!-- } 文字居中在图片一侧-->
<link rel="stylesheet" href="22.z-inddex.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/bg.jpg" alt=""></li>
<li class="TipText">学习php，任重道远</li>
<li class="tipBg"></li>
<li>时间：2022-1-16</li>
<li>地点：福建厦门</li>
</ul>
</div>
</body>
</html>
/*因为ul li的园点存在于padding里 而padding为0则无*/
#content{
padding: 0;
margin: 0;
width: 360px;
border:2px solid black;
overflow: hidden;
font-size: 12px;
line-height: 25px;
}
ul,li{
padding: 0;
margin: 0;
}
/*父级元素的相对定位 为了让下面的元素只能在父级元素内浮动*/
#content ul{
position: relative;
}
/*记得子元素设置宽高 因为tipbg为空内容 设了才能显示出有浮动*/
.TipText,.tipBg{
position: absolute;
width: 360px;
height: 25px;
top:216px;
}
.TipText{
color: white;
z-index: 2;
}
.tipBg{
background: rebeccapurple;
opacity: 60%;
/*filter: alpha(opacity=30);---老版写法*/
}
5.5 练习 方块的定位 5个方块按规律排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*用到了 line-height :xx px 行高 居中*/
/* text-decoration:none 下划线等链接特效消失*/
/* display:inline-block 行内元素变内联块级元素*/
#box{
height: 300px;
width: 300px;
padding: 10px;
border: 2px solid red;
}
a{
height: 100px;
width: 100px;
color: white;
text-align: center;
line-height: 100px;
text-decoration: none;
display: inline-block;
background-color: plum;
}
a:hover{
background-color: blue;
}
.a2{
position: relative;
right: -100px;
}
.a3{
position: relative;
top: 100px;
}
.a5{
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div id="box">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
3681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
