cssベース構文とセレクタの使用
2232 ワード
css構文
selector{
property:value
}
例:h 1{color:red;font-size:14 px}
属性が1つより大きい場合、属性間はセミコロンで区切られます.
値が1単語より大きい場合は、引用符を付ける必要があります.
p{font-family:"sans serif";}
セレクタグループ:
h1,h2,h3,h4,h5,h6{color:red;}
継承:
body{
color:green;
}
css-派生セレクタ
要素の位置に対するコンテキスト関係に基づいてスタイルを定義します.
css-idセレクタ
idセレクタは、idが付いたHTML要素に特定のスタイルを指定できます.
idセレクタは「#」で定義
idセレクタは、派生セレクタの確立によく用いられる
css-クラスセレクタ
クラスセレクタを1つのポイントで表示
classは派生セレクタとしても使用できます
css-プロパティセレクタ
指定した属性を持つHTML要素のスタイルを設定する
属性と値セレクタ
body{
color:red;
}
h1,h2,p{
color: bisque;
}
/* */
li strong{
color: black;
}
strong{
color: blue;
}
/*id */
#divId{
color: brown;
}
/*id */
#pid a{
color: crimson;
}
/* */
.pclass{
color: chartreuse;
}
/* */
.divclass a{
font-size: 100px;
color: black;
}
/* */
[title]{
color: chartreuse;
font-size: 50px;
}
/* */
[title=te]{
color: chocolate;
font-size: 10px;
}<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="myCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>aaaaa</p>
<h1>123</h1>
<a>aaaaaaa</a>
<!-- -->
<p><strong>p hello css</strong></p>
<ul>
<li><strong>li hello css</strong></li>
</ul>
<!--id -->
<p id="pid">hello css <a href="http://www.baidu.com">baidu</a></p>
<!--id -->
<div id="divId">
div
</div>
<!-- -->
<p class="pclass"> class </p>
<div class="divclass">
Hello Div
<a href="http://www.baidu.com">baidu</a>
</div>
<!-- -->
<p title="t"> </p>
<!-- -->
<p title="te"> </p>
</body>
</html>