0x0b
css
最終更新：
Bot(ページ名リンク)
-
view
css2, css3から新要素含め復習
cssファイルの呼び出し方
文書間で共有される外部スタイルシートは特定文書内の style 要素に上書きされ、文書内の要素間に共有される style 要素は特定要素内の style 属性に上書きされます。この順序の中に
@import 声明で導入されるスタイルシートが割り込みます
@import 声明で導入されるスタイルシートが割り込みます
@import 規則は外部スタイル・シートの中に記述して構いませんが必ずファイルの冒頭に無ければなりません
スタイル宣言よりも後ろの行に記述すると無視されなければなりませんがブラウザ (UA) によってサポートのばらつきがあります
スタイル宣言よりも後ろの行に記述すると無視されなければなりませんがブラウザ (UA) によってサポートのばらつきがあります
cool.css （外部スタイルシート） < atomic.css （@import 規則） < head 要素内の style 要素 < 開始タグ中での style 属性
@import
外部入力スタイルシート
コンポーネント化（部品化）
@import 規則は style 要素内または外部スタイルシートの冒頭に書かれなくてはならない
コンポーネント化（部品化）
@import 規則は style 要素内または外部スタイルシートの冒頭に書かれなくてはならない
<link rel="stylesheet" type="tex/css" href=" ">
外部スタイルシート
html
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="./atomic.css" type="text/css">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="./atomic.css" type="text/css">
xhtml
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="./atomic.css" type="text/css" />
<?xml-stylesheet href="./atomic.css" type="text/css" ?>
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="./atomic.css" type="text/css" />
<?xml-stylesheet href="./atomic.css" type="text/css" ?>
exe)
<!-- 固定スタイルシート； -->
<link rel="stylesheet" href="atomic.css" type="text/css" />
<!-- 優先スタイルシート； -->
<link rel="stylesheet" title="cool"
<!-- 固定スタイルシート； -->
<link rel="stylesheet" href="atomic.css" type="text/css" />
<!-- 優先スタイルシート； -->
<link rel="stylesheet" title="cool"
href="cool.css" type="text/css" />
<!-- 代替スタイルシート； -->
<link rel="alternate stylesheet" title="modern"
<link rel="alternate stylesheet" title="modern"
href="modern.css" type="text/css" />
<link rel="alternate stylesheet" title="classic"
href="classic.css" type="text/css" />
固定スタイルシート：rel 属性の値stylesheet title属性は指定しない
優先スタイルシート：rel 属性の値stylesheet title属性を指定する
代替スタイルシート：rel 属性の値 alternate stylesheet title属性を指定する
優先スタイルシート：rel 属性の値stylesheet title属性を指定する
代替スタイルシート：rel 属性の値 alternate stylesheet title属性を指定する
UAに指定がなければ
固定スタイルシートと優先スタイルシートが選択される
title属性を同じ名前にすることでグループ化できる
固定スタイルシートと優先スタイルシートが選択される
title属性を同じ名前にすることでグループ化できる
<?xml-stylesheet href="./atomic.css" type="text/css" ?>
<style type="text/css"></style>
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type"
content="application/xhtml+xml; charset=Shift_JIS" />
<title>XHTML 1.1 とはなんだろうか</title>
<!-- CSS を使う宣言 -->
<meta http-equiv="content-style-type" content="text/css" />
<!-- style 要素 -->
<style type="text/css">
xhtml
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
埋込みスタイルシート
style=""
インラインスタイル
要素内スタイル属性を個別に割り当てる
要素内スタイル属性を個別に割り当てる
シンタックス
CSS書式、構文
セレクタ { プロパティ：値； プロパティ：値； }
a {}
グループ化
a, b, c { }
タイプセレクタ：HTMLﾆ用意されている要素がセレクタ(拡張可能)
セレクタ { プロパティ：値； プロパティ：値； }
a {}
グループ化
a, b, c { }
タイプセレクタ：HTMLﾆ用意されている要素がセレクタ(拡張可能)
全称セレクタ
* { }
文脈セレクタ
a a-b { }
a.class { }
.class { }
a.class1.class2 { }
優先度は等価
最後に記述されたものが適用される
a.class=a.[class~=class]
最後に記述されたものが適用される
a.class=a.[class~=class]
css2から拡張(木構造から子孫、兄弟関係からの指定が可能)
子孫セレクタ
ul * li [ }
子供セレクタ
body > a
隣接(兄弟)セレクタ
h1 + h2 { }
疑似クラス
リンク関連の疑似クラス
:link
a[href]:link { color: maroon }
a:link { color: maroon }
:link { color: maroon }
全て等価
:visited
:active
css2では任意の要素に適用
:active
css2では任意の要素に適用
link, visitedは排他的だがactive は他の疑似クラスと共存可能
:hover
カーソルが上に乗っている＆アクティブでない要素
:focus
テキスト入力にフォーカスされている要素
a:hover が :link, :active よりも前に記述されていると、 a:hover のスタイルは :link, :active のスタイルに上書きされてしまいます
カーソルが上に乗っている＆アクティブでない要素
:focus
テキスト入力にフォーカスされている要素
a:hover が :link, :active よりも前に記述されていると、 a:hover のスタイルは :link, :active のスタイルに上書きされてしまいます
exe)
:link { color: red } /* 未訪のリンク */
:visited { color: blue } /* 訪問済みのリンク */
a:active { color: lime } /* アクティブ中のリンク */
a:hover { color: yellow } /* カーソルが上に乗っているリンク */
:link { color: red } /* 未訪のリンク */
:visited { color: blue } /* 訪問済みのリンク */
a:active { color: lime } /* アクティブ中のリンク */
a:hover { color: yellow } /* カーソルが上に乗っているリンク */
css2で追加
first-child 疑似クラス
:first-child
:first-child
exe)body > p:first-child { }
或る要素が親要素の中で最初に現れる子供要素である場合にだけマッチする
擬似クラスですが、文書の木構造に依存して決定可能なこともある
セレクタの中で、任意の場所に記述可能
擬似クラスですが、文書の木構造に依存して決定可能なこともある
セレクタの中で、任意の場所に記述可能
> p:first-child
p:first-child
は等価
は等価
lang 疑似クラス
:lang
:lang
exe)
:lang(jp) { }
p:lang(en) { }
:lang(jp) { }
p:lang(en) { }
lang属性を疑似クラスとしてセレクタに用いることができる
属性セレクタと同価
p:lang(ja)
p[lang="ja"]
属性セレクタと同価
p:lang(ja)
p[lang="ja"]
疑似要素
:first-letter, :first-line 疑似要素
指定可能なプロパティ制限
first-line
ブロック要素の一行目に整形された文字列
font properties、color properties、background properties、'word-spacing'、'letter-spacing'、'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'clear'
first-line
ブロック要素の一行目に整形された文字列
font properties、color properties、background properties、'word-spacing'、'letter-spacing'、'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'clear'
first-letter
一部のブロック要素の一文字目
font properties、color properties、background properties、margin, padding, border, 'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'float'、'clear'
一部のブロック要素の一文字目
font properties、color properties、background properties、margin, padding, border, 'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'float'、'clear'
:first-letter 疑似要素は一文字目に引用符などの区切り文字だと二文字目も含むと規定
:before, :after 疑似要素
プロパティ 'display' の指定可能な値に制約を受ける
ブロックレベル要素
:before, :after の 'display' に指定可能な値は、'none', 'inline', 'block', 'marker'
その他の値は、'block' と等価
インラインレベル要素
:before, :after の 'display' に指定可能な値は、'none', 'inline'
その他の値は、 'inline' と等価
:before, :after の 'display' に指定可能な値は、'none', 'inline', 'block', 'marker'
その他の値は、'block' と等価
インラインレベル要素
:before, :after の 'display' に指定可能な値は、'none', 'inline'
その他の値は、 'inline' と等価
exe)p.note:before { content: "Note: " }
一意セレクタ
a#idname { }
#idname { }
優先度は一位セレクタが上
p#URI ＞ p[id="URI"]
p#URI ＞ p[id="URI"]
属性セレクタ
a[href] { }
a[target="_blank"] { }
a[rel~="copyright] { }
*[lang|="en"] { }
＠規則
@import url("http://~"), url('http://~'), "http://~", 'http://~'
screen
tty
tv
print
projection
handheld
print
braille
embossed(emboss)
speech
aural
all
メディアグループ
interactive、static
grid、bitmap
visual、aural、tactile
continuous、paged
tty
tv
projection
handheld
braille
embossed(emboss)
speech
aural
all
メディアグループ
interactive、static
grid、bitmap
visual、aural、tactile
continuous、paged
