一、CSS的引用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1CSS的引用方式</title>
<!--外接样式-->
<link rel="stylesheet" href="./index.css">
<!--内接样式-->
<style type="text/css">
div{
margin: 200px;
padding: 200px;
}
</style>
</head>
<body>
<!--行内样式-->
<div style="width: 200px;height: 200px;background: red"></div>
</body>
</html>
二、CSS的基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2CSS的基本选择器</title>
<style type="text/css">
/*标签选择器*/
div{
width: 200px;
height: 200px;
background: red;
}
/*ID选择则器*/
#box{
width: 200px;
height: 200px;
background: red;
}
/*类选择器*/
/*同一个标签中可以携带多个类,用空格隔开*/
.box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
三、CSS的高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.CSS的高级选择器</title>
<style type="text/css">
/*后代选择器*/
/*父元素的后代(包括儿子,孙子,重孙子)*/
div p{
color: red;
}
/*子代选择器*/
/*仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。*/
div>p{
color: yellow;
}
/*并集选择器*/
p,a{
color: blue;
}
/*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*!*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*并集选择器*/
/*第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active*/
div.box1{
background: blue;
}
</style>
</head>
<body>
<div class="box1" id="box">
<div class="box2">
<p>我是孙子标签</p>
<a href="#">我是a标签</a>
</div>
<p>我是儿子标签</p>
</div>
</body>
</html>
四、CSS的伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4CSS的伪类选择器</title>
<style type="text/css">
/*没有被访问的a标签的样式*/
a:link{
color: black;
text-decoration: none;
}
/*访问过后的a标签的样式*/
a:visited{
color: black;
}
/*鼠标悬停时a标签的样式*/
a:hover{
color: blue;
}
/*鼠标摁住的时候a标签的样式*/
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="#">点我</a>
</body>
</html>
五、CSS的伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5CSS的伪元素选择器</title>
<style type="text/css">
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content: "X";
}
/*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
p:after{
content: "Y";
}
</style>
</head>
<body>
<p>我是P标签</p>
</body>
</html>
六、CSS的继承性和层叠性(权重)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6CSS的继承性和权重</title>
<style type="text/css">
/*继承性*/
/*可以继承的属性:color 、 font-*、 text-*、line-* ,主要是文本级的标签元素。*/
/*不能继承的属性:定位的元素(浮动,绝对定位,固定定位)*/
/*权重*/
/*数数:id的数量 class的数量 标签的数量,顺序不能乱*/
/*先看标签元素有没有被选中,如果选中了,就数数 (id,class,标签的数量) 谁的权重大 就显示谁的属性。权重一样大,后来者居上*/
/*如果没有被选中标签元素,权重为0。 如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" : 谁描述的近,就显示谁的属性*/
/*1 0 0*/
#box{
width: 30px;
height: 30px;
color: red;
}
/*0 1 0*/
.box{
width: 30px;
height: 30px;
color: red;
}
/*0 0 1*/
div{
width: 30px;
height: 30px;
color: red;
}
/*权重示例2*/
/*201*/
#box1 #box2 p{
color: yellow;
}
/*111*/
#box2 .wrap3 p{
color: red;
}
/*103*/
div div #box3 p{
color: purple;
}
/*031*/
div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色?</p>
</div>
</div>
</div>
</body>
</html>
七、CSS的盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7盒模型</title>
<style type="text/css">
/*那么在这里要注意看了。标准盒模型,width不等于盒子真实的宽度。
另外如果要保持盒子真实的宽度,那么加padding就一定要减width,减padding就一定要加width。真实高度一样设置。*/
div{
width: 200px; /*width:内容的宽度*/
height: 200px; /*height: 内容的高度*/
background-color: #2892F1;
margin: 50px; /*margin:外边距,盒子边框到附近最近盒子的距离*/
padding: 50px; /*padding:内边距,边框到内容的距离*/
border: 5px solid red;/*border: 边框,就是指的盒子的宽度*/
}
/*那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置*/
/*我们现在初学可以使用通配符选择器*/
*{
padding:0;
margin:0;
}
/*https://unpkg.com/[email protected]/reset.css*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
八、border制作三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 0;
height: 0;
border-bottom: 60px solid red;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
九、块级元素和行内元素
"""
学习的初期,我们就要知道,标准文档流等级森严。标签分为两种等级:
行内元素
块级元素
行内元素:
与其他行内元素并排;
不能设置宽、高。默认的宽度,就是文字的宽度。
块级元素:
霸占一行,不能与其他任何元素并列;
能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%。
从HTML的角度来讲,标签分为:
文本级标签:p、span、a、b、i、u、em。
容器级标签:div、h系列、li、dt、dd。
PS:为甚么说p是文本级标签呢?因为p里面只能放文字&图片&表单元素,p里面不能放h和ul,p里面也不能放p。
现在,从CSS的角度讲,CSS的分类和上面的很像,就p不一样:
行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级,但是是个块级元素。
块级元素:所有的容器级标签都是块级元素,还有p标签。
块级元素和行内元素的相互转换
我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素可以转换为行内元素:
一旦,给一个块级元素(比如div)设置:display: inline;
那么,这个标签将立即变为行内元素,此时它和一个span无异。inline就是“行内”。也就是说:
此时这个div不能设置宽度、高度;
此时这个div可以和别人并排了
行内元素转换为块级元素:
同样的道理,一旦给一个行内元素(比如span)设置:display: block;
那么,这个标签将立即变为块级元素,此时它和一个div无异。block”是“块”的意思。也就是说:
此时这个span能够设置宽度、高度
此时这个span必须霸占一行了,别人无法和他并排
如果不设置宽度,将撑满父亲
标准流里面的限制非常多,导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:移民!脱离标准流!
css中一共有三种手段,使一个元素脱离标准文档流:
(1)浮动
(2)绝对定位
(3)固定定位
"""
十、浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10浮动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*浮动*/
.box{
float: left;
width: 200px;
height: 200px;
}
.box1{
background: red;
}
.box2{
background: blue;
}
.outer{
background: black;
}
/*清除浮动带来的影响*/
.outer:after{
content: "";
display: block;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="outer">
<div class="box1 box"></div>
<div class="box2 box"></div>
</div>
</body>
</html>
十一、overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11overflow</title>
<style type="text/css">
.box{
float: left;
height: 200px;
width: 200px;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
}
.outer_box{
background-color: black;
overflow: hidden;
}
</style>
</head>
<body>
<div class="outer_box clearfix">
<div class="box1 box"></div>
<div class="box2 box"></div>
</div>
</body>
</html>
十二、margin
"""
当一个div元素设置margin:0 auto;时就会居中盒子,那我们知道margin:0 auto;表示上下外边距离为0,左右为auto的距离,那么auto是什么意思呢?
设置margin-left:auto;我们发现盒子尽可能大的右边有很大的距离,没有什么意义。当设置margin-right:auto;我们发现盒子尽可能大的左边有很大的距离。
当两条语句并存的时候,我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。
另外如何给盒子设置浮动,那么margin:0 auto失效。
使用margin:0 auto;注意点:
1.使用margin: 0 auto;水平居中盒子必须有width,要有明确width,文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了,固定定位,绝对定位(后面会讲),margin:0 auto; 不能用了
3.margin:0 auto;居中盒子。而不是居中文本,文字水平居中使用text-align: center;
另外大家一定要知道margin属性是描述兄弟盒子的关系,而padding描述的是父子盒子的关系
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12margin</title>
<style type="text/css">
.box1{
width: 200px;
height: 180px;
background-color: red;
padding-top: 20px;
}
.box2{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
十三、文本属性和字体属性
"""
文本属性
介绍几个常用的。
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
属性值:none | center | left | right | justify
文本颜色
color属性
文本首行缩进
text-indent 属性规定元素首行缩进的距离,单位建议使用em
文本修饰
text-decoration属性规定文本修饰的样式
属性值:none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)
行高
line-height就是行高的意思,指的就是一行的高度。
字体属性
字体大小
font-size表示设置字体大小,如果设置成inherit表示继承父元素的字体大小值。
字体粗细
font-weight表示设置字体的粗细
属性值:none(默认值,标准粗细) | bold(粗体) | border(更粗)| lighter(更细) | 100~900(设置具体粗细,400等同于normal,而700等同于bold)| inherit(继承父元素字体的粗细值)
字体系列
font-family
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。
行高 line-height
针对单行文本垂直居中
公式:行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本。
针对多行文本垂直居中
行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。
第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px; 那么就知道行高*5=150px
第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
font-family介绍
使用font-family注意几点:
1.网页中不是所有字体都能用哦,因为这个字体要看用户的电脑里面装没装,
比如你设置: font-family: "华文彩云"; 如果用户电脑里面没有这个字体,
那么就会变成宋体
页面中,中文我们只使用: 微软雅黑、宋体、黑体。
如果页面中,需要其他的字体,那么需要切图。 英语:Arial 、 Times New Roman
2.为了防止用户电脑里面,没有微软雅黑这个字体。
就要用英语的逗号,隔开备选字体,就是说如果用户电脑里面,
没有安装微软雅黑字体,那么就是宋体:
font-family: "微软雅黑","宋体"; 备选字体可以有无数个,用逗号隔开。
3.我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体,
就自动的变为后面的中文字体:
font-family: "Times New Roman","微软雅黑","宋体";
4.所有的中文字体,都有英语别名,
我们也要知道: 微软雅黑的英语别名:
font-family: "Microsoft YaHei";
宋体的英语别名: font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一: font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比,表示字号的百分之多少。
一般来说,都是大于100%的,因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来,比如: font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”
"""
十四、精灵图技术
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*background-img:表示设置该元素的背景图片*/
/*那么发现默认的背景图片,水平方向和垂直方向都平铺*/
/*background-repeat:表示设置该元素平铺的方式*/
/*repeat 默认。背景图像将在垂直方向和水平方向重复。*/
/*repeat-x 背景图像将在水平方向重复。*/
/*repeat-y 背景图像将在垂直方向重复。*/
/*no-repeat 背景图像将仅显示一次。*/
/*inherit 规定应该从父元素继承 background-repeat 属性的设置。*/
/*background-attach*/
/*设置fixed之后,该属性固定背景图片不随浏览器的滚动而滚动*/
div{
width: 100px;
height: 100px;
background-image: url("14.jpg");
background-position: -100px -100px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>