一、CSS层叠样式表
作用：是给HTML标记添加各种表现形式，比如文本样式、背景颜色、背景图片
style标签的唯一属性 type 属性值 text/css
格式 ：type="text/css"
在css中标签格式：
标签名称 {
属性：属性值； （用分号隔开）
}
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
（标签名称） body{
background-color: aqua; （属性：属性值；）
font-family:宋体;
}
</style>
</head>
<body>
</body>
</html>
- html的注释是<!-- XXX -->
- css 的注释 /* XXXX */
选择器
选择器
1、基本选择器
*
{
color:red;
}
2、标签选择器
h1 （标签名称）
{
color:red;
}
3、id选择器
#myid #开头 后面是自己定义的名字
{
color: yellow;
}
使用时的格式为：
- 标签 id=“myid” <div id="a">
4、class选择器 (又称 类选择器)
.myclass .开头后面加上自己去的名字
{
color: rgb(170, 47, 9);
}
使用时的格式为：
- <div class="a">
简单常用属性
-
width 宽度
-
height 高度
一般标签都会使用的两个属性
字体属性
-
font-size：文字大小，px
-
font-family:字体类型
-
font-style：斜体
-
font-weight: 粗体 取值bold。
<a href="#">网站首页</a>|
<a href="#" id="a1" >联系我们</a>|
<a href="#">产品中心</a>|
<a href="#">企业新闻</a>
<body>
<p>
我爱中国
</p>
<h1>
祖国的花朵
</h1>
<ul>
<li>123</li>
<li>abc</li>
<li>789</li>
</ul>
</body>
css边框属性
使用div为例
-
width:宽度
-
heigh：高度
-
border-top:上边框
-
border-bottom：下边框
-
border-left：左边框
-
border-right：右边框
边框的类型
-
none(无边框)
-
solid（实线）
-
dashed（虚线）
-
dotted（点状线）
-
-
width: 200px; （宽度）
height: 150px; （高度）
border-left: 5px solid yellow; 左边边框线
border-top: 1px dashed blue; 上边边框线
border-right: 3px dotted red; 右边边框线
border-bottom: 1px solid red; 下边边框线
css指定外边框
-
margin=left：外边框的左边
-
margin-top：外边框的上
-
margin-right：外边框的右边距
-
margin-botto：外边框的下边距
css指定内边框
-
padding-left: 80px; 内边框的左边距
-
padding-top: 249px;内边框的上
-
padding-bottom: 30px;内边框的下
-
padding-right: 200px;内边框的右
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
border: 2px red solid;
color:green;
height: 800px;
width:800;
}
.bac{
border-top: 3px blue solid;
border-left: 3px blue solid;
border-right: 3px blue solid; border-bottom: 3px blue solid;
color: black;
height: 200px;
width: 200px;
margin-top:20px;
margin-left:10px;
}
.a{
border-top: 4px yellow solid;
border-left: 4px yellow solid;
border-right: 4px yellow solid;
border-bottom: 4px yellow solid;
color: black;
height: 200px;
width: 200px;
margin-top: 50px;
margin-left: 25px;}
</style>
</head>
<body>
<div class="box">
<div class="bac">
</div>
<div class="a">
</div></div>
</body>
</html>
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: aqua; (设置背景颜色)
}
.a{
background-color: aliceblue;
height: 450px;
width: 400px;
margin:70px auto; （定义上下的值 ，左右自动剧中）
}
li{
list-style: none; （去除无序列表前边的点）
font-family:宋体;
color: rgb(122, 104, 81);
border: 1px rgb(171, 184, 174) dashed; （虚线）dashed
}
l{
color: red;
}
span{
color: blue;
}
r{
font-family: 黑体;
font-size: 20px;
}
</style>
</head>
<body>
<div class="a"> <r>linux基础班</r>
<div>
<ul>
<li ><a href="#">北京--测试仪器(2019年10月12日)</a> <l>火热爆满</l></li>
<li ><a href="#">北京--黄埔一期(2018年9月1号)</a> <span>已经爆满开班</span></li>
<li ><a href="#">北京--黄埔一期(2018年9月1号)</a> <span>已经爆满开班</span></li>
<li ><a href="#">北京--黄埔一期(2018年9月1号)</a> <span>已经爆满开班</span></li>
</ul>
</div>
<div> <r>架构班师</r>
<ul>
<li ><a href="#">北京--测试仪器(2019年10月12日)</a> <l>火热爆满</l></li>
<li ><a href="#">北京--黄埔一期(2018年9月1号)</a> <span>已经爆满开班</span></li>
<li ><a href="#">北京--黄埔一期(2018年9月1号)</a> <span>已经爆满开班</span></li>
<li ><a href="#">北京--黄埔一期(2018年9月1号)</a> <span>已经爆满开班</span></li>
</ul>
</div>
<div> <r>python开发大师</r>
<ul>
<li ><a href="#">北京--测试仪器(2019年10月12日)</a> <l>火热爆满</l></li>
<li ><a href="#">北京--黄埔一期(2018年9月1号)</a> <span>已经爆满开班</span></li>
<li ><a href="#">北京--黄埔一期(2018年9月1号)</a> <span>已经爆满开班</span></li>
<li ><a href="#">北京--黄埔一期(2018年9月1号)</a> <span>已经爆满开班</span></li>
</ul>
</div>
</div>
</body>
</html>
如图
5932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
