CSS总结
对HTML进行修饰
CSS引入方式
<button style="color: honeydew ;width: 200px;height: 200px">提交</button>
- 可以直接在标签中使用
<head>
<meta charset="UTF-8">
<title>CSS基本语法</title>
<!--<style>
.web{
font-size:20px;
font-family: Arial;
color:#ff0010;
text-align: center;
}
</style>-->
</head>
- 可以通过头部调用
<link rel="stylesheet" href="style.css">
- 可以通过外文件导入
CSS背景颜色
<style>
.longDIV{
background-color: red;
height: 400px;
width: 300px;
margin: 0 auto;
background-image: url("../images/1.jpg") ;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.mytext{
text-decoration: none;
}
.mydiv{
text-align: center;
line-height: 100px;
}
</style>
- 常用的属性：背景颜色 background-color：red；
- 如何让块元素居中：
margin：0px auto； - 背景图片的引入：background-image：url（“…/images/1.jpg")
- 如何让图片完整的展示出来：background-size:100% 100%；
- 如何让背景图片不重复：background-repeat：no-repeat；
- 去掉超链接下的横线：text-decoration：none；
CSS的边框
<style>
.loginText {
border: 1px solid dodgerblue;
border: none;
border-bottom-style: dotted;
}
.loginText1{
width: 150px;
height: 30px;
border-radius: 5px;
border: 1px solid dodgerblue;
}
.loginText2{
width: 500px;
height: 38px;
background-color: #ddffff;
border-left: 5px solid red;
}
</style>
- 边框 border：1px solid color；
- 边框可以进行单方向修饰： border-left/right/top/bootom
- 边框可以重叠： border-collapse：collapse；重叠（使表格边框之间重合）
- 边框进行圆角化：border-radious：5px；
CSS超链接
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link</title>
<style>
a{
text-decoration: none;
}
a:hover{
color: red;
font-size: 60px;
background-color:gray;
}
p{
text-align: center;
}
#demo{
width: 200px;
height: 200px;
margin: 0px auto;
text-align: center;
line-height:200px ;
}
</style>
</head>
<body>
<p> <a href="http://www.nuc.edu.cn" >中北大学</a></p>
<div id="demo">这是一个文本 </div>
</body>
</html>
- 超链接一般是在标签中使用 以herf进行调用网络
- http：是一种超文本传输协议 www为万维网是W3C组织进行维护的
- 注意超链接的滑动效果，a：hover{ color：#650000；font-size：20px}
盒子模型
.div1{
width: 100px;
height: 100px;
background-color: yellow;
padding: 50px 60px 70px 80px;
border-width: 10px 1em 20px 12px ;
/* 以top为起点 开始顺势针转到*/
border-color: red pink blue black;
border-style: dotted;
margin: 1em 2em 3em 4em;
}
- 边框的颜色 以top为起点 开始顺时针转动
- 颜色是由# FF FF FF组成 FF（255）由三原色组成
- 盒子的内外边距：内边距 padding 外边距 margin
元素的内容溢出
<style>
.div1{
width: 100px;
height: 100px;
background-color:yellow ;
overflow-y: auto;
/* auto 需要时候出现
overflow：visiable；默认的
scorall：出现滚轮
*/
}
- 一般元素内容溢出 都是沿着y轴溢出
- overflow-y：auto；表示当文本超出时，会出现滚轮，进行适应盒子大小
- 溢出分为 x轴溢出 以及y轴溢出
元素(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03元素</title>
<style>
/*
元素之间可以相互转换 display：inline-block / inline/ block； 可以转换成块级元素 以及 行内元素 以及 块级元素
*/
.img1{
width: 200px;
}
span{
width: 100px;
height: 100px;
background-color: yellow;
}
p{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<img>
<!--行级元素：不能设宽高，不独占一行 span a b strong（加粗） em i（斜线） br（换行）
块级元素：能设置宽高，独占一行. div， h1-h6 p（前后有留白）
行内块级元素 能设置宽高，不独占一行 img标签 input标签 button按钮 radio 单选
-->
<p>这是个段落元素</p>
<p>这是个段落元素2</p>
<span style="display: block">不能设置宽高，不独占一行</span>
<!-- 行级元素 style display：block 是行级元素转换成块级元素
display转变块级元素 inline-block
-->
<br>
<img display="inline-block" src="../images/1.jpg" class="img1">
<s>..为上一级， ..跳转上一个文件目录</s>
<p>s标签为删除线</p>
<br>
<b>font-weight:bload 加粗</b>
<br>
<i>按住 CTRL点击图片则可以进入</i>
<br>
<em>倾斜</em>
</body>
</html>
- 行级元素：不能设宽高，不独占一行 span a b strong（加粗） em i（斜线） br（换行）
- 块级元素：能设置宽高，独占一行. div， h1-h6 p（前后有留白）
- 行内块级元素 能设置宽高，不独占一行 img标签 input标签 button按钮 radio 单选
- 行级元素 style display：block 是行级元素转换成块级元素，display转变块级元素 inline-block
- 元素之间可以相互转换 display：inline-block / inline/ block； 可以转换成块级元素 以及 行内元素 以及 块级元素
浮动 与定位
- 浮动可以从网页上浮动出来，可以理解为网页是操场 操场的气球为浮动效果
- 定位
绝对定位：absolut 即不管网页如何，位置固定
相对定位：相对之前位置的定位
固定定位： fixed 相对于浏览器位置的定位
补充：网页 登陆页面
- CSS样式中 属性选择器
input[type='submit']{
margin: 25px 105px;
background: cornflowerblue;
font-size: 20px;
color: white;
}
同一属性的进行修饰
- 如何让盒子居中？
div{
margin:0px auto;
}
盒子针对父级居中 横向居中
3. 制作版权的小技巧：
先在背景图上截取一小段，然后在创建一个盒子，盒子宽度100%，进行引用背景图。
版权内文字居中，则采用 text-algin：center进行居中，由于并没有设置高度，所有盒子高度与文字高度相同
4. js小计巧 （同一页面如何达到按钮切换登录/注册）
制作两个表单，分别放入两个盒子中，盒子需要有ID然后
<script>
function login(){
}
function four1(){
document.getElementById("four2").style.display = "block";
document.getElementById("login").style.display = "none";
}
</script>
获取元素.获取样式。展示 = 块级元素
获取元素.获取样式.战视 = 不显示
5.display：none 与display：hidden 的区别
<span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
none 不占用空间 hidden 占用空间 但是隐藏
6.锚点的使用
<a herf="top">顶点</a>
<a href="#top">到达顶部</a>
扫一扫
2276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
