认识css样式表

最新推荐文章于 2023-01-01 15:37:23 发布

lil_bitter

最新推荐文章于 2023-01-01 15:37:23 发布

阅读量164

点赞数

分类专栏： html和css

本文链接：https://blog.csdn.net/weixin_44468538/article/details/102752888

版权

html和css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

w3c提供的css语法检测网页:http://jigsaw.w3.org/css-validator/
1.应用css样式表

<!DOCTYPE html>
  <html>
     <head>
        <meta charset="utf-8">
        <title>文档标题</title>
        <style type="text/css">
        h1{
            color:red;
            font-family:Broadway BT;
            font-weight:bold;
            border:1px #336699 solid;
        }
        h2{
            color:#0000cc;
            font-family:ParkAvenue BT;
            font-weight:bold;
            border:3px #669900 DOUBLE;`在这里插入代码片`
        }
        </style>
    </head>
    <body>
    <ol>一.应用css样式表
            <li>行内声明
            <h1 style="color:red;font-family:Broadway BT;font-weight:bold;border:1px #336699 solid">DO a thing quickly often means doing it badly.</h1>
            <h1>Do a thing quickly often means doing it badly.</h1>
           </li>
           <li>内嵌声明
           <h1>Do a thing quickly often means doing it badly.</h1>
           <h2>Do a thing quickly often means doing it badly.</h2>
           </li>
           <li>链接外部样式文件<br>创建.css文件——链接外部样式文件< link>/导入外部样式文件@import(在head标签内)
        </li>>
    </body>
  </html>>

在这里插入图片描述
第三点补充：链接外部样式文件的两种语法(必须在head标签内)

<link rel=stylesheet type="text/css" href="样式文件的路径/文件名">

<style type="texxt/css">
<!--
@import "样式文件的路径/路径名"
-->
</style>

优先级：内行声明>内嵌声明>链接外部声明
2.认识css选择器

<!DOCTYPE html>
<html>
		<meta charset="utf-8">

		<title>层叠样式</title>
		<style type="text/css">
			.txt{
				font-size:24px;
				color:red;
				font-family:Broadway BT;
				font-weight:bold;
				border:1px #336699 solid;
			}
		</style>
	</head>
	<body>
		<font class="txt">From saving comes having.</font><p>
			<table width="400" height="50">
				<tr>
					<TD align="center" class="txt">富有来自节俭</TD>
				</tr>
				</table>
			</body>

在这里插入图片描述
（1）所有相同的标记都用同一种样式
如：div{ }，html文件中所有div标记都应用同一种样式
(2)全局选择器 *
(3)class选择器
如：<font class="class名称">

.class属性名{样式规则}

补充：如果仅在某一种标记上应用class选择器的样式，可以在.class前面加上标记名称
如：font.txt{}
(4)id选择器
#id属性名{样式规则；}

<!DOCTYPE html>
<html>
		<meta charset="utf-8">

		<title>层叠样式</title>
		<style type="text/css">
			.txt{
				font-size:24px;
				color:red;
				font-family:Broadway BT;
				font-weight:bold;
				border:1px #336699 solid;
			}
			#font_bold{
				font-size: 24px;
				color:red;
				font-family: Boardway BT;
				font-weight:bold;
				border:1px #336699 solid
			}
		</style>
	</head>
	<body>
		<font class="txt">From saving comes having.</font><p>
			<table width="400" height="50">
				<tr>
					<TD align="center" class="txt">富有来自节俭</TD>
				</tr>
				</table>
				<font id="font_bold">From saving comes having.</font>
				
			</body>