CSS概念及用法(持续更新中)
目录
CSS与HTML的关系
1.内嵌样式<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容
2.内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
3.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通
过link标签将外部样式表文件链接到HTML文档中.、
代码:
选择器
代码:
文本
代码:
背景
代码:
示例代码:
示例运行结果:
示例代码:
运行结果:编辑
示例代码:
运行结果:
示例代码:
运行结果:编辑
代码示例:
结果如图:编辑
代码示例:
清除浮动后的样子:
示例代码:
示例结果:
css概述
CSS与HTML的关系
1.内嵌样式<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容
</标签名>
2.内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
3.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通
过link标签将外部样式表文件链接到HTML文档中.、
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/out.css" rel="stylesheet" />
<style type="text/css">
/*
p 就是选择器,与网页网页中的标签进行关联
p-->标签选择器 就是通过标签匹配
*/
/* p{color: red; font-size: 20px;} */
</style>
</head>
<body>
<!--
css: 级联样式表
是一种样式表语言,用于为html文档修饰样子
只是修饰,没有内容
html是网页内容 骨架
css是修饰 ,是外观 皮肤
将页面的内容与表现形式分离( 通过某种关系关联起来,做到相同的只写一次 )
<font color="red"><b>静夜思</b></font>
-->
<!--
行内样式表 直接把样式写在标签行内
<p style="color: blue; font-size: 20px;">
-->
<p>
静夜思
</p>
<p>床前明月光,</p>
<p>疑是地上霜,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>
</body>
</html>
选择器
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 通过标签名匹配 */
p{
font-size: 20px;
color: yellow;
}
/* id选择器 唯一 */
#ptitle{
color: #FF0000;
}
/* 类选择器 用的最多的 */
.p1{
color: green;
}
.p2{
color: blue;
}
/* 通配选择器 选中所有的标签 */
*{
color: aqua;
}
h3,#ptitle,.p1{
font-family: 楷体;
}
/*
选择器有优先级
高--->低
id--->类选择器--->标签选择器--->通配选择器
*/
</style>
</head>
<body>
<h3>静夜思</h3>
<p id="ptitle" style="color: darkmagenta;">静夜思</p>
<p class="p1">床前明月光,</p>
<p class="p1">疑是地上霜,</p>
<p class="p2">举头望明月,</p>
<p class="p2">低头思故乡.</p>
</body>
</html>
文本
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1,.p2{
color: #008000;
font-size: 20px;
font-family: 楷体;
/* text-align: center; 文本内容居中 */
/* text-decoration: line-through; 文本修饰 删除线 */
/* text-decoration: underline; 下划线 */
/* font-style: italic; 斜体*/
/* font-weight: 700; 加粗文本 */
/* line-height: 30px; 一行高度 */
/* letter-spacing: 10px; 字符之间的间距*/
/* word-spacing: 10px; 单词之间的间距 */
text-indent: 2em; /* 首行缩进 em表示当前1个字符的大小*/
}
a{
text-decoration: none;/* none 没有任何的修饰 */
}
</style>
</head>
<body>
<p class="p1">
列表属性可以放置、改变列表项标志,或者将图像作为列表项标志。
列表属性可以放置、改变列表项标志,或者将图像作为列表项标志。
列表属性可以放置、改变列表项标志,或者将图像作为列表项标志。
</p>
<p class="p2">
列表属性可以放置、改变列表项标志,或者将图像作为列表项标志。
列表属性可以放置、改变列表项标志,或者将图像作为列表项标志。
列表属性可以放置、改变列表项标志,或者将图像作为列表项标志。
hello world
</p>
<a href="">百度</a>
</body>
</html>
背景
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width: 700px;
height: 500px;
background-color: #00FFFF;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-position: center top; /* 水平(left center right) 垂直(top center bottom)*/
background-size: 400px 300px;/* 宽, 高 */
}
</style>
</head>
<body>
<p>
段落
</p>
</body>
</html>
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
/* list-style-type: none; 去除默认的图标
list-style-image: url(img/img.jpg); 添加新图标
list-style-position:inside ; inside在列表项里面 outside在列表项外面
text-align: center; */
/* 简写方式 */
list-style: url(img/img.jpg) none inside;
}
</style>
</head>
<body>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</body>
</html>
示例运行结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a1{
color: #008000;
}
/* 鼠标移入到标签上切换到此伪类定义的样式表 */
.a1:hover{
color: #00FFFF;
font-size: 20px;
}
/* :active鼠标点击时切换到此样式表 */
.a1:active{
color: red;
}
.btn{
background-color: #00FFFF;
}
.btn:hover{
background-color:#FFFF00
}
.btn:active{
background-color: #FF0000;
}
/* 可以输入的组件,获得鼠标焦点时切换到此样式表 */
.txt:focus{
background-color: #00FFFF;
}
.imgcss{
/* 0--1 0完全透明(占空间) 1-完全不透明 */
opacity: 0.3;
}
</style>
</head>
<body>
<a class="a1" href="">百度</a>
<a href="">百度</a>
<p class="a1">段落</p>
<input type="button" class="btn" value="保存" /><br/>
<input type="text" class="txt"/><br/>
<input type="text" class="txt"/><br/>
<input type="text" class="txt"/><br/>
<input type="text" class="txt"/><br/>
<img src="img/photo.jpg" class="imgcss"/>
aaa
</body>
</html>
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <h1>
<p>
qqqq
</p>
</h1> -->
<!--
h1 p 等虽是块级,但是他们都有一些不足 例如有默认样式, p标签不能包含其他的块级标签
-->
<div>
<p>
div是一个纯净版的块级标签 ,是一个块级的标签,没有任何默认样式,设置成什么样子都行
主要用来进行网页布局
</p>
</div>
span是一个纯净版的行级标签 行级的标签 没有任何默认样式
<span class="" style="color: #008000;">
span是一个纯净版的行级标签 行级的标签 没有任何默认样式
</span>
<!--
h1 p
表格标签
表单
超链接
图片
div
span
iframe
-->
</body>
</html>
运行结果:
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
background-color: #008000;
/*
内容区: 就是放内容的区域,文本,子标签都是在内容区中放着的.
width和height只是设置内容区的大小
如果标签没有内边距和边框 那么内容区就是标签的大小
标签大小 = 内容区大小+内边距+边框
*/
width: 78px;
height: 78px;
/*
内边距: 内容区到边框之间的距离 会影响标签的实际大小
*/
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px; */
padding: 10px;
/* padding: 10px 5px; */
/* padding: 5px 10px 15px 20px; 上 右 下 左*/
/*
边框 标签最外层 也会影响标签大小
*/
/* border-top-width: 1px;
border-top-color: #FF0000;
border-top-style: dotted; */
/* border-top: #FF0000 1px solid; */
border: #FF0000 1px solid;
/* border-radius: 50%; */
border-bottom-right-radius: 10px;
}
input{
width: 500px;
height: 30px;
border: #b9b9b9 1px solid;
font-size: 18px;
outline: none;
border-radius: 15px;
}
input:hover{
border: #828282 1px solid;
}
input:focus{
border: blue 1px solid;
}
</style>
</head>
<body>
<div class="box">
<span>标签内容标签内容标签</span>
</div>
<div class="box1">
<span>标签内容标签内容标签</span>
</div>
<br/>
<input type="text" />
</body>
</html>
运行结果:
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
background-color: #008000;
width: 78px;
height: 78px;
padding: 10px;
border: #FF0000 1px solid;
border-bottom-right-radius: 10px;
}
.box1{
background-color: #FF0000;
width: 100px;
height: 100px;
/*
外边距 是标签与另一个标签之间的距离 ,不会影响标签的大小,会影标签的位置
可以通过margin-top/left/right/bottom
左右值可以为auto 值最大化
上下不能为auto 为aut是值为0
*/
/* margin-top: 100px;
margin-left: 100px; */
/* margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px; */
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box">
<span>标签内容标签内容标签</span>
</div>
<div class="box1">
<span>标签内容标签内容标签</span>
</div>
<br/>
</body>
</html>
运行结果:
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.f1{
width: 100%;
height: 500px;
background-color: #00FFFF;
}
.f2,.f3{
width: 30%;
height: 200px;
background-color: aquamarine;
float: left;
}
.f3{
float: right;
}
.f4{
width: 100%;
height: 200px;
background-color: #FF0000;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="f1">
<div class="f2">
</div>
<div class="f3">
</div>
<p>环境和国际化个</p>
<div class="f4">
</div>
</div>
</body>
</html>
结果如图:
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.f1{
width: 100%;
height: 500px;
background-color: #00FFFF;
}
.f2,.f3{
width: 30%;
height: 200px;
background-color: aquamarine;
float: left;
}
.f3{
float: right;
}
.f4{
width: 100%;
height: 200px;
background-color: #FF0000;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="f1">
<div class="f2">
</div>
<div class="f3">
</div>
<!-- 用这个标签将之前浮动释放的空间进行填充 -->
<div class="clear">
</div>
<p>环境和国际化个</p>
<div class="f4">
</div>
</div>
</body>
</html>
清除浮动后的样子:
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title><style type="text/css">
#h1{
background-color: dodgerblue;
width: 100px;
height: 100px;
position: relative;
left: 100px;
}
.h2{
background-color: mediumblue;
width: 100px;
height: 100px;
position: relative;
left: 100px;
}
#h3{
background-color: red;
width: 400px;
height: 400px;
position: absolute;
left: 100px;
}
#h4{
background-color: aliceblue;
width: 40px;
height: 40px;
position: fixed;
bottom: 30px;
right: 40px;
}
#h5{
width: 10px;
height: 1000px;
}
</style>
</head>
<body>
<div id="h1">
相对标签
</div>
<div id="h3" ">
<div class="h2">
绝对标签
</div>
</div>
<div id="h4">
</div>
<div id="h5">
</div>
</body>
</html>
示例结果:
辣椒种子: 大佬太优秀了,期待大佬的更多精彩文章,帮忙也看看我的博文,一起加油一起冲!
goyeer(工蚁): 优质博文,干货满满~不愧是我佬,跟着我佬学习,每天都能学到很多知识!!期待我佬来指点一番~!!!!
904531552: 很清晰啊
一个成长中的菜鸟程序猿: 大哥,牛啊!