CSS知识点
第一节：css介绍和三种引入方式
块标签 >>>> 块元素 在页面上独占一行的标签
行内标签 >>>> 行内元素 在页面上不会独占一行的标签
span 行内标签 一般用于在网页上划定一个范围 一般结合CSS样式 帮助我们确定某些现实效果的作用范围
div 块标签 一般用于做网页的布局
1.1. 什么是CSS
HTML 搭建网页的主体结构 毛坯房
CSS 修饰网页 让网页更漂亮 精装修
JS 做交互 智能家电
1.2. CSS的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--链接式-->
<link rel="stylesheet" href="css/mycss.css" />
<!--内嵌式-->
<style>
/* 选择器 */
span{
font-size: 20px;
color: green;
background-color: bisque;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<!--
1行内式引入
借助标签的style属性引入
style属性中的值语法为 样式名:样式值; 样式名:样式值;... ...
2内嵌式
将css样式的代码抽取出来,通过选择器确定样式作用范围
在head标签中 使用一对style标签 定义css样式
在style标签中 注释写法 /* */
减少相同代码的编写量 减少代码的维护工作量
3链接式
行内式只能将样式作用于当前标签
内嵌式可以将样式作用于多个标签不能作用于其他网页
链接式可以将样式的作用范围扩大多个不同网页
链接式可以将CSS代码放入独立的.css文件中 可以使当前页面更加简洁
每一个需要引入样式 的HTML 在head标签中使用 link标签引入css文件即可
4当三种引入方式同时作用于同一个标签 如果样式有冲突 谁的优先级更高
优先级原则 就近原则
-->
<span style="font-size: 40px; color: blue; background-color: aqua;">
欢迎来到尚学堂
</span>
<br />
<span >
欢迎来到尚学堂
</span>
<br />
<span >
欢迎来到尚学堂
</span>
<br />
<span >
欢迎来到尚学堂
</span>
<br />
<span >
欢迎来到尚学堂
</span>
</body>
</html>
CSS 外部样式文件
第二节：css的选择器
2.1. 三大基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
*
标签名选择器
给页面所有同名的标签定义样式的选择器
语法 标签名{样式}
* */
span{
background-color: skyblue;
font-size: 40px;
font-family: "楷体";
color: orangered;
}
/*
id选择器
一般body中的任何一个标签都有id属性
id属性的值一般在同一个网页上是不允许有重复值
id属性一般用于帮助我们定位到页面上唯一的一个标签
id属性值命名有规则
不能有空格和一些特殊符号
特殊符号中仅可以使用_ 不推荐 $ 会和jquery命名冲突
不能以数字为开头
推荐写法 应为字母开头 数字放在后面
语法: #id值{样式}
*/
#p1{
border: 1px dotted blue;
background-color: gray;
color: red;
width: 100px;
height: 100px;
}
/*
类选择器
一般body中的所有标签都有class属性
多个不同的标签可以有相同的class属性值
通过标签的class属性确定样式的作用范围
语法 .class属性值{样式}
*/
.c1{
background-color: cadetblue;
font-size: 50px;
font-family: "微软雅黑";
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<span id="s1">今天是2020年3月5日</span>
<br />
<span id="s2">今天是2020年3月5日</span>
<p id="p1">今天是2020年3月5日</p>
<p id="p2">今天是2020年3月5日</p>
<p id="p3" class="c1">今天是2020年3月5日</p>
<h1 id="ha" class="c1">今天是2020年3月5日</h1>
<a href="#" class="c1">百度</a>
</body>
</html>
2.2. 其他选择器
(了解 熟悉)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
层级选择器
通过层次关系定位样式的作用范围
层级选择器的每个层级的确定可以是标签名 id class
* */
#p1 .s1{
color: red;
}
/*
* 属性选择器
* 根据标签的某个属性的特定属性值确定样式的作用范围
*/
input[type=password]{
width: 300px;
height: 40px;
}
/*
* 分组选择器
* 可以将多个不同层级关系 不同class属性 id 标签名同时使用相同的样式效果
* */
h1,.ch,.s2,#pa{
color: green;
}
</style>
</head>
<body>
<span>今日全国新增确诊人数为143人</span>
<p id="p1">
<font>
<span class="s1">其中湖北新增确诊134</span>
</font>
<span >非湖北新增9例</span>
</p>
<input class="i" type="text" />
<input class="i" type="password" />
<input class="i" type="password" />
<input class="i" type="password" />
<h1 id="ha">今日疫情通报</h1>
<h2 class="ch">今日疫情通报</h2>
<span class="s2">今日疫情通报</span>
<p id="pa">今日疫情通报</p>
</body>
</html>
2.3. 伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
* 伪类选择器可以四同时使用 也可以单个使用
* 如果是四个一块使用 注意顺序
*/
a:link{
color: black;
text-decoration: none;
}
a:visited{
color: darkgray;
}
a:hover{
color: yellow;
}
a:active{
color: darkred;
}
div{
border: 1px double green;
width:100px;
height: 100px;
background-color: lightyellow;
}
div:hover{
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div></div>
</body>
</html>
第三节：盒子模型
什么是网页的布局
房子 >>> 格局
网页 >>> 格局 网页内容的主体规划
1盒子模型 >>>> 标签和标签存在包含关系时 位置的调整
2浮动 >>>> 多个块标签处于同一行的位置处理问题
3定位 >>>> 块标签在页面指定位置的处理问题
块标签>>>> 独立占用一行的标签
行内标签>>>> 不会独立占用一行的标签
网页的布局基本都是用块标签来完成的
一般做布局 使用的标签是 div 帮助我们将网页划分成多个小方块
Div边线的类型
3.1. 盒子模型基本用法
其实就是通过标签的内边距和外边距的特点调整两个有包含关系的标签的位置
3.1.1. 内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div1{
border: 1px groove red;
width: 400px;
height: 400px;
/*内边距 内部元素距离当前块元素边界的距离*/
/*同时设置上下左右四个内边距都是100px*/
/*padding:100px;*/
/*设置上下内边距为50px 左右内边距为100px */
/*padding:50px 100px;*/
/*设置 上 右 下 左 四个内边距*/
/*padding: 10px 20px 30px 40px;*/
/*分别单独设置四个内边距*/
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
</style>
</head>
<body>
<div id="div1">
asdfasdfasdf
</div>
</body>
</html>
3.1.2. 外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
border: 1px solid red;
background-color: darkseagreen;
width: 300px;
height: 300px;
/*外边距 当前块标签外部的和父级块标签之间的距离*/
/*设置当前模块上下左右四个外边距都是200px*/
/*margin: 200px;*/
/*设置上下外边距为50px 设置左右外边距为100px*/
/*margin: 50px 100px;*/
/*设置 上 右 下 左 四个外边距*/
/*margin: 10px 20px 30px 40px;*/
/*单独设置四个外边距*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="div1"></div>
asdfasdfasdf
</body>
</html>
3.2. 使用盒子模型设置居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outerdiv{
width: 400px;
height: 400px;
border: 1px solid red;
/*调整外边盒子的内边距*/
/*padding-top: 20px;
padding-left: 20px;*/
/*通过外边距设置横向居中*/
margin: 0px auto;
}
.innerdiv{
width: 200px;
height: 200px;
border: 1px solid green;
/*设置盒子的外边距*/
/*margin-top: 20px;
margin-left: 20px;*/
/*设置横向居中*/
margin: auto auto;
}
</style>
</head>
<body>
<div class="outerdiv">
<div class="innerdiv">
你好
</div>
</div>
</body>
</html>
3.3. 块元素和行内元素的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: lightyellow;
border: 1px solid lightcoral;
margin: 0px auto;
}
.s1{
/*行内元素设置宽和高未必有效
*块元素设置宽和高一定有效的
* */
width: 100px;
height: 100px;
background-color: greenyellow;
border: 1px solid blue;
/*span 是一个行内元素
* 行内元素没有盒子模型
* 行内元素没有办法设置内边距和外边距特征
* 只有块标签才有盒子模型 才可以设置内边距和外边距
* 如果一个行内标签 非要使用盒子模型那么可以将行内元素转换为块元素
* display block 行内转换为块 inline 块转换为行内
* */
display: block;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1">
<span class="s1">今天是3月6号</span>
</div>
</body>
</html>
第四节：浮动和定位
4.1. 浮动
可以让多个块标签处于同一行 不用转换成行内元素 宽和高以及盒子模型的特征的以保留
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outerDiv{
border: 1px solid blue;
width: 1000px;
height: 500px;
margin: 0px auto;
}
#d1,#d2,#d3{
border: 1px solid red;
width: 400px;
height: 200px;
/*向右 浮动*/
/*float: right;*/
/*向左 浮动*/
float: left;
margin-left:20px;
margin-bottom: 20px;
}
#d1{
background-color: greenyellow;
}
#d2{
background-color:aqua;
}
#d3{
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="outerDiv">
<div id="d1">
<h1>1</h1>
</div>
<div id="d2">
<h1>2</h1>
</div>
<div id="d3">
<h1>3</h1>
</div>
</div>
</body>
</html>
4.2. 浮动案例
<head>
<meta charset="utf-8">
<title></title>
<style>
.ad_item a img{
width: 590px;
height: 160px;
}
.ad_item{
width: 590px;
height: 160px;
float: left;
}
#ad2,#ad4{
margin-left: 10px;
}
#ad3,#ad4{
margin-top: 20px;
}
#ad{
width: 1190px;
height: 340px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="ad">
<div id="ad1" class="ad_item">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
<img src="https://www.12306.cn/index/images/abanner01.jpg" />
</a>
</div>
<div id="ad2" class="ad_item">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
<img src="https://www.12306.cn/index/images/abanner02.jpg" />
</a>
</div>
<div id="ad3" class="ad_item">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
<img src="https://www.12306.cn/index/images/abanner03.jpg" />
</a>
</div>
<div id="ad4" class="ad_item">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
<img src="https://www.12306.cn/index/images/abanner04.jpg" />
</a>
</div>
</div>
</body>
4.3. 定位
4.3.1. 绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.div1{
height: 200px;
width: 200px;
background-color: gray;
/*绝对定位 基于父级标签原点
移开以后会自动释放父级标签原点位置*/
position: absolute;
top: 100px;
left: 100px;
}
.div2{
height: 200px;
width: 200px;
background-color: burlywood;
position: absolute;
top: 400px;
left: 400px;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
</body>
</html>
4.3.2. 相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.div1{
height: 200px;
width: 200px;
background-color: gray;
/*相对定位 相对于自身原来的位置,移开之后,不会释放原点位置*/
position: relative;
top: 100px;
left: 100px;
}
.div2{
height: 200px;
width: 200px;
background-color: burlywood;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
</body>
</html>
4.3.3. 相对浏览器窗口定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.div1{
height: 200px;
width: 200px;
background-color: yellow;
position: absolute;
top: 0px;
left: 0px;
}
.div2{
height: 200px;
width: 200px;
background-color: burlywood;
/*相对浏览器窗口定位*/
position: fixed;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
</body>
</html>
4.4. 定位案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.note{
/*border: 1px solid red;*/
width: 50px;
height: 395px;
position: fixed;
right: 0px;
top: 150px;
}
.note_item1{
height: 86px;
width: 50px;
margin-bottom:5px;
}
.note_item2{
height: 122px;
width: 50px;
}
</style>
</head>
<body>
<div class="note">
<div class="note_item1">
<img src="img/note1.png" />
</div>
<div class="note_item1">
<img src="img/note2.png" />
</div>
<div class="note_item1">
<img src="img/note3.png" />
</div>
<div class="note_item2">
<img src="img/note4.png" />
</div>
</div>
br*100
</body>
</html>
第五节：列表标签及案例开发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
}
.outerintroduce{
width: 1190px;
height: 300px;
margin: 0px auto;
}
.introduce{
border: 1px solid #3B99FC;
width: 388px;
height: 298px;
float: left;
}
.introduce h3{
height: 40px;
text-align: center;
line-height: 40px;
background-color: #3B99FC;
color: white;
}
.introduce ul{
list-style: none;
margin-left: 50px;
list-style-image: url(img/dot.png);
}
.introduce ul li {
line-height: 45px;
}
.introduce ul a{
text-decoration: none;
color: darkslategray;
}
.introduce ul a:hover{
color: black;
}
#i1,#i2{
margin-right: 10px;
}
</style>
</head>
<body>
<div class="outerintroduce">
<div id ="i1" class="introduce">
<!--标题-->
<h3>最新发布</h3>
<!--列表-->
<ul>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
</ul>
</div>
<div id ="i2" class="introduce">
<!--标题-->
<h3>最新发布</h3>
<!--列表-->
<ul>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
</ul>
</div>
<div class="introduce">
<!--标题-->
<h3>最新发布</h3>
<!--列表-->
<ul>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
<a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
</div>
</div>
</body>
</html>
扫一扫
9631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
