简单Html+CSS引用方式和id、class选择器

最新推荐文章于 2024-06-06 12:02:19 发布

Alwaythere

最新推荐文章于 2024-06-06 12:02:19 发布

阅读量1k

点赞数 2

文章标签：基础

本文链接：https://blog.csdn.net/lcl123456m/article/details/100533340

版权

1.行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p style="color:red;font-style:italic;text-shadow:10px 10px 5px blue ;">I Love you</p>
	</body>
</html>

2.内嵌样式（内部样式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			p{
				text-decoration: underline;
				color: red;
			}
		</style>
	</head>
	<body>
		<p>I Love you</p>
	</body>
</html>

3. 链接样式（外部样式）Link

<link href="css/mycss.css" rel="stylesheet" type="text/css" />  
      <!--
 	  作者：www.1359848596@qq.com
	  时间：2019-09-04
  	  描述：通过link链接css
	  -->

html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/mycss.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<p>I Love you</p>
	</body>
</html>

mycss.css如下：

p{
	color: red;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
}

4.导入样式 @import

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			@import url("css/mycss.css");
		</style>
	</head>
	<body>
		<p>I Love you</p>
	</body>
</html>

      <!--
 	  作者：www.1359848596@qq.com
	  时间：2019-09-04
  	  描述：mycss使用以上
	  -->

Css选择器

	css选择器，也称为选择符，用于选择需要添加样式的元素
	css的基本语法:
	选择器{
		属性:属性值;   （样式规则：键值对）
      }

1. 全局选择器


html代码：
 <h1>我是标题红色</h1>
 <p>我是段落红色</p>
css代码：
 *{ color:red;} 
 
 组合选择器：
  html代码：
		<a href="###" >链接一</a>
		<a href="###">链接二</a>
		<h1 class="h1">AAA</h1>
		<p>BBB</p>
 css代码：
    a,h1,p{
		text-decoration: line-through;
}

2. 类选择器样式名选择器

 html代码：
		<p class="color">AAA</p>
		<p>BBB</p>
		
 css代码：
  	p{
	  color: royalblue;
     }
	p.color{
	   color: red;
     }

在这里插入图片描述

3.ID选择器（唯一出现）

 html代码：
	<p id="color">AAA</p>
	
 css代码：
	#color{
		color: salmon;
	}

4.伪类选择器

a:link（未被访问过,访问之前的状态）
a:hover （鼠标滑过）  a:hover{text-decoration: underline;};  鼠标放上去后有下划线       
a:active（鼠标按下）
a:visited(访问过后)    

伪类选择器: 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上。
我们这里只要求掌握超链接的伪类a：hover。
伪类选择器的语法:

Alwaythere

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单Html+CSS引用方式和id、class选择器

1.行内样式<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p style="color:red;font-style:italic;text-shad...
复制链接

扫一扫