CSS基本知识
基本概念
Html只是构建了网页的基本结构，如果你希望它美一点，我们就需要使用css来进行美化。
CSS: cascade style sheet 层叠样式表 我们可以对table使用多个样式(字体颜色 字体大小)，那么表格就是这两个样式的综合体。
**静态网页:**网页中的内容任何时候任何人看到的效果都是一样的，那这种网页就是静态网页。
动态网页: 网页中的内容是否会根据不同用户以及同一个用户的不同输入展示不同的结果
CSS基本结构
选择器{
属性:属性值;
属性:属性值;
}
网页中使用css的三种方式
1.行内样式
<h1 style="color:red;font-size: 12px;">第八天</h1>
2.内部样式
<style type="text/css">
h1{
color:red;
font-size:12px;
}
</style>
3.外部样式
<link href="css/common.css" rel="stylesheet"/>
当行内样式，内部样式，外部样式同时作用于一个标签时，优先级是 行内》内部》外部
CSS的选择器
标签选择器
所有的标签都可以做选择器 p h1–h6 ul ol
类选择器
// 定义类选择器的样式
.nav(该名字不要和标签名一样){
color:red;
}
// 使用类选择器的样式
<h1 class="nav">第八天</h1>
<p class="nav">哈哈</p>
<h5 class="nav">呵呵</h5>
ID选择器
有一个样式，只想给某一个标签使用，那么可以选择使用ID选择器
定义ID选择器
#jk(保证不要和标签名一样){
Color:red;
}
使用ID选择器:
<h2 id="demo">哈哈</h2>
优先级: ID选择器》类选择器>标签选择器
常见的CSS样式：
字体样式
字体颜色: color
字体大小:font-size
字体粗细:
字体风格
字体
/**
* 字体颜色
*/
color:yellow;
/**
* 字体大小
*/
font-size: 12px;
/**
* 字体粗细 bold 粗体
*/
font-weight: bold;
/**
* 字体风格 italic
oblique 这两种都代表斜体
*/
font-style: italic;
font-family: "times new roman",宋体;
文本样式
/**
* 设置文本的行高
*/
line-height:20px;
/**
* 首行缩进
*/
text-indent: 2em;
/**
* 对齐方式 左 右 中
*/
text-align: center;
/**
* 设置样式line-through 删除线
underline 下划线
*/
text-decoration:overline;
Span标签
他不会独占一行
<span>全民核酸检测</span>
可以单独给span标签设置样式:
span{
color:red;
font-size: 28px;
}
图片样式
/**
* 设置图片和所在行的文字进行对齐
*/
img{
vertical-align: middle;
}
盒子模型以及它的常见样式div
块级标签:
如果该标签需要独占一行，则称其为块级标签 h1 p ul li ol dl
内联标签:
如果该标签不会独占一行，则称其为内联标签 img a span
块极标签中可以放入内联标签，反之不成立
我们可以通过css样式进行调整，使得内联标签具有块级标签的效果，也可以使得块级标签具有内联标签的效果。
h1{
/**
* 设置将其转化为内联标签
*/
display: inline;
}
span{
/**
* 将内联转为块级
*/
display: block;
}
盒子模型
针对的是块级元素。所有的块级元素都具备盒子模型的特点。
div标签 常用的布局标签，用来存放别的标签或者数据
边框
div{
/**
* 方式一
*/
border:1px solid red;
/**
* 方式二
*/
/**
* 边框的颜色
*/
border-color: #FF0000;
/**
* 边框的风格
solid 实线
dotted 点线
dashed 虚线
*/
border-style:dashed;
/**
* 边框的粗细
*/
border-width: 5px;
}
边距：
内边距 padding 上下 左右
外边距 margin 上下 左右
margin妙用
当盒子模型设置了宽度之后，可以使用
margin: 0px auto;来将其居中。
盒子模型加背景颜色和背景图片
/**
* 背景图片
*/
background-image: url(img/搜狗截图20200715143753.png);
/**
* repeat-x 水平方向上重复
repeat-y 垂直方向上重复
no-repeat 不重复
*/
background-repeat: no-repeat;
/**
* 100px 代表离最左边的距离
20px 代表离最上边的距离
*/
background-position: 100px 20px;
无序列表去掉前面的标识：
ul{
/**
* 去掉无序列表前面的黑色圆圈
*/
list-style-type: none;
}
超链接样式:
/**
* 超链接被访问过之后的样式
*/
a:visited{
color:yellow;
}
a{
/**
* 去掉下划线
*/
text-decoration: none;
color: #A9A9A9;
font-size: 12px;
}
/**
* 鼠标悬停在超链接上出现的样式
*/
a:hover{
color:red;
text-decoration: underline;
}
浮动
浮动针对的是盒子模型或者块级元素
浮动作用： 可以让块级元素放在一行。
设置了浮动的标签会脱离标准文档流，此时该浮动标签的位置由自己控制，不受父标签的影响。
浮动语法：
float:left(左浮)
float:right(右浮)
定位
让网页的标签去任何想去的地方。
相对定位：
相对某标签初始的位置进行相应的定位，这就叫相对定位。相对定位不会脱离标准文档流。
/**
* 使用相对定位往右上角移动
/
position: relative;
/*
* 和最左边的距离加大了100px 相当于向右走了100px
*/
left:100px;
bottom: 20px;
绝对定位:
设置了绝对定位的标签会脱离标准文档流，它下面的元素会上来占据它原来的位置。
#demo{
border: 1px solid red;
/**
* 仅仅是为了给大div设置定位，然后让其中的小div设置绝对定位时，是以该div为基准，而不是以浏览器窗口为基准。
*/
position: relative;
}
#demo1{
border:1px solid black;
/**
* 设置绝对定位
*/
position: absolute;
left:100px;
bottom:20px;
}
#demo2{
border: 1px solid yellow;
}
/**
* 目前demo1这个div因为设置了绝对定位，脱离了标准文档流，所以它的偏移量都是相对浏览器窗口的，
它的偏移量是要以已经定位的父元素为准。
*/
透明度
当两个元素因为定位然后重叠在一起时，我们就可能需要去调整这两个标签的折叠顺序。
所有的标签都具备z-index属性，属性值都为0.但是呢，只有设置了定位的元素，我们才可以调整它的z-inex值，该值可正可负，z-index值较大的就显示在上面。
案例
代码如下
代码:
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
.demo1{
width: 330px;
height: 20px;
background-color: #000000;
/**
* 设置绝对定位
*/
position: absolute;
bottom: 70px;
/**
* 设置透明度
0-1之间 越小越透明
*/
opacity: 0.3;
}
.demo2{
position: absolute;
bottom: 70px;
left:120px;
color:white;
font-size: 14px;
/**
* 调整z-index至
*/
z-index: 1;
}
#nav{
border: 1px solid black;
position: relative;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><img src="img/maple.jpg" /></li>
<li class="demo2">京秋魅力•相约共赏香山红叶</li>
<li class="demo1"></li>
<li>时间：11月16日 星期六 8:30</li>
<li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
</ul>
</div>
</body>
案例二
代码如下
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#demo1_1 ul{
list-style-type: none;
overflow: hidden;
}
li{
/**
* 设置li左浮动
*/
float:left;
margin-right: 20px;
}
a{
/**
* 去掉下划线
*/
text-decoration: none;
color: black;
font-size: 14px;
}
a:hover{
color:blue;
}
</style>
</head>
<body>
<div id="demo1_1">
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">hao123</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>
案例三
代码如下
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#demo{
width: 400px;
}
#demo1{
height: 29px;
/**
* 背景图片
*/
background-image: url(img/icon-03.jpg);
/**
* 设置水平方向重复
*/
background-repeat: repeat-x;
color:white;
text-indent: 1em;
}
/**
* 去掉黑圈圈
*/
ul{
list-style-type: none;
}
#demo2 li{
float:left;
margin-right: 25px;
}
</style>
</head>
<body>
<div id="demo">
<div id="demo1">
精彩视频
</div>
<div id="demo2">
<ul>
<li>
<img src="img/video-01.jpg" /><br />
<span>携手共同进步</span><br />
<img src="img/icon-01.jpg"/>时长：80秒 <br />
<img src="img/icon-02.jpg"/>点击：541563
</li>
<li>
<img src="img/video-01.jpg" /><br />
<span>携手共同进步</span><br />
<img src="img/icon-01.jpg"/>时长：80秒 <br />
<img src="img/icon-02.jpg"/>点击：541563
</li>
<li>
<img src="img/video-01.jpg" /><br />
<span>携手共同进步</span><br />
<img src="img/icon-01.jpg"/>时长：80秒 <br />
<img src="img/icon-02.jpg"/>点击：541563
</li>
<li>
<img src="img/video-01.jpg" /><br />
<span>携手共同进步</span><br />
<img src="img/icon-01.jpg"/>时长：80秒 <br />
<img src="img/icon-02.jpg"/>点击：541563
</li>
</ul>
</div>
</div>
</body>
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
