ホームページ > 記事 > ウェブフロントエンド > Xiaoqiang の HTML5 モバイル開発への道 (4) - CSS2 と CSS3
Xiaoqiang の HTML5 モバイル開発への道 (4) - CSS2 と CSS3
- 黄舟オリジナル
- 2017-01-22 10:34:091336ブラウズ
前回の記事で、HTML5 を学ぶには CSS の知識が必要であると述べました。ページをデザインする際には、HTML5 ページのレイアウトと構造を知る必要があります。非常に豪華で美しいインターフェイスを実現するには、CSS を使用する必要があります。まずはCSS2の基本的な使い方を確認してから、CSS3との関係や違いを見ていきましょう。
1.CSSとは何ですか?
カスケード スタイルシート (カスケード スタイルシート) は、Web ページのプレゼンテーション形式を提供します。 W3Cの仕様によれば、Webページをデザインする際には、Webページのデータと構造をHTMLファイルに記述し、Webページの外観をCSSファイルに記述し、Webページの動作を.js ファイルに書き込まれます。この目的は、Web ページのデータ、外観、動作を分離して、コードのメンテナンスを容易にすることです。
2. CSS セレクター:
(1) タグ セレクター (単純なセレクター)
(2) クラス セレクター
.s1{
属性名：属性
}次のような名前付きクラス セレクターもあります:
div.s1{
font-size;120px;
}(3 ) ID セレクター
#d1{
font-size:italic;
font-weight:900;
} (4) セレクターのグループ化
h1,h2,h3{ //用逗号隔开
<span style="white-space:pre"> </span>color:bllue;
}(5) セレクターの導出
#d2 p{
span style="white-space:pre"> </span>color:red;
font-size:300;
}CSS 内のコメント
/* */
スタイルの優先順位:
外部スタイル、スタイルを
.css ファイルの内部スタイルに書きます。 .html ファイル内のスタイル
インライン スタイル、style=" "
競合が発生した場合: 外部スタイル
CSS の 2 つの主要な属性:
(1) 表示属性
には 3 つの値があります:
block マークをブロック マークとして表示する
inline マークをインライン マークとして表示する
none 表示しない
<html>
<!--display属性-->
<head>
<style>
#d1{
width:200px;
height:100px;
background-color:red;
color:white;
font-size:40px;
display:inline; <!--改为行内标记-->
}
#d2{
width:200px;
height:100px;
background-color:blue;
color:white;
font-size:40px;
display:inline; <!--改为行内标记-->
}
</style>
</head>
<body>
<div id="d1">hello1</div>
<!--标记d2会另起一行显示-->
<div id="d2">hello2</div>
</body>
</html> (2) 位置属性
には 3 つの値があります:
static: デフォルト値。ブラウザはタグをデフォルトの方法 (左から右、上から下) で配置します。
絶対: 親マーク (マークが配置されているマーク) を基準としたオフセット。
相対: 最初にデフォルトの方法で配置し、次にオフセットします。
一般的に使用される属性は次のとおりです:
(1)文本相关的属性
font-size:30px; //字体大小
font-style:normal(正常)/italic(斜体)
font-weight:800; //100－900 (粗细)
font-family:"宋体"; //字体
text-align:left/center/right; //文本水平对齐方式
line-height:30px; //行高 一般和容器的高值相同放在中间
cursor:pointer/wait; //光标的形状
(2)背景相关的属性
background-color:red; //背景颜色
background-color:#88eeff; //RGB格式颜色设置
background-color:rgb(100,100,100); //可以用这种格式输入十进制数的颜色值
background-image:url(images/t1.jpg); //背景图片
background-repeat:no-repeat/repeat-x/repeat-y; //平铺方式
background-position:30px 20px; //(水平和垂直)背景位置
background-attachment:scroll(默认)/fixed; //依附方式
也可以同时设置背景的多个特性：
background:背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置；
(3)边框
border-left:1px solid red;
border-right:2px dotted black;
border-bottom:
border-top:
border:1px solid red;
(4)定位
width:100px;
height:200px;
margin //外边距
margin-left:20px;
margin-right:30px;
margin-top:40px;
margin-buttom:50px;
可以简化为：margin:top right bottom left;
margin:40 30 50 20;
padding //内边距
padding-left:
padding-right:
padding-top:
padding-buttom:
可以简化为：padding:top right bottom left;
内边距会将父标记撑开
(5)浮动
取消标记独占一行的特性
float:left/right; //向左，向右浮动
clear:both; //清除浮动的影响
(6)其他
list-style-type:none;除掉列表选项的小圆点。
text-decoreation:underline; //给文本加下划线
(7)连接的伪样式
a:link{color:red} 没有访问时
a:visited{color:blue} 鼠标放上时
a:action{color:green} 鼠标点击时
a:hover{color:yellow} 鼠标离开时上記は、これまでに学習した CSS の基本的な概要です。 まず、css3 のリファレンス マニュアルを開きます (ダウンロード アドレス: http://download.csdn.net /detail/lxq_xsyu/6784027)
まずは border-color 設定の border を見てみましょう
関連プロパティ: border-top-color、border-right-color、border-bottom-color、border -left-color
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="Tencent-ISRD" />
<meta name="Copyright" content="Tencent" />
<title>Border-color</title>
<style>
div{
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
}
</style>
</head>
<body>
<div>在Firefox浏览器里能看到边框颜色渐变效果</div>
</body>
</html>この設定は、Firefox ブラウザーでのみサポートされています。実行中の効果は、css3 で多くのスタイル属性を追加できることがわかります。このマニュアルを参照して、css2よりも豪華なインターフェイス効果を作成できます。jsと組み合わせると、ページアニメーションも実現できます。
次に、インターフェース要素の角丸効果の作成を見てみましょう
<html>
<head>
<style type="text/css">
a{
display:block;
height:40px;
float:left;
font-size:1.2em;
padding-right:0.8em;
background:url(images/headerRight.png) no-repeat scroll top right;
}
a span{
background:url(images/headerLeft.png) no-repeat;
display:block;
line-height:40px;
padding-left:0.8em;
}
</style>
</head>
<body>
<a href="#"><span>Box Title</span></a>
</body>
</html>上記の方法で問題は解決しますが、冗長なタグが追加されます。css3 を使用して解決する方法を見てみましょう: <html>
<head>
<style type="text/css">
a{
float:left;
height:40px;
line-height:40px;
padding-left:0.8em;
padding-right:0.8em;
border-top-left-radius:8px;
border-top-right-radius:8px;
background-image:url(image/headerTiny.png);
backgrount-repeat:repeat-x;
}
</style>
</head>
<body>
<a href="#"><span>Box Title</span></a>
</body>
</html>上記は Xiaoqiang の HTML5 モバイル開発パス (4) - — CSS2 および CSS3 の内容 さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。