css基础知识
选择器
基本选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 标签选择器 */
span{
font-weight: bolder;
}
/* id选择器 */
#i1{
color:blue;
}
/* 类选择器 */
.item{
color: red;
}
/* 通用选择器 */
*{
background-color: yellow;
}
</style>
</head>
<body>
<span>tom</span>
<p>hello</p>
<p id="i1">hello</p>
<p class="item">hello</p>
<p class="item">hello</p>
<p class="item">hello</p>
<p class="item">hello</p>
<p class="item">hello</p>
</body>
</html>
组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 多元素选择器 */
#i1,#i2,.c1{
background-color: red;
}
/* 后代元素选择器（有空格是后代选择器, 没有空格是且选择器） */
.c2 .c3{
background-color: blue;
}
/* 且选择器 */
p.c4{
background-color: green;
}
/* 子代选择器 */
.c5 > .c6{
background-color: yellow;
}
/* 毗邻元素选择器 只匹配挨着C7的C8标签 只往下找 */
.c7 + .c8{
background-color: red;
}
/* 普通兄弟选择器 只往下找 */
.c9 ~ .c10{
background-color: red;
}
</style>
</head>
<body>
<!-- 多元素选择器 -->
<p id="i1">tom</p>
<p id="i2">jerry</p>
<div class="c1">lisa</div>
<hr>
<!-- 后代选择器 -->
<div class="c2">
<p class="c3">tom is dsb!</p>
<div>
<p class="c3">tom</p>
</div>
</div>
<div class="c3">jerry</div>
<hr>
<!-- 且选择器 -->
<span class="c4">123</span>
<p class="c4">456</p>
<hr>
<!-- 子选择器 -->
<div class="c5">
<div class="c6">tom 子代</div>
<div>
<div class="c6"> tom 孙代</div>
</div>
</div>
<hr>
<!-- 毗邻选择器 -->
<div class="c8">c888881</div>
<div class="c7">c777772</div>
<div class="c8">c888883</div>
<div class="c8">c888884</div>
<div class="c8">c888885</div>
<div class="c8">c888886</div>
<hr>
<!-- 普通兄弟选择器 -->
<div class="c10">1010101010</div>
<div class="c9">9999</div>
<div class="c10">1010101010</div>
<div class="c10">1010101010</div>
<div class="c10">1010101010</div>
<div class="c8">c8c8c8c8</div>
<div class="c10">1010101010</div>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 属性选择器 */
/* 固有属性选择器 */
[type='text']{
border: 1px solid blue;
}
/* 自定义属性选择器 */
[name='xxx']{
background-color: red;
}
/* 组合选择器之且选择器 */
div[name=xxx]{
background-color: yellow;
}
</style>
</head>
<body>
<!-- 固有属性选择器 -->
<div>
<input type="text">
</div>
<hr>
<!-- 自定义属性选择器 -->
<p name="xxx">11111111</p>
<p name="bbb">22222222</p>
<hr>
<!-- 组合选择器之且选择器 -->
<div name="xxx">33333333</div>
</body>
</html>
选择器优先级
选择器优先级1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
选择器权重
id:100
class:10
标签:1
*/
/* 标签 */
p{
color:yellow;
}
/* id */
#i1{
color: red;
}
/* class */
.c1{
color:blue;
}
</style>
</head>
<body>
<p class="c1" id="i1">aaaaaaaaaaaaa</p>
</body>
</html>
选择器优先级2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 选择器权重 id选择器:100 class选择器/属性选择器:10 标签选择器:1 */
/* 优先级：权重相加，大的优先 */
/* 如果权重相等，那么谁在后面听谁的 */
.c3{
color:red;
}
div.c3{
color:blue;
}
.c2 .c3{
color: yellow;
}
.c1 .c3{
color:grey;
}
.c4{
background-color: yellow;
}
[name='xxx']{
background-color: red;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
<div class="c3">666</div>
</div>
</div>
<hr>
<div name="xxx" class="c4">属性选择器</div>
</body>
</html>
选择器优先级3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 选择器权重 id选择器:100 class选择器/属性选择器:10 标签选择器:1 */
/* 直接在标签中写 style 的权重最大，比id选择器还要大 */
/* 优先级：权重相加，大的优先 */
/* 如果权重相等，那么谁在后面听谁的 */
#i1{
background-color:red;
}
</style>
</head>
<body>
<!-- 直接在标签中写 style 的权重最大，比id选择器还要大 -->
<div id="i1" style="background-color:blue;">10000000</div>
</body>
</html>
选择器优先级4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 选择器权重 id选择器:100 class选择器/属性选择器:10 标签选择器:1 */
/* 直接在标签中写 style 的权重最大，比id选择器还要大 */
/* 优先级：权重相加，大的优先*/
/* 如果权重相等，那么谁在后面听谁的 */
#i1{
background-color:red !important; /* !important :强制使用，不比权重大小 */
}
</style>
</head>
<body>
<!-- 直接在标签中写 style 的权重最大，比id选择器还要大 -->
<div id="i1" style="background-color:blue;">10000000</div>
</body>
</html>
css的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 3、外部式引入 -->
<link rel="stylesheet" href="yangshi.css">
<style>
/* 2、嵌入式引入 */
.c1{
background-color: red;
}
</style>
</head>
<body>
<!--
CSS的引入方式：
1、行内式引入
2、嵌入式引入
3、外部式引入(建议使用这种)
-->
<!-- 1、行内式引入 -->
<p style="color: red">行内式引入</p>
<p class="c1">嵌入式引入</p>
<p class="c2">外部式引入</p>
</body>
</html>
yangshi.css
.c2{
background-color: #7A77C8;
}
静态文件请求
问题：为什么我只输入了www.baidu.com 会发生红框中那么多的请求，按理说只应该是蓝框中的www.baidu.com 才对呀？
如图
解答：浏览器第一次向服务器发送请求成功以后，服务器响应发送给浏览器一堆字符串。然后浏览器开始解析这堆字符串。如果这堆字符串中没有了其他的静态文件，那么浏览器的请求就结束了
所以分为两种情况
第一种情况：没有其他多余的静态文件
浏览器从上往下开始解析蓝框中的字符串，解析完毕以后加载到页面。没有其他的静态文件，那么解析结束
注意一点：谷歌浏览器如果你不给他一个ICON，那么它会自动的再去服务器请求一下有没有ICON
第二种情况：有其他的静态文件
浏览器从上往下解析服务器响应的字符串，然后发现蓝框标记的<img>标签中的静态资源（图片），于是，浏览器会另外开一个线程去拿取这张图片静态资源，主线程继续往下解析其他的字符串。
这也是为什么有时候网速慢的时候，图片往往加载的速度比字符的速度要慢
由此：当我们只在浏览器的地址框中输入 www.baidu.com 为什么会发送那么多请求了。那是因为浏览器在解析百度服务器响应的字符串的时候，遇到了大量的静态资源需要请求
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
/* 字体颜色，也可以用颜色代码表表示 */
color: yellow;
/* 背景颜色 */
background-color: red;
/* 字体粗细 100~900 */
font-weight: 600;
/* 字体大小 */
font-size: 20px;
/* 字体倾斜 */
font-style: italic;
/* 文本对齐方式，默认在左边 */
text-align: right;
/* 字体样式 */
font-family: 宋体;
}
.c2 {
/* 两端对其 */
text-align: justify;
}
.c3{
width: 300px;
height: 300px;
background-color: gray;
/* 水平居中 */
text-align: center;
/* 垂直居中，值等于height的值 */
line-height: 300px;
}
img{
height: 100px;
width: 100px;
/* 图片和文字相对位置的微调，一般应用在img标签或者图标标签 */
vertical-align: -44px;
}
</style>
</head>
<body>
<!-- 常见文本样式 -->
<p class="c1">TOM</p>
<!-- 两端对齐 -->
<p class="c2">sfjas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;
slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjd
l;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflk
sjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkj
as;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ld
fjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldf
kj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;df
jas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa
;slfjas;ldfjsa;ldfjsa;ldfkj;aslfjd;slakjfa;ljdflajfdas;fjsa;ldfjas;dfjas;dfjas;ldfjas;ld
fjas;ldfjas;ldfjasl;dfjaskldfjasl;dfjal;sdfjas;ldfjaslkfjdasdf
</p>
<!-- 水平和垂直居中 -->
<div class="c3">Jerry</div>
<!-- 在html中，图片也可以看做是一个文本 -->
<!-- 图片和文字相对位置的微调 -->
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2986333581,3955387280&fm=26&gp=0.jpg" >中国
</body>
</html>
背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 300px;
height: 300px;
background-color: gray;
}
.c2{
/*边框*/
border: 1px solid red;
width: 800px;
height: 600px;
/*背景图片*/
/*background-image: url("12背景图片.png");*/
/*水平方向填充*/
/*background-repeat: repeat-x;*/
/*垂直方向填充*/
/*background-repeat: repeat-y;*/
/*默认全部填充*/
/*不填充*/
/*background-repeat: no-repeat;*/
/*背景图片位置调整*/
/*background-position: bottom right;*/
/*简写*/
background: url("12背景图片.png") no-repeat center left;
}
</style>
</head>
<body>
<!--背景颜色-->
<div class="c1"></div>
<!--背景图片-->
<div class="c2"></div>
</body>
</html>
12背景图片.png
边框属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 300px;
width: 300px;
/*边框颜色*/
/*border-color: red;*/
/*边框线条属性 实线*/
/*border-style: solid;*/
/*边框的宽度*/
/*border-width: 1px;*/
/*简写*/
border: gray dashed 10px;
/*右边的边框去除*/
border-right: none;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
/*空心圆*/
/*list-style: circle;*/
/*方块*/
/*list-style: square;*/
/**/
list-style: none;
}
</style>
</head>
<body>
<!--布局轮播图的时候常用这个-->
<ul class="c1">
<li>假装我是图片</li>
<li>假装我是图片</li>
<li>假装我是图片</li>
</ul>
</body>
</html>
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 300px;
width: 300px;
background-color: #222222;
/*border: red solid 1px;*/
/*display=none 时候完全消失，不占位置*/
/*display: none;*/
display: inline-block;
}
.c2{
height: 300px;
width: 300px;
background-color: gray;
display: inline-block;
}
.c3{
height: 300px;
width: 300px;
background-color: red;
display: inline-block;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<!--display属性
display=none 时候完全消失，不占位置
display=block 把内联标签变成块级标签
display=inline 把块级标签变成内联标签
display=inline-block 可设置长宽，且不独占一行（这个常用）
-->
</body>
</html>
内外边距盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.c1{
border: red solid 1px;
height: 300px;
width: 300px;
/*文本位置设置*/
text-align: center;
line-height: 300px;
/*内边距设置*/
/*padding: 50px;*/
/*向上扩100像素*/
/*padding-top: 100px;*/
/*上右下左，顺时针*/
padding: 10px 20px 30px 40px;
/*整个盒子居中*/
margin: 100px auto;
}
.c2{
background-color: gray;
}
.c3{
height: 200px;
width: 200px;
background-color: red;
/*外边距 可以设置负值*/
margin: -20px;
}
</style>
</head>
<body>
<!--
外边距：margin
内边距：padding
-->
<!--内边距-->
<div class="c1">
<div class="c2">yuan</div>
</div>
<!--外边距-->
<div class="c3"></div>
</body>
</html>
float浮动属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.c1{
background-color: red;
height: 200px;
width: 200px;
/*浮动*/
float: left;
}
.c2{
background-color: gray;
height: 200px;
width: 200px;
float: left;
}
.c3{
background-color: #222222;
height: 200px;
width: 200px;
float: right;
margin-right: 100px;
}
</style>
</head>
<body>
<!--
浮动元素漂浮依据：
假如某个div元素A是浮动的，
情况1：如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；
情况2：如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
-->
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.c1{
background-color: red;
height: 200px;
width: 200px;
/*浮动*/
float: right;
}
.c2{
background-color: gray;
height: 200px;
width: 200px;
/*浮动*/
float: left;
/*清除浮动 左右都不能有浮动*/
clear: both;
}
.c3{
background-color: #222222;
height: 200px;
width: 200px;
float: left;
}
</style>
</head>
<body>
<!--注意浏览器加载源码的顺序，永远是从上往下加载代码-->
<!-- 解决父级坍塌现象
clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素
-->
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
postion属性
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100%;
height: 5000px;
background-color: gray;
}
.c2{
width: 80px;
height: 40px;
background-color: #222222;
color: white;
/*里面文本的位置*/
text-align: center;
line-height: 40px;
/*固定定位*/
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="c1"></div>
<!--固定定位，定位在右下角，会盖住下面一层的文字-->
<div class="c2">返回顶部</div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.c1{
background-color: red;
height: 200px;
width: 200px;
}
.c2{
background-color: #808080;
height: 200px;
width: 200px;
position: relative;
top: 200px;
left: 200px;
}
.c3{
background-color: #222222;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<!--
定位：
position: relative 相对定位，不脱离文档流，以自己原位置为参照物
绝对定位：完全脱离文档流，以已定位了的父级标签为参照物
-->
<!--相对定位-->
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.c1{
background-color: red;
height: 200px;
width: 200px;
}
.c2{
background-color: gray;
height: 200px;
width: 200px;
position: absolute;
top: 200px;
left: 800px;
}
.c3{
background-color: #222222;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<!--
定位：
position: relative 相对定位，不脱离文档流，以自己原位置为参照物
position: absolute 绝对定位，完全脱离文档流，以已定位了的父级标签为参照物
-->
<!--绝对定位-->
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
相对定位和绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.c1{
background-color: red;
height: 200px;
width: 200px;
}
.c2{
background-color: gray;
height: 200px;
width: 200px;
position: absolute;
top: 400px;
left: 200px;
}
.c3{
background-color: #222222;
height: 200px;
width: 200px;
}
.f1{
border: red solid 1px;
position: relative;
}
</style>
</head>
<body>
<!--
定位：
position: relative 相对定位，不脱离文档流，以自己原位置为参照物
position: absolute 绝对定位，完全脱离文档流，以已定位了的父级标签为参照物
-->
<div class="c1"></div>
<!--relative+absolute定位-->
<!--常用 relative + absolute-->
<div class="f1">
<div class="c2"></div>
</div>
<div class="c3"></div>
</body>
</html>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.lunbotu{
width: 590px;
height: 470px;
border: red solid 1px;
margin: 100px auto;
position: relative;
}
.imgs{
list-style: none;
}
.imgs li{
position: absolute;
top: 0;
left: 0;
}
.anniu .anniu1{
position: absolute;
top: 200px;
left: 0;
}
.anniu .anniu2{
position: absolute;
top: 200px;
left: 568px;
}
.kongxinyuan{
/*position: absolute;*/
/*bottom: 20px;*/
/*left: 0;*/
margin: 4px;
width: 10px;
height: 10px;
border: 1px solid gray;
border-radius: 10px;
float: left;
}
.base_yuandian{
height: 20px;
width: 120px;
position: absolute;
bottom: 20px;
left: 60px;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div class="lunbotu">
<ul class="imgs">
<!--轮播图-->
<li><a href=""><img src="imgs/1.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/2.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/3.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/4.jpg" alt=""></a></li>
<!--左右按钮-->
<div class="anniu">
<li class="anniu1"><a href="https://www.baidu.com"><img src="imgs/anniu1.png" alt=""></a></li>
<li class="anniu2"><a href="https://www.taobao.com"><img src="imgs/anniu2.png" alt=""></a></li>
</div>
<!--圆点按钮-->
<div class="base_yuandian">
<a href=""><div class="kongxinyuan"></div></a>
<a href=""><div class="kongxinyuan"></div></a>
<a href=""><div class="kongxinyuan"></div></a>
<a href=""><div class="kongxinyuan"></div></a>
</div>
</ul>
</div>
</body>
</html>
转载请注明出处哟~
https://www.cnblogs.com/lichengguo
