ウェブ開発財団の研究ノート仕上げ(7)

使用CSS

1)インラインスタイル

最初のタグに書き込まれたスタイル=「」 <div style=””></div>

2)内部スタイル

構文:で書かれたCSSスタイル<style>タグは、<style>中に書かれている<head>タグ。

3)外部スタイル

構文:

  • ①ファイルが終わるの.cssファイルでなければなりません、別のファイルにCSSスタイルを書きます。
  • ②ページで<head>マークアップした後、使用し<link>たファイル・マーク、その上に導入の.cssの終わりを。

CSSセレクタ

(注:のみセレクタが使用され、スタイルを書くの内部又は外部のスタイルを使用)
セレクター:身体改変体スタイルの内容は、両方のセレクタによって検索可能です

  • 1)セレクタマーカー:タグで検索
  • 2)セレクタID:IDルックアップの値に基づいて
  • 3)クラスのクラス選択:クラスの値に応じて検索

CSSは、コメントを追加します

/ * * /

コードセクション:

パート1:

<html>
	<head>
		<title>内外部样式举例</title>
		<!-- 内部样式 -->
		<style>
			<!-- 标记选择器写法 -->
			div{
				color:green;
			}
			a{
				color:blue;
				font-size:30px;
			}
		</style>
		<!-- 外部样式 -->
		<link rel="stylesheet" type="text/css" href="mytest.css"/>
	</head>
	<body>
		<!-- 内联样式 -->
		<div style="color:red">今天是星期二</div>
		<div>今天是3月24日</div>
		<a href="http://www.baidu.com">百度一下</a>
		<!-- <p style="color:yellow;font-size:50px">我是一个段落标记</p> -->
		<p>我是一个段落标记</p>
	</body>
</html>
p{
	color:yellow;
	font-size:60px;
}

レンダリング:

ここに画像を挿入説明

パート2:

<html>
	<head>
		<title>CSS的选择器</title>
		<!-- 内部样式 查找标记 -->
		<style>
			/* 1.标记选择器:根据标记的名字进行查找的 */
			a{
				color:red;  /* 修改字体的颜色 */
				font-size:30px;  /* 修改字体的大小 */
				text-decoration:none;  /* none取消下划线 underline加下划线 */
			}
			div{
				text-decoration:underline;
				font-size:30px;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">点我去百度</a>
		<br/>
		<a href="http://www.taobao.com">点我去淘宝</a>
		<div>我是div</div>
		<span>我是span</span>
	</body>
</html>

レンダリング:

ここに画像を挿入説明

公開された80元の記事 ウォン称賛59 ビュー4217

おすすめ

転載: blog.csdn.net/qq_44458489/article/details/105068177