前言: html是网页的骨架(内容),用html来修饰网页非常麻烦,需要用到大量的标签
后来诞生css语言,用来修饰网页内容
css概述: CSS是Cascading Style Sheets（级联样式表）
级联->关联 网页标签和css语言
样式表:修饰网页外观(样子),是一种样式表语言,用来控制html外观
用于修饰外观的css语言可以写在css文件或者html文档中
css语法:
1.行级样式表
<a href="" style="进入了css语法中" >百度</a> 2.内嵌样式表
<style type="text/css">
/* css注释,此标签内写的都是css语法 */
.a1{color: red;font-size: 20px;}
.a2{color: aqua;}
</style>
3.外部样式表: 将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/indexcss.css" rel="stylesheet" />
</head>
<a href="" class="a1">百度</a>
<a href="" class="a1">百度</a>
<a href="" class="a2">百度</a>选择器: 因为样式与标签是分离的,顒需要将他们联系起来
通过选择器实现
1. 标签选择器 标签名{}
2. 类选择器 类名匹配 .类名{}
3.id选择器 #id名{}
4.通配选择器 *{}
5.选择器组合：通过选择器分组可以同时选中多个选择器对应的标签
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{color: #FF0000;}
.a1{color: aqua;}
</style>
</head>
<body>
当一个标签被多个选择器选中时,会优先显示优先级高的样式
id>类>标签>通配
-->
<p class="a1">aaaa</p>
<p class="a1">bbbbbbbbb</p>
<p class="a1">ccccccc</p>
<p class="a2">dddddddd</p>
</body>
</html>文本: p{
color: #FF0000;
font-size: 40px;
text-align: center;
font-family:楷体;
font-weight: bold ;/* 加粗 */
/* text-decoration: underline;下划线
text-decoration: line-through; 删除线*/
font-style: italic; /*斜体*/
line-height: 30x;/* 行高*/
text-indent: 2em;/* 首行俩字符*/
}
背景: p{
background-color: #00FFFF; 背景颜色
background-image: url(../img/9431135449c1e1798b48c03fe2bd3a40.jpeg); 背景图片
background-repeat: no-repeat; 背景不重复
background-position: center; 背景的位置
}
列表: li{
text-align: center;
list-style-position: inside;/* 使图标跟随着文字移动*/
list-style-image: url(../img/Female.gif);/* 将图标变成自己想要的图片*/
list-style: none inside url(../img/9431135449c1e1798b48c03fe2bd3a40.jpeg);
}
css伪类: 当我们需要为一些特殊的标签加上一些特殊的状态时,可以用到伪类
语法: hover 表示鼠标移到标签上时的状态
active: 鼠标点击时的状态
focus: 在输入标签时鼠标焦点时的状态
input{
background-color: #FF0000;
}
.a1{
background-color: #00FFFF;
}
input:hover{
background-color: #00FFFF;
}
.a1:hover{
background-color: azure;
}
input:active{
background-color: aliceblue;
}
.a1:active{
background-color: aliceblue;
}
.a1:focus{
background-color: chartreuse;
}透明:
img{
opacity: 0.5;/* 设置透明度,现在是半透明状态 */
}标签的分类: 块级标签: 会自动换行的标签,无论内容有多少,都会独占一行
此类标签可以设置宽高
标签的默认的大小: 宽与body一样,高与内容一样,如果没有内容宽为0
<p style="width: 20px ;height: 40px;"></p>
行级标签: 只占自身内容大小,不能设置宽高,不会独占一行
<a href="../">wefw</a>
行级块标签: 不独占一行,可以设置大小
<input type="text" style="width: 20px;height: 30px;" />www
块级标签主要用来网页布局
行级标签主要用来文字选中
display: <!-- displaty : 设置标签的类型 -->
<!-- 将块级标签转换为行级标签 -->
<p style="display: inline;">百度</p>aaa
<!-- 将行级标签转换为块级标签 -->
<a href="../" style="display: block;"></a>aaaa
<!-- 将一个标签消失 在网页中不占据空间-->
<a href="../" style="display: none;"></a>
div和span:
div: 可以包含任何标签,没有任何默认的样式,定义成什么样就是什么样式,主要用来网页的布局
span:是一个行级标签,没有任何的默认样式,主要用来选中文本,和对文本的修饰
盒子 模型(box-model) : 标签就相当于一个盒子,我们对盒子的摆放就相当于对网页的布局
1.内容区:
指定是盒子中放内容的区域,是标签中的文本区域,没有边框和内边距盒子的默认大小就是内容区大小,通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小
2.内边距:
内边距指的就是标签内容区与边框以内的空间。
padding-left:10px;
padding-right:10px;
padding:10px 20px 30px 40px
padding:10px 10px
这样会设置标签的上、右、下、左四个方向的内边距3.边框:
.box1{
backround-color
width: 200px
float: left
}从原来的文档流(二维平面)漂浮起来了,它原来的空间就释放了,下面的标签就会上浮,
浮动后的标签是默认大小,需要给予尺寸
清除浮动:
(1)相对定位:
扫一扫
4403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
