CSSの基本、スタイル
2022-01-17 13:26:03
CSSとは
CSS ( カスケーディングスタイルシート ):カスケードスタイルシート言語。
CSSが行うことは。
HTML ページを修正し、HTML ページ内の特定の要素のスタイルを設定して、HTML ページの見栄えを良くします。
HTMLページ内にネストされたCSSを使用する2つの方法
一つ目の方法。タグ内のstyle属性を使って、要素のCSSスタイルを設定する。この方法をインライン定義と呼ぶ。構文形式です。
<tag style="styleName:styleValue;styleName:styleValue;..."></tag>
2つ目の方法：外部スタイルシートファイルへのチェーン接続、これが最もよく使われる方法です。(スタイルを別のxxx.cssファイルに書き出し、そのcssファイルを必要なページに直接導入し、スタイルを導入する）構文形式です。
This approach is easy to maintain and less expensive to maintain.
The xxx.css file
1.html introduces the
2.html is introduced in
3.html is introduced in
4.html is introduced in
コードの3つの表示方法
インライン定義方式
<!doctype html>
<html>
<head>
<title> The first way to introduce CSS styles in HTML: the inline definition method</title>
<head>
<body>
<! --
width width style
heght height style
background-color background-color style
display layout style (none means hide, block means show)
-->
<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border-color: red;border-width: 3px;border-style: solid"></div>
<! The --style can also be written like this
border: width style color
-->
<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border: thick double yellow; "></div>
</body>
</html>
スタイルブロックの考え方
<!doctype html>
<html>
<head>
<title> The second way to introduce styles in HTML: the style block approach</title>
<style type="text/css">
/*
This is the CSS comment
*/
/*
The id selector
#id{
style name: style value.
style name: style-value.
style name: style value.
........
}
*/
#usernameErrorMsg{
font-size: 12px;
color: red;
}
/*
Tag selector
tag-name {
style name: style-value;
Style name: style-value;
style name: style-value;
}
*/
div{
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
/*
Class Selector
. Class name {
style name: style value ;
Style name: style-value;
Style name: style-value ;
}
*/
.myclass{
border: 2px double blue;
width: 400px;
height: 30px
}
</style>
</head>
<body>
<! --
Set the style font size 12px,color is red
-->
<! --<span id="usernameErrorMsg" style="font-size: 12px;color: red"> Sorry, username can't be empty! </span>-->
<span id="usernameErrorMsg"">Sorry, username can't be empty! </span>
<div></div>
<div></div>
<div></div>
<! --class identical ones can be considered as the same class of tags. -->
<br><br><br><br>
<input type="text" class="myclass"/>
<br><br><br><br><br><br>
<select class="myclass">
<option>specialist</option>
<option>undergraduate</option>
<option>Master</option>
</select>
</body>
</html>
外部スタイルシートファイルへのリンク
cssファイル
a{
text-decoration: none;
}
#baiduSpan{
text-decoration: underline;
cursor: wait;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> The third way to introduce CSS styles in HTML: chain to an external stylesheet file </title>
<! --introduce-css-->
<link type="text/css" rel="stylesheet" href="css/1.css"/>
</head>
<body>
<a href="http://www.baidu.com">Baidu</a>
<span id="baiduSpan">Click on my link Baidu</span>
</body>
</html>
以下のようなスタイルがよく使われます。
ボーダー
(1)
div{ border : 1px solid red; }
(2)
div{ border-width : 1px; border-style : solid; border-color : red; }
隠す
div{ display : none; }
フォント
div{ font-size : 12px; color : red; }
文字装飾
a{ text-decoration : none; }
a{ text-decoration : underline; }
リスト
ul{ list-style-type : none; }
マウスホバー効果を設定する
:hover
ポジショニング
div{ position : absolute; left : 100px; top : 100px; }
小さなマウスハンド
div{ cursor : pointer; }
概要
この記事は以上です。あなたのお役に立てれば幸いです。また、Script Houseの他のコンテンツにももっと注目してください
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン