前引
CSS,层叠样式表(Cascading Style Sheets),能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有网页对象和模型样式编辑的能力,简单来说,美化页面。
1.引入css的方式有三种
一.引入css的方式有三种:1.行内式在标签内使用style属性来设置css样式语法:style="样式名:样式值;样式名;样式值;......<div style="width: 100px; height: 100px; background-color: red;"></div>优点:1.直接在标签内引入css样式,方便查看和修改2.优先级高,可以覆盖其他css样式3.可以快速查看效果,不需要刷新页面4.可以快速修改样式,不需要修改其他文件缺点:总结: 代码复用度低,不利于维护 css样式和html结构代码交织,影响阅读,性能1.代码冗余,每个标签都需要写style属性2.不利于维护,如果需要修改样式,需要修改每个标签的style属性3.不利于复用,如果需要复用样式,需要复制粘贴代码6.不利于兼容,如果需要兼容不同浏览器,需要手动添加兼容代码8.不利于优化,如果需要优化代码,需要手动添加优化代码2.嵌入式在html页面中,通过head标签创建style标签,在style标签中编写css样式,定义本页面公共样式需要通过选择器确定样式的作用元素语法:选择器{样式名:样式值;样式名:样式值;......}<选择器 {样式名:样式值;样式名:样式值;......}>优点:1.代码复用度高,可以复用样式2.可以维护,如果需要修改样式,只需要修改style标签中的样式缺点:1.代码冗余,每个标签都需要写style属性2.不利于维护,如果需要修改样式,需要修改每个标签的style属性3.不利于复用,如果需要复用样式,需要复制粘贴代码4.不利于优化,如果需要优化代码,需要手动添加优化代码注意:style标签必须放在head标签中注意:style标签可以引入多个css文件注意:style标签引入的css文件会覆盖之前的css文件3.外部式在html页面中创建link标签,在link标签中引入外部的css文件<link rel="stylesheet" href="css文件路径">注意:link标签必须放在head标签中注意:link标签可以引入多个css文件注意:link标签引入的css文件会覆盖之前的css文件
行内式与嵌入式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css引入</title><!-- 嵌入式--><style>/*元素选择器,通过标签名确定样式的作用元素*/input{width: 100px;height: 100px;background-color: turquoise;color: violet;font-size: 20px;font-family: '微软雅黑';border: 2px solid #00d9ff;border-radius: 5px;}</style></head>
<body>
<!--
一.引入css的方式有三种:1.行内式在标签内使用style属性来设置css样式语法:style="样式名:样式值;样式名;样式值;......<div style="width: 100px; height: 100px; background-color: red;"></div>优点:1.直接在标签内引入css样式,方便查看和修改2.优先级高,可以覆盖其他css样式3.可以快速查看效果,不需要刷新页面4.可以快速修改样式,不需要修改其他文件缺点:总结: 代码复用度低,不利于维护 css样式和html结构代码交织,影响阅读,性能1.代码冗余,每个标签都需要写style属性2.不利于维护,如果需要修改样式,需要修改每个标签的style属性3.不利于复用,如果需要复用样式,需要复制粘贴代码6.不利于兼容,如果需要兼容不同浏览器,需要手动添加兼容代码8.不利于优化,如果需要优化代码,需要手动添加优化代码2.嵌入式在html页面中,通过head标签创建style标签,在style标签中编写css样式,定义本页面公共样式需要通过选择器确定样式的作用元素语法:选择器{样式名:样式值;样式名:样式值;......}<选择器 {样式名:样式值;样式名:样式值;......}>优点:1.代码复用度高,可以复用样式2.可以维护,如果需要修改样式,只需要修改style标签中的样式缺点:1.代码冗余,每个标签都需要写style属性2.不利于维护,如果需要修改样式,需要修改每个标签的style属性3.不利于复用,如果需要复用样式,需要复制粘贴代码4.不利于优化,如果需要优化代码,需要手动添加优化代码注意:style标签必须放在head标签中注意:style标签可以引入多个css文件注意:style标签引入的css文件会覆盖之前的css文件3.外部式在html页面中创建link标签,在link标签中引入外部的css文件<link rel="stylesheet" href="css文件路径">注意:link标签必须放在head标签中注意:link标签可以引入多个css文件注意:link标签引入的css文件会覆盖之前的css文件
-->
<h1>行内式</h1>
<input type="button" value="原神启动"style="width: 100px;height: 100px;background-color: turquoise;color: violet;font-size: 20px;font-family: '微软雅黑';border: 2px solid #00d9ff;border-radius: 5px;"><h1>嵌入式</h1><input type="button" value="崩铁启动">
<input type="button" value="崩坏3启动">
<input type="button" value="鸣潮启动"></body>
</html>
外部式引入
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01.1.外部式引入</title><link href="/CSS学习/CSS表文件/外部式.css" rel="stylesheet">
</head>
<body>
<h1>外部式</h1>
<input type="button" value="崩铁启动">
<input type="button" value="崩坏3启动">
<input type="button" value="鸣潮启动">
</body>
</html>
2.CSS选择器
CSS选择器 /*主要*/1.元素选择器语法:<style>标签名{}</>style>例如:p{} h1{} div{} span{}2.类选择器语法:.类名{}例如:.box{} .red{} .blue{} .green{}3.id选择器语法:#id名{}例如:#box{} #red{} #blue{} #green{}/*次要*/4.属性选择器语法:[属性名]{}例如:[title]{}5.伪类选择器语法:元素名:伪类名{}例如:a:hover{}6.伪元素选择器语法:元素名::伪元素名{}例如:p::first-letter{}7.组合选择器语法:元素名1 元素名2{}例如:p span{}8.群组选择器语法:选择器1,选择器2,选择器3{}例如:p,h1,div{}9.继承选择器语法:元素名1 元素名2{}例如:p span{}10.后代选择器语法:元素名1 元素名2{}例如:p span{}11.子元素选择器语法:元素名1 > 元素名2{}例如:p > span{}12.相邻兄弟选择器语法:元素名1 + 元素名2{}例如:p + span{}13.通用兄弟选择器语法:元素名1 ~ 元素名2{}例如:p ~ span{}14.否定选择器语法:元素名1:元素名2{}例如:p:元素名2{}15.优先级选择器语法:元素名1:元素名2{}例如:p:元素名2{}16.通配符选择器语法:元素名1:元素名2{}例如:p:元素名2{}17.属性选择器语法:元素名1:元素名2{}例如:p:元素名2{}18.伪类选择器语法:元素名1:元素名2{}例如:p:元素名2{}
元素选择器
语法格式:标签名{ }
在{ }中的css样式会作用到所有标签名对应的标签上
缺点:若某些同名标签的元素不希望使用某些样式,不能与其他同名标签的元素区分
1.元素选择器 根据标签名确定作用元素 语法: <style>标签名{} </style> 缺点:同名元素不希望使用一些样式,或不同名元素希望使用该样式都无法使用
类选择器
class选择器根据元素的class属性值确定样式的作用元素
元素的class属性值可以重复,而且一个元素的class属性可以有多个值,多个属性之间用空格分开
语法:.class属性值{ }
类选择器语法:.类名{}class属性值可以有一个,也可以有n个,不同标签可以使用同一个class
id选择器
id选择器根据标签的id值确定样式的作用元素
一般每个元素都有id值,但是在一个页面中,id的值不应该相同,应该具有唯一性
语法格式:#id值{ }
缺点:因为id值有唯一性,通过id选择器指定的样式只能作用到一个元素上
id选择器 根据id值确定作用元素一般每个元素都有id属性。但每个页面中不应该相同,所有id具有唯一性 语法:#id名{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS选择器</title><!--1.元素选择器 根据标签名确定作用元素语法:<style>标签名{}</style>缺点:同名元素不希望使用一些样式,或不同名元素希望使用该样式都无法使用 --><style >input {width: 220px;height: 80px;background-color: chartreuse;color: white;border: 3px solid green;font-size: 22px;font-family: '微软雅黑';line-height: 30px;border-radius: 5px;}</style><!--3.id选择器 根据id值确定作用元素一般每个元素都有id属性。但每个页面中不应该相同,所有id具有唯一性语法:#id名{}--><style>#id1 {width: 220px;height: 80px;background-color: #00c4ff;color: #1d4d53;border: 3px solid #806600;font-size: 22px;font-family: '微软雅黑';line-height: 30px;border-radius: 5px;}#id2 {width: 220px;height: 80px;background-color: #00c4ff;color: #1d4d53;border: 3px solid #806600;font-size: 22px;font-family: '微软雅黑';line-height: 30px;border-radius: 5px;}#id3 {width: 220px;height: 80px;background-color: #00c4ff;color: #1d4d53;border: 3px solid #806600;font-size: 22px;font-family: '微软雅黑';line-height: 30px;border-radius: 5px;}</style><!--2.类选择器语法:.类名{}class属性值可以有一个,也可以有n个,不同标签可以使用同一个class--><style>.colorClass{background-color: springgreen;color: violet;border-color: wheat;}.dxClass{width: 300px;height: 100px;font-size: 50px;line-height: 50px;border-radius: 10px;}.字体class{font-family: 楷体;border: 6px solid red;}
</style></head>
<body>
<!--CSS选择器
/*主要*/1.元素选择器语法:<style>标签名{}</>style>例如:p{} h1{} div{} span{}2.类选择器语法:.类名{}例如:.box{} .red{} .blue{} .green{}3.id选择器语法:#id名{}例如:#box{} #red{} #blue{} #green{}<h1>元素选择器</h1>
<input type="button" value="崩铁启动"/>
<input type="button" value="崩坏3启动"/>
<input type="button" value="鸣潮启动"/><h1>id选择器</h1>
<input id="id1" type="button" value="崩铁启动"/>
<input id="id2" type="button" value="崩坏3启动"/>
<input id="id3" type="button" value="鸣潮启动"/>
</body><h1>class选择器</h1>
<input class="colorClass 字体class dxClass" type="button" value="崩铁启动"/>
<input class="dxClass colorClass 字体class" type="button" value="崩坏3启动"/>
<input class="dxClass colorClass 字体class"type="button" value="鸣潮启动"/>
</html>
3.CSS浮动
css的浮动使得元素脱离文档流,按照指定的方向(左或右发生移动),直到它的边缘碰到包含框或另一个浮动框的边框为止。
浮动后一定不会将文字挡住,文字会被挤到别的方向,就像水一样。
文档流是文档中可显示对象在排列时所占用的位置,脱离文档流就是在页面中不占位置了。
一个元素脱离文档流后,它在文档流中的下一个元素就会占用它的位置。
浮动float:right:右left:左
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css浮动</title><style>.outerDiv{width: 500px;height: 300px;border: 1px solid green;background-color: beige;}.innerDiv{width: 100px;height: 100px;border: 1px solid blue;}.d1{background-color: aqua;float: right;}.d2{background-color: rgb(255, 0, 0);}.d3{background-color: rgb(255, 255, 0);}</style>
</head>
<body><div class="outerDiv"><div class="innerDiv d1">diva</div><div class="innerDiv d2">divb</div><div class="innerDiv d3">divc</div></div>
</body>
</html>
注:浮动后的元素不会覆盖其他元素。
4.CSS定位
css定位要用到的样式有position、left、right、top、bottom
绝对定位代表定位只根据页面来定位
relative相对定位会相对其原本的位置来定位
fixed相对定位会相对浏览器窗口来定位,即如果页面较长,可以向下拖拽,但是不论如何拖拽,都会显示在窗口的同一个位置,一些广告就是如此。
一般left和right之中只用其中一个,top和bottom之中只用其中一个。
position:static: 默认absolute: 绝对relative 相对元素原本位置fixed 相对页面(动态小广告)
5.CSS盒子
对于一个块元素,width和height表示横向和纵向的容量,border是在容量的边缘外再加上指定像素的空间的厚度的空间,就像给此块元素套了层细胞壁。而内边距和外边距是根据border的内外,指定一定的区域留空,内边距的大小不会影响容量,而是将border项外扩张,就像扩大细胞壁和细胞膜的间距。
Margin(外边距) - 清除边框外的区域,外边距是透明的; Border(边框) - 围绕在内边距和内容外的边框; Padding(内边距) - 清除内容周围的区域,内边距是透明的; Content(内容) - 盒子的内容,显示文本和图像;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS盒子</title><style>.outerDiv {width: 800px;height: 300px;border: 1px solid green;background-color: rgb(230, 224, 224);margin: 0px auto; /*居中*/}.innerDiv {width: 100px;height: 100px;border: 1px solid blue;float: left;/* margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px; */margin: 10px 20px 30px 40px;}.d1 {background-color: greenyellow;/*padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;*/padding: 10px 20px 30px 40px;}.d2 {background-color: rgb(79, 230, 124);}.d3 {background-color: rgb(26, 165, 208);}</style>
</head>
<body><!--Margin(外边距) - 清除边框外的区域,外边距是透明的;Border(边框) - 围绕在内边距和内容外的边框;Padding(内边距) - 清除内容周围的区域,内边距是透明的;Content(内容) - 盒子的内容,显示文本和图像;-->
<div class="outerDiv"><div class="innerDiv d1">框1</div><div class="innerDiv d2">框2</div><div class="innerDiv d3">框3</div>
</div>
</body></html>
以margin为例,margin: 10px; 表示上下左右都是10px的外边距。margin: 10px 20px; 表示上下外边距是10px,左右外边距是20px。margin: 10px 20px 30px 40px表示上外边距是10px,右外边距是20px,下外边距是30px,左外边距是40px,即按顺时针上右下左的顺序。当然也可以使用margin-right,margin-top等方法分别指定大小。
padding也是同理。
margin-auto和padding-auto即自动居中。