1.CSS
一页页面由html, css,javascript
html相当于一个简陋的骨架
css相当于对这个骨架进行化妆修饰的
CSS 层叠样式表 cascading style sheets
1.1CSS引入方式【重点】
先写html标签，然后再写css对标签进行化妆修饰
1.行内样式
2.内联样式
3.外联样式
目的：为了修饰标签的，让标签变得更加好看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 行内样式写法，目的是为了修饰div标签的
学过的每一个标签，都有这个属性叫style
style属性值写的是css语法格式
css语法格式：
属性1:属性值1;属性2：属性值2;属性3:属性值3;
-->
<div style="border:4px solid gold; width: 400px;height: 400px;background-color: aqua;color:red;">
何须马革裹尸还
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css内联样式的写法</title>
<!-- 内联样式的写法是在head标签中，有一个子标签叫style
在style标签中去写CSS样式去修饰标签
-->
<style>
/* 这个是css里面注释，和html不一样。和java一样 */
/* 首先找到被修饰的标签 ,之后写大括号，在大括号里面写css语法格式*/
div {
width: 100px;
height: 100px;
background-color: darkgoldenrod;
}
/* 修饰p标签 */
p{
width: 100px;
height: 100px;
background-color: aquamarine;
}
/* 修饰span标签 */
span{
/* 专门讲一下颜色表示方式
1.html规定好的颜色的英文单词
2.十六进制的表示形式 0-F
R G B
00 00 00 黑色
FF 00 00 红色
00 FF 00 绿色
00 00 ff 蓝色
十六进制组成了好好的颜色
一般用吸色器把颜色吸出来
*/
color:#E1251B;
}
</style>
</head>
<body>
<div>
无边落木萧萧下,不尽长江滚滚来
</div>
<P>今天是123456</P>
<div>
</div>
<span>不能轻视对手！！！</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部的css文件
在head头里面写一个link标签,目的是为了引入外部的css文件
属性：
rel:连接文件的类型 样式表
type:css文件类型
href:外部的css所在路径 重要的，因为找不到这个css就没有任何效果了
-->
<link rel="stylesheet" type="text/css" href="./test.css"/>
</head>
<body>
<!-- 外联样式
在文件的外部写一个后缀为css的文件，
引入到咱们当前页面
-->
<footer>自挂东南枝</footer>
</body>
</html>
1.2css的选择器【重要！！！】
目的：为了找到这个被修饰的标签的。
如果连标签都找不到，何谈修饰？好比你买了化妆品，要给你女朋友化妆，。突然想到自己没有女朋友。很扎心。首先找到女朋友，对她进行化妆
1.标签选择器
2.class选择器
3.id选择器
4.层级选择器
5.组合选择器
6.通配选择器
7.伪类选择器
1.2.1标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<!-- 内联样式的写法 -->
<!-- 标签选择器，通过标签的名字获取找到标签的 -->
<style>
/* sapn就是html标签的名字
对span的内容进行修饰
*/
span {
color:red;
}
div {
color:yellowgreen;
}
footer {
color:blue;
}
</style>
</head>
<body>
<span>
默认回首，那人却在垃圾堆处
</span>
<div>借问酒家何处有</div>
<div>一骑红尘妃子笑</div>
<footer>风萧萧兮易水寒</footer>
</body>
</html>
1.2.2class选择器
每一个标签都有一个class属性
给class起一个属性的名字，咱们可以通过这个=属性值可以找到这个标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* class选择器
是在标签中写一个class属性，
属性值是自己定义的，通过
.属性值 {}找到当前标签进行修饰
*/
.nb {
color:red;
}
.sb{
width: 100px;
height: 100px;
background-color: #0000FF;
}
</style>
</head>
<body>
<!-- 任何一个标签都是有class属性的
class的属性值可以随便写
class可以写多个值，中间使用空格隔开。
<div class="wwb wangwenbo nb">
class有三个值
1.wwb
2.wangwenbo
3.nb
-->
<div class="wwb bbq nb">
青岛不倒我不倒，雪花不飘我不飘
</div>
<div class="sb"></div>
</body>
</html>
1.2.3 id选择器
给一个标签写一个id属性，然后给一个id的值。通过这个id值找到这个标签
#id值 {}
【注意】：id必须是唯一的，class的值可以重复
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
/* id选择器 s使用关键字 #id值
id必须是唯一的
*/
#wb {
color:tomato;
width: 200px;
height: 200px;
background-color: bisque;
}
</style>
</head>
<body>
<div id="wb">落霞与孤鹜齐飞</div>
<div >秋水共长天一色</div>
</body>
</html>
1.2.4组合选择器
要修饰多个标签的时候，而且修饰的样式是一样的，这个时候可以写组合选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<style>
/* 组合选择器，用的很多，页面上面很多都是一样的样式
这个时候可以组合选择器。使用逗号隔开
*/
#div1, .span1, p, footer {
color: #FF6347;
}
</style>
</head>
<body >
<!-- 给了四个标签，现在我要求四个标签的内容都是tomato颜色 -->
<div id="div1">众里寻他千百度</div>
<span class="span1">不教胡马度阴山</span>
<p>桃花坞里桃花庵</p>
<footer>呵呵哒</footer>
<header>嘻嘻哒</header>
</body>
</html>
1.2.5层级选择器
标签是可以嵌套标签的，一层一层的找
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层级选择器</title>
<style type="text/css">
/* 一层一层的往下找
层级择器是用空格，每一个标签都是有关系的，子标签关系
*/
/* 我在找标签的时候，为什么不直接找到你？而是通过爷爷，父亲等找到你啊？
但是语法格式有这样的格式，有存在的意义。咱们有的时候层级太深的，单纯的直接
找某一个标签，是找不到的，必须通过他的父级标签来找到进行修饰
*/
#div1 .div2 div {
color: red;
}
#div4{
color: aqua;
}
</style>
</head>
<body>
<div id="div1">
<div class="div2">
<div>仰天大笑出门去，我辈岂是蓬蒿人</div>
</div>
<div id="div3">
<div id="div4">磨刀霍霍向猪羊</div>
</div>
</div>
</body>
</html>
1.2.6通配选择器
所有的标签都可以生效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 所有的标签都生效
*代表的所有
以后会用
*优先级比较低
*/
#div2{
color:darkred;
}
* {
color:tomato;
/* 开发的时候一般这样来用通配符
设置内边距和外边距为0。目的是让咱们整个网页充满整个电脑屏幕的页面
*/
margin: 0;
padding: 0;
}
div {
color:green;
}
.div1{
color:yellowgreen;
}
/* 通配 < 标签 < class < id选择器
不是就近的 是有优先级的！！！
*/
</style>
</head>
<body>
<div>
我去好困啊！！！
</div>
<div class="div1">我去想睡觉</div>
<div id="div2">我去睡吧</div>
<span>昔日龌龊不足夸</span>
</body>
</html>
1.2.7伪类选择器
伪类和a标签（超链接）有关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 设置链接字体的颜色的 */
/* 伪类选择器的语法格式比较特殊
几种状态
*/
/* 访问过后的状态 链接的颜色*/
/* link不能放在最后 */
a:link {
color:red;
}
a:visited{
color:pink;
}
/* 鼠标悬停的一个状态 */
a:hover {
color:blue;
}
/* 鼠标点上去别松手的一个状态 */
a:active{
color:green;
}
</style>
</head>
<body>
<a href="http://www.taobao.com">去淘宝</a>
</body>
</html>
咱们讲过选择器了，为了找到标签。接下来来讲css的属性
2.CSS的属性
color：设置字体颜色
width:设置宽度
height:设置高度的
background-color:设置背景颜色
2.1背景图片的css属性
background-color 背景颜色
background-image 背景图片 会平铺的
background-repeat 平铺的方式
background-attachment 背景图片的动态效果
background-position 图片的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
/* 会平铺整个页面 网页背景图片 */
background-image: url(./1.jpg);
/* 平铺的方式
repeat-x:横向平铺
repeat-y:纵向平铺
no-repeat:不平铺
*/
background-repeat: no-repeat;
/* 图片的位置
两个值 第一是x轴的偏移(离左边的距离) 第二个值是y轴的偏移(离上面的距离)
*/
background-position:100px 200px;
/* 图片的动态效果
scroll 图片和文字相对静止的
fixed 图片相对于文字是动的
*/
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
2.2边框的css属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
/* 边框样式 solid 实线*/
/*border-style: ridge;
/* 边框的颜色
border-color: #008000;
/* 边框的宽度
border-width: 10px;*/
/* 边框的简写
包含了边框的样式 颜色 宽度
一个属性带三个属性值，相当方便
但是官方手册给咱们了border-style必须要写的
*/
border: solid 3px #0000FF ;
/* 边框是四个边，咱们还可以对单独边进行设置 不用记！！！ */
/* border-top-style: dashed;
border-left-style: dotted;
border-right-style: double;
border-bottom-style: groove; */
/* 设置边框的圆角 border-radius 圆角的半径 不用记*/
border-radius:100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2.3文本和字体的css属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 {
width: 1000px;
height: 300px;
border: 3px solid red;
/* 设置字体的颜色 */
color:blue;
/* 设置字体的大小 */
font-size:50px;
/* 设置字体的样式
normal 正常的字体
italic 斜体
*/
/*font-style: italic;
/* 设置字体的权重 是否加粗
font-weight: bold;
/* 规定文本的字体系列（字体族）。 楷体 宋体 微软雅黑
font-family: 楷体;*/
/* 字体简写的写法
font-size 和font-family的值是必须写的
*/
font: bold 30px 宋体;
/* 文本线的形状
line-through 中间线
overline 上划线
underline 下划线
none 去除文本线 a标签有很多的下划线，去除一下
*/
text-decoration: underline;
/* 文本的缩进 好多文章 第一句空两格写*/
/* text-indent: 50px; */
/* 文本的对齐方式 left right center*/
text-align: center;
/* 控制行高
文本的高度问题
如果想要文本居中显示，值必须是div的高度
*/
line-height: 300px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="d1">你不醉我不醉马路牙子谁来睡</div>
<a href="#">呵呵呵哒</a>
</body>
</html>
2.4盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
border:3px solid skyblue;
background-color: darkred;
/* 开始加内边距
一个数据的时候：上下左右都是这个值
两个数据的时候：第一个数据是上下 第二个是左右的内边距
三个数据的时候：上 左右 下
四个数据的时候：上 右 下 左 顺时针的
*/
/* padding: 40px 80px 160px 320px; */
/* 单独去指定某一边的内边距 */
padding-left: 30px;
padding-right: 40px;
padding-top: 50px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div>窗含西岭千秋雪</div>
</body>
</html>
2.5浮动【重要】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*如果没有浮动 上下排列 div是一块级标签 */
/*
浮动就是把块变成了行进行排列的
div是一个块级标签不可能在一行上面的，但是可以通过浮动让他们在一行上面啊！！！
*/
#div1{
width: 100px;
height: 100px;
background-color: #0000FF;
float: right;
}
#div2{
width: 100px;
height: 100px;
background-color: red;
float: right;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div><div id="div3"></div>
</body>
</html>
清除浮动
<!DOCTYPE html>
<html>
<head>
<style>
/* 清除浮动的目的 把行级标签变成块级标签，刚好和浮动相反 */
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4 {
border: 1px solid red;
clear: left;
}
</style>
</head>
<body>
<h1>不使用 clear</h1>
<div class="div1">div1</div>
<div class="div2">div2 - 请注意，在 HTML 代码中 div2 在 div1 之后。不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围。</div>
<br><br>
<h1>使用 clear</h1>
<div class="div3">div3</div>
<div class="div4">div4 - 在此处，clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。</div>
</body>
</html>
2.6定位
固定定位
相对定位
绝对定位
2.6.1固定定位
position: fixed; top: 0; left: 0;
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
top: 0;
left: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="fixed">
额我真的还想
</div>
</body>
</html>
2.6.2相对定位
参照物是亲父节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
}
#div1 {
background-color: #008000;
}
#div2{
background-color: yellowgreen;
}
#div2:hover{
/* 相对div1来定位，最近的那个亲父节点 */
position: relative;
background-color: yellowgreen;
top:10px;
left: 10px;
}
</style>
</head>
<body>
<div style="background-color: #0000FF;"></div>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
2.6.3绝对定位
绝对定位的参照物是设置了相对定位的父级节点，如果所有父级节点都没有相对定位的情况下才会参照body标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
}
/* 和dody标签有关系 */
#div1 {
background-color: chartreuse;
position: absolute;
top: 100px;
left: 100px;
}
#div3 {
background-color: green;
position: absolute;
top: 10px;
left: 10px;
}
/* div4在div3中
相对于最近的祖先元素进行的定位的
*/
#div4{
background-color: red;
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">
<div id="div4"></div>
</div>
</body>
</html>
扫一扫
1628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
