css基础
1.什么是css
css—层叠样式表
css是web标准中的表现标准。主要用来设置网页内容的样式和布局(给标签化妆)
2.css代码写在哪
1)内联样式表：将样式表(css代码)写在标签的style属性中(样式只能作用一个标签)
2)内部样式表：将样式表(css代码)写在style标签中(样式只能作用于当前html文件中的所有标签)
3)外部样式表：将样式表(css代码)写在外部的css文件中，然后再html文件中用link导入(样式可作用与所有的html标签)
优先级：内联样式表>内部样式表=外部样式表(谁后写谁的优先级高)
3.css怎么写
语法：
选择器{属性名1:属性值1;属性名2:属性名2;属性名3;属性名3;……}
说明：
1）选择器 选择器是用来选中当前需要设置样式的标签(写内联样式表 选择器{} 需要省略)
2）属性 以属性名:属性值 的形式存在，多个属性之间必须写;隔开
a.常用的属性：color(文字颜色)；background-color(背景颜色)；font-size(文字大小)
width(宽度)；height(设置高度)
b.常用的值：数字(如果是用来表示大小，值后面必须加单位：px)
100px；100%
颜色：颜色的英文单词：red，green，yellow
rgb值(通过调节红色，绿色，蓝色的值来调出不同的颜色，值的范围是0~255)
rgb(red,green,blue) rgb(255,0,0)： rgb(255,255,255)
rgb(red,green,blue,透明度)透明度的取值范围是0-1 rgb(255,0,0，1)
16进制颜色值：#6位的16进制数 #ff0000 #00ff00
选择器
选择器是用来选中指定标签来添加样式
常用的选择器
1.id选择器：将标签的id属性值前加#作为一个选择器，选中id属性是指定值的标签(同一个id值在这个页面中只有一个)
#p1{} --选中id是p1的标签
2.类选择器：在标签的class属性前加.作为一个选择器，选中class属性是指定值的标签。
.c1{} --选中class是c1的所有的标签
注意：同一个class可以作用于不同的标签，同一个标签乐意拥有多个class值（有多个的时候中间用空格隔开）
3.元素选择器：直接将标签名作为选择器，选中当前页面中所有指定的标签
p{} --选中所有的p标签
4.通配符：将*作为选择器，选中当前页面中的所有的标签
5.群组选择器：将多个其他的选择器用逗号隔开，作为一个选择器，选中每个独立的选择器选中所有的标签
p,c1,#p1{} --选中所有的p标签，class是c1的标签，以及id是p1的标签
a，img{} —选中所有的图片和超链接
6.后代选择器：将多个选择器用空格隔开作为一个选择器
div p{} --获取所有是div后代的p标签
div .p1 – 选中div中所有class是p1的标签 (div 和 .p1的标签是后代关系)
7.子代选择器：将多个选择器用>隔开作为一个选择器
div>p{} --选中所有div标签中子标签中的p标签
div>.p1{} --选中所有div标签子标签中class中p1的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ============1.id选择器 ============-->
<!-- <h1 id="title1">id选择器</h1>
<p id="p1">我是段落1</p>
<p>我是段落2</p>
<style type="text/css">
#p1{
color: #FF69B4;
font-size: 25px;
}
#title1{
color: #8B008B;
width: 200px;
background-color: yellow;
}
</style> -->
<!-- ============2.class和元素选择器 ============-->
<!-- <h1 class="c1">class选择器</h1>
<p class="c1">我是段落1</p>
<p class="c2">我是段落2</p>
<p class="c1">我是段落3</p>
<a class="c1 c2" href="">我是超链接1</a>
<a class="c2" href="">我是超链接2</a>
<style type="text/css">
/* 元素选择器 */
p{
color: red;
}
/* class选择器 */
.c1{
background-color: seagreen;
}
.c2{
font-size: 25px;
}
/* 通配符 */
*{
border: 1px solid firebrick;
}
</style> -->
<!-- ============3.群组选择器 ============-->
<!-- <h1 class="c1">class选择器</h1>
<p class="c1">我是段落1</p>
<p class="c2">我是段落2</p>
<p class="c1">我是段落3</p>
<a class="c1 c2" href="">我是超链接1</a>
<a class="c2" href="">我是超链接2</a>
<style type="text/css">
p,a{
color: red;
}
h1,.c2{
background-color: yellow;
}
</style> -->
<!-- ============4.后代选择器 ============-->
<p>我是段落1</p>
<div id="">
<p>我是段落2</p>
<span>
<p>我是段落3</p>
</span>
<a href="">我是超链接1</a>
</div>
<div id="">
<p>我是段落4</p>
<div id="">
<p>我是段落5</p>
</div>
</div>
<style type="text/css">
/* 后代选择器 */
div p{
color: red;
}
/* 子代选择器 */
div>p{
background-color: skyblue;
}
</style>
</body>
</html>
伪类选择器
1.什么是伪类
普通选择器选中的是标签(一个标签的所有状态)
伪类选择器选中的是标签的状态
语法：
选中标签的选择器：伪类选择器{}
常用的伪类选择器：
1）link --连接未被成功访问对应的状态(只针对超链接有效)
2)visited --连接已经被成功访问对应的状态(只针对超链接有效)
3）hover --鼠标悬停在标签上对应的状态(针对所有可见标签有效)
4)active --鼠标按住标签不放对应的状态(针对所有可见标签有效)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com">我是超链接1</a>
<br>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: #0000FF;
font-size: 30px;
}
a:active{
color: #FF69B4;
}
</style>
<div id="div1" style="width: 100px; height: 100px;"></div>
<style type="text/css">
#div1{
background-color: #008000;
}
#div1:hover{
background-color: aqua;
}
#div1:active{
background-color: #8B008B;
}
</style>
</body>
</html>
标准流布局
1.标准流布局
标签在没有布局相关的属性的时候，默认的布局方式就是标准流布局。
a.块级标签：一个占一行；默认的宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效
h1~h6 p div
b.行内标签：一行可以显示多个 ；默认大小是内容的大小；设置宽高无效
a，span，label，font
c.行内块标签：一行可以显示多个 ；默认大小是内容的大小；设置宽高有效
img，input
2.display属性(css)
block： 将标签修改成块级标签
inline： 将标签修改成行内标签
inline-block：将标签修改成行内块
none： 隐藏标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>块级标签</h1>
<h1 style="background-color: antiquewhite;">我是标题1</h1>
<h1 style="background-color: aliceblue; width: 200px;">我是标题2</h1>
<p style="background-color: aqua;">我是p标签</p>
<div id="" style="background-color: aliceblue;">我是div1</div>
<h1>行内标签</h1>
<span style="background-color: azure;">我是span1</span>
<span style="background-color: bisque; width: 100px;">我是span2</span>
<h1>行内块标签</h1>
<img style="width: 100px; background-color: aqua;" src="./img/aaa.ico" >
<img src="img/ghost.png" >
<input style="height: 100px;" type="" name="" id="" value="" />
<h1>display属性</h1>
<div style="background-color: aliceblue; width: 100px;display: inline">
div3
</div>
<div style="background-color: aqua;height: 200px;display: inline;">
div4
</div>
<a style="width: 100px;height: 100px;display: inline;background-color: blueviolet;">超链接3</a>
<a style="width: 100px;height: 100px;display: block;background-color: red;">超链接4</a>
</body>
</html>
浮动
1.脱流
让标签脱离标准流，不在按照标准流的方式进行布局。浮动和定位都可以让标签脱流。
所有的标签，只要脱离了标准流布局的方式就只有一种：一行显示多个；默认大小是内容的大小；设置宽高有效
2.浮动—float
left --左浮动
right --右浮动
浮动的原理
如果块标签不浮动，占水面和池底的空间，并且还带有玻璃砖
浮动的标签，只占水面的空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>浮动可以脱流</h1>
<div style="background-color: brown;height: 100px;float: left;">
div1
</div>
<div style="background-color: aqua;float: left;">
div2
</div>
<a href="" style="background-color: chartreuse;width: 100px;height: 100px;float: left;">超链接1</a>
<br>
<br>
<h1>页面整体布局</h1>
<div style="background-color: brown;height: 120px;width: 100%;"></div>
<div></div>
<div></div>
</body>
</html>
浮动的应用
浮动的应用：
1.竖着显示的横着来(页面布局)
2.文字环绕：被环绕的块浮动，文字块不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="float: left;">
<img src="img/anchor.png" >
</div>
<div style="width: 220px;">
答复哈福哈福哈啊度覅回复爱妃auf的开发贷款放款的咖啡开发大幅度发到付件反间谍法哈偶的防护好
发的放大打发防盗门木木木女女女女女女懂法守法以iiiiiiiiiifdfa东方大道
</div>
</body>
</html>
清除浮动
清除浮动：清除因为浮动而产生的高度塌陷的问题
1）高度塌陷：父标签不浮动，并且没有设置高度，子标签浮动就可能产生高度塌陷(没有设置高度的父标签会塌陷)
2）清除浮动：
a.空盒子法：在高度会塌陷的标签的最后添加空的div，并且设置他的clear属性为both
b.设置overflow的属性hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="height:120px;background-color: pink;"></div>
<div class='subside' style="background-color:greenyellow;">
<div style="height: 100px;background-color: darkorange;width: 100px;">
</div>
<div style="background-color: saddlebrown;height: 400px;width: 35%;float:right ;"></div>
<div style="background-color: skyblue;height: 1300px;width: 40%;float: right;"></div>
<!-- 1.空盒子法 -->
<!-- <div style="clear: both;"></div> -->
</div>
<div style="height: 80px;background-color: blueviolet;"></div>
<!-- 设置overflow -->
<style type="text/css">
.subside{
overflow: hidden;
}
</style>
</body>
</html>
定位
- 定位
定位的属性有四个：left，right，top，bottom
left：设置标签的左边到另外一个标签的左边距离
right：设置标签的右边到另外一个标签的右边距离
top：设置标签顶部到另外一个标签的顶部距离
bottom：设置标签底部到另外一个标签的底部距离
2.选择定位的参考对象：position
1）static/initial(默认，body例外)：不选参考对象，不定位（设置距离直接无效）
2)absolute:绝对定位，选择第一个非static/initial的父标签作为参考对象
3)relative:相对定位，相对当前标签在标准流中的位置定位(一般用于让自己成为子标签的参考对象的时候用)
4）fixed：相对于浏览器定位
5）sticky：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <h1>1.直接设置定位的距离无效</h1>
<style type="text/css">
#div1{
left: 300px;
position: initial;
}
</style>
<div id='div1' style="background-color: aqua; width: 100px;height: 100px;left: 300px;"></div>
<h1>2.绝对定位</h1>
<div id="div2" style="background-color: green;width: 300px;height: 300px;">
<div id="div3" style="background-color: yellow;width: 200px;height: 200px;" >
<div id="div4" style="background-color: red;width: 100px;height: 100px;">
</div>
</div>
</div>
<style type="text/css">
#div2{
/*设置position是为了成为参考对象*/
position: absolute;
}
#div4{
right: 50px;
/*设置position是为了能够让自己相对别人去定位(选定位的参考对象)*/
position: absolute;
}
</style> -->
<<!-- h1>相对定位</h1>
<div id="div5" style="background-color: red;width: 200px;height: 200px;"></div>
<style type="text/css">
#div5{
bottom: 50px;
/*如果设置position为relative是把自己原来的位置作为参考对象，很少使用；一般设置
position为relative是为了让自己成为别人的参考对象*/
position: relative;
}
</style> -->
<!-- <h1>相对浏览器定位</h1>
<div id="" style="height: 10000px;">
<div id="div6" style="background-color: aqua;width: 100px;height: 100px;">
<a href="#top">回到顶部</a>
</div>
</div>
<p>我是底部</p>
<style type="text/css">
#div6{
right: 40px;
bottom: 30px;
position: fixed;
}
</style> -->
<h1>sticky</h1>
<div id="" style="background-color: red;height: 20000px;">
</div>
<div id="div7" style="background-color: aqua;height: 100px;">
</div>
<style type="text/css">
#div7{
bottom: 0px;
position: sticky;
}
</style>
</body>
</html>
盒子模型
1.盒子模型
html中每一个可见的标签不管在任何情况下都是由4个部分组成：content，padding，border和margin
1） content：可见的；设置背景会作用于content；设置标签的宽度和高度其实就是在设置content的宽度和高度；
标签内容和子标签都是添加到content上的
2）padding： 可见的；设置背景会作用于padding；padding有四个方向，每个方向可以单独控制
3）border：可见的；border有四个方向，每个方向也可以单独控制
4)margin:不可见但是占位置；有四个方向；每个方向也可以单独控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>content</h1>
<div id="div1"style="width: 100px;height: 100px;background-color: aqua;"><img src="img/aaa.ico" >div1</div>
<input type="text" name="" id="" style="padding-left: 10px;" />
<style type="text/css">
#div1{
/*1.content*/
width: 100px;
height: 100px;
/*padding(可以让标签内容和标签的边框在某个方向上保持一个的距离)
1）同时设置四个方向的padding：padding：大小
2）单独设置指定方向的padding：padding-left，padding-rigft，padding-top，padding-bottom
*/
padding: 20px;
/*border
1）同时设置四个方向的border：
border：边框大小，边框样式，边框颜色；边框样式(solid-实线，dotted-点划线，dashed-虚线，double-双实线)
2）单独设置指定方向的border
border-left，border-right，border-top，border-bottom
*/
/* border: 3px solid red; */
border-left: 3px solid red;
border-right: 3px dotted yellow;
border-bottom: 3px dashed palegreen;
border-top: 3px double pink;
/* margin */
margin: 20pxs;
}
</style>
</body>
</html>
盒子模型实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="" style="background-color: yellow;width: 50%;overflow: hidden;margin-top: 100px;
margin-left: 200px;padding-bottom: 30px;
">
<div ></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style type="text/css">
div>div{
width: 100px;
height: 100px;
background-color:red ;
margin-top: 20px;
margin-left: 20px;
float: left;
}
</style>
</body>
</html>
扫一扫
2591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
