04-Dhtml定义、css样式（三种方法）、css样式中的选择器、div标签、span标签、一些css属性

最新推荐文章于 2021-12-23 11:12:37 发布

这就是我hcx

最新推荐文章于 2021-12-23 11:12:37 发布

阅读量738

点赞数

分类专栏： html 文章标签： html css

本文链接：https://blog.csdn.net/qq_29305437/article/details/103809326

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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选择器

 在标签中定义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）宽度颜色 )

这就是我hcx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
04-Dhtml定义、css样式（三种方法）、css样式中的选择器、div标签、span标签、一些css属性

Dhtml动态html页面技术Dhtml=html+css+JavaScriptcss样式行列样式基本结构：标签内嵌入style="" eg： <p style="font-size: 100px;color: red;font-family: '微软雅黑';font-weight: 200;">这就是我</p> font-size:字体大小，注重px单...
复制链接

扫一扫