04-Dhtml定义、css样式（三种方法）、css样式中的选择器、div标签、span标签、一些css属性
程序员文章站
2022-03-02 16:50:01
...
Dhtml
动态html页面技术
Dhtml=html+css+JavaScript
css样式
行列样式
基本结构：标签内嵌入style=""
eg：
<p style="font-size: 100px;color: red;font-family: '微软雅黑';font-weight: 200;">这就是我</p>
font-size:字体大小，注重px单位，带px和不带px是不一样的
color:字体的颜色
font-family:字体
font-weignt:字体粗细
text-align:文本对齐
内嵌样式
基本结构:
<head>
<title></title>
<style type="text/css">
p{
属性：属性值；
}
div{
属性：属性值
}
</style>
</head>
eg:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
p{
font-family: "微软雅黑";
font-size: 100px;
text-align: center;
color: red;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<p>这就是我</p>
<a href="#">跳转</a>
</body>
</html>
tips: 1.style标签中属性：属性值后面要加分号
2.定义不同的样式之间｛｝后面是不需要加分号的！！！！
3.超链接a鼠标种种操作 a:hover{}鼠标悬停
外部链入样式表
有两种写法：注意css文件中不需要写<style></style>，直接写css里面样式的内容
第一种写法：
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
</head>
第二种写法
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
@import url("css/mycss.css"); 或者@import "css/mycss.css";
</style>
</head>
css样式中的选择器
html选择器
1.css样式中，直接选择html标签
选择p标签、a标签
eg:
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
p{
font-family: "微软雅黑";
font-size: 100px;
text-align: center;
color: red;
}
a{
text-decoration: none;
}
</style>
</head>
class类选择器
在标签内定义class属性,直接在css文件用 点属性名（.class属性值）
eg:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
.myP{
font-size: 100px;
text-align: center;
}
</style>
</head>
<body>
<p class="myP">这就是我</p>
<a href="#">跳转</a>
</body>
在标签中定义id属性， 在css文件中直接用 #id属性值，表示唯一
eg:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#myP{
font-size: 100px;
text-align: center;
}
</style>
</head>
<body>
<p id="myP">这就是我</p>
<a href="#">跳转</a>
</body>
特殊的选择器
鼠标的悬停 a:hover{}
eg：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="#">跳转</a>
</body>
div块级标签
eg:
<div style="left: 150px;top: 200px;width:200px;height: 80px; background-color: red; position: absolute;z-index: 2;">第一层</div>
<div style="left: 100px;top:220px;width: 180px;height:80px;background-color: blue;position: absolute;z-index: 1;">第二层</div>
tips: position：absolute 绝对定位
z-index 重叠部分谁在上谁在下，小的在下，大的在上面
span行级标签
注：只能包含文字，不可以包含图片、标题、段落
tips:div和span区别：div不管内容多少都是占据一行，而span的大小是根据内容所决定的
一些css属性
行距、对齐等属性：
line-height:行高
letter-space:字符间间距
text-aling:文本的对齐方式
white-space:空白处理，其中值为 nowrap 不换行
text-decoration:文本的修饰 eg：下划线
背景属性
background-color:背景颜色
background-image:背景图
background-repeat:背景图重复方式 eg:no-repeat背景不重复
background-position:背景位置坐标 eg： 50px 50px （左右 上下)
margin、padding、border
margin:1px 2px 3px 4px;(顺时针，上右下左)
margin:1px 2px;(上下 左右)
margin:0px auto;自动居中
margin:1px；（上右下左各为1px）
border:dotted 1px blue;(虚线 （实线 为solid） 宽度 颜色 )
下一篇： css选择器层叠样式的三种引入方式