ホームページ > 記事 > ウェブフロントエンド > CSS Web プログラミング_html/css_WEB-ITnose
CSS Web プログラミング_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:17:051239ブラウズ
CSS Web プログラミング
CSS の概要
CSS は、Web ページの表示効果を定義するために使用される Cascading Style Sheets です。 HTML コード内のスタイル定義の重複を解決し、後続のスタイル コードの保守性を向上させ、Web ページの表示効果を高めることができます。簡単に言うと、CSS は Web ページのコンテンツと表示スタイルを分離し、表示機能を向上させます。
それでは、CSS と HTML は Web ページのコードでどのように組み合わされるのでしょうか?スタイル属性、スタイルタグ、インポート、リンクの 4 つのメソッドを使用します。
CSSとHTMLを組み合わせる4つの方法
☆ 1. スタイル属性メソッド
<p style="background-color:#FF0000; color:#FFFFFF"> p标签段落内容。 </p>☆ 2. スタイルタグメソッド
<style type=”text/css”> p { color:#FF0000;}</style>☆ 3. インポートメソッド りー☆ 4．リンク方法
<style type="text/css"> @import url(myDiv.css)</style>
例:
<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />
関連構文
、外側から内側へ。優先順位は低いものから高いものへと続きます。 ——要するに、大まかには後からロードするということですが、細かい優先順位の問題もあります（これについては後述します）。
☆CSSコード形式
セレクタ名 {属性名:属性値; 属性名:属性値;…….}
属性はセミコロンで区切る
属性と属性値はコロンで直結
属性が複数の値を指定する場合は、複数の値をスペースで区切ります。
Selector
は CSS が動作するタグを指定するもので、そのタグの名前がセレクターです。意味: どのコンテナを選択するか (ラベル自体がデータをカプセル化するコンテナです)。
☆セレクターには次の 3 種類があります:
1) HTML タグ名セレクター。使用するタグ名はhtmlです。
2) クラスセレクター。実際には、タグ内の class 属性が使用されます。
3) ID セレクター。実際には、タグ内の id 属性が使用されます。
各タグは class 属性と id 属性を定義します。ラベルの操作を容易にするためにラベルを識別するために使用されます。
定義では、複数のタグの class 属性値は同じにすることができますが、id 値は JavaScript でよく使用されるため、一意である必要があります。
☆セレクターの優先順位
タグ名セレクター < クラスセレクター < スタイル属性
例:
<html><head><title>MyCssDemo1</title><style type="text/css">/*3、导入方式 导入语句必须写在前面*/@IMPORT url("css/a.css");/*2、用style标签方法*/span { background-color: yellow; color: black;}</style><!-- 4、用link标签的方式加载 --><link rel="stylesheet" type="text/css" href="css/b.css" media="screen,print"/></head><body> 湖南城市学院 <!-- 1、用style属性方法 --> <div style="background-color: red;color: black">这是第一个div区域中的文字</div> <span>这是第一个span区域中的文字</span> <hr /> <table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>23</td> </tr> <tr> <td>李四</td> <td>23</td> </tr> <tr> <td>Jack</td> <td>22</td> </tr> </table></body></html> <br> </p>
<p></p> <p><br> </p>
<p>☆ 関連付けセレクター <strong> </strong> タグは次のことができます同じタグ内の異なるタグをネストして異なるスタイルを表示したい場合は、このセレクターを使用できます。例: <br> </p>
<p> </p>
<pre name="code" class="sycode"><html><head><title>MyCssDemo3</title><style type="text/css">table { border: solid 1px; width: 300px; text-align: center;}/*div中的a类，且这里写了的话下面的.a再设的话无法覆盖此处设置的div.a {background: #66B3FF;}*/.a{/*class选择器*/background: #FF0000;width: 209px;}#age {/*id选择器*//*下文设置的id只能有一个，其实像class那样设置多个也是可以达到一样的效果的，但是id在java编程中应该要是唯一的，在JavaScript中经常用，若不唯一就很同意挂掉*/background: #66B3FF;}tr { background-color: #DFFFDF;}</style></head><body> 湖南城市学院 <div>这是第一个div区域中的文字</div> <div class="a">这是第二个div区域中的文字</div> <span>这是第一个span区域中的文字</span><br/> <span class="a">这是第二个span区域中的文字</span> <p>这是一个p区域中的文字</p> <hr/> <table> <tr> <th>姓名</th> <th id="age">年龄</th></tr> <tr class="a"> <td>张三</td> <td>23</td></tr> <tr> <td>李四</td> <td>23</td></tr> <tr class="a"> <td>Jack</td> <td>22</td></tr> </table></body></html>☆結合セレクター 同じスタイルでの複数のセレクターの定義。たとえば、「div の タグ」と「クラス名 cc」領域に同じスタイルを設定したい場合は、次の組み合わせセレクターを定義できます:
.cc, div b{/*Different選択項目 セレクターはカンマで区切ります */
background-color:#0000ff;
color:#fff;}
☆疑似要素セレクター
形式: タグ名: 擬似要素。クラス名タグ名。クラス名: 疑似要素。
1. ハイパーリンク a タグ内の疑似要素
a:link ハイパーリンクはクリックされません。
a:visited 訪問後のステータス。
a:hover カーソルがハイパーリンクに移動した（クリックされていない）状態。a:active ハイパーリンクがクリックされたときの状態。
2. 段落 p タグ内の疑似要素
p:first-line 段落内のテキストの最初の行。
3。
CSSボックスモデル1
◇ボーダー(ボーダー)
上ボーダー-上下ボーダー-下
左ボーダー-左
右ボーダー-右
上パディング-上
下パディング-bottom
左パディング-左右パディング-右
◇外側パッチ(マージン): 外側マージン
右マージン-右
◇ float : none | left | right
none : デフォルト値。オブジェクトはフロートしません
left : テキストがオブジェクトの右側に流れます
◇ Clear : none left right 両方
none | デフォルト値。浮遊オブジェクトは両側で許可されます
left : 浮遊オブジェクトは左側で許可されません
right : 浮遊オブジェクトは右側で許可されません both : 浮遊オブジェクトは許可されません
例 1:
p { color:#00FF00;}p b { color:#FF000;}<p>P标签<b>XXXX学院</b>段落样式</p><p>P标签段落</p>
<html><head><style type="text/css">div { border: #f00 solid 1px; width: 200px; height: 100px;}#div1 { background-color: #f00; padding: 20px; /* 4个边距都是20px*/ /* padding: 20px 100px; 上下边距是20px，左右是100px*/ /* padding: 20px 100px 200px ;上,左右,下*/ /* padding: 20px 100px 200px 300px ; 顺时针：上,右，下，左*/ margin: 0px; float: left;}#div2 { background-color: #0f0; margin-left: 100px; padding: 20px; float: left;}#div3 { background-color: #00f; padding: 20px; margin-left: 100px; float: left; /*这里设置成漂浮则会和前面设置了漂浮的成员一起靠右侧排队，若这里不设置漂浮，则div框图会无视前面设置了漂浮的成员的存在直接排到最前面， 会出现看上去与设置了漂浮的div重叠的现象，但是文字会留在下一行而不随div一起，但是文字所在的纵坐标与div保持一致并且紧挨着div框图，只是横坐标不同而已*/ /*clear: left;*/ /*设置clear: left;的话如果前者有设置了漂浮的，该成员不会排到前者右侧而是在下面，即clear属性设置成了left,right等时，相应一侧不允许出现有设置了漂浮的*/}body { margin: 0px; /*body标签也有margin，因此在head里的style里设最外的margin为0的话，仍然有空隙，需要为body设css属性将margin设为0才可以达到想要的效果*/}</style></head><body> <div id="div1">信息科学与工程学院</div> <div id="div2">土木工程学院</div> <div id="div3">数学与计算科学学院</div></body></html> CSS的盒子模型3
☆CSS布局——定位
◇ position : static | absolute | fixed | relative
static : 默认值。无特殊定位，对象遵循HTML定位规则。
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义。
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。
relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。
☆CSS布局——图文混排
☆CSS布局——图像签名
示例：
<html><head><style type="text/css">div { border: #f00 1px solid; width: 200px; height: 100px;}#div1 { background-color: #f00; /*position: absolute; top: 50px; left: 80px;*/ /*设置成绝对定位时，可以看成该对象与其他的不位于同一个平面，因此，其他的可以直接置顶排列。 并且，当绝对定位的对象与其他对象(相对定位和不设置定位)出现重叠的时候，设置了绝对定位的对象将位于其他的对象的下方*/}#div2 { background-color: #0f0; width: 300px; position: relative; top: 20px; left: 20px;}#div3 { background-color: #00f; /*position: relative; top: 10px;*/ /*相对定位只能根据前者不设置相对定位时应该处的位置来相对的，若前者设置了相对定位，此处会将其置之不理，任然认为前者处于原处。 并且，当相对定位的对象与其他对象(绝对定位和不设置定位以及出现的比其早的相对定位的对象)出现重叠的时候，设置了相对定位的对象将位于其他对象的上方*/}#div0 { position: absolute; top: 400px; left: 150px;}#div4 { position: relative; background-color: #f00;}#div5 { position: relative; background-color: #0f0;}#div6 { position: relative; background-color: #00f;}</style></head><body> <div id="div1">信息科学与工程学院1</div> <div id="div2">土木工程学院1</div> <div id="div3">数学与计算科学学院1</div> <hr/> <div id="div0"> <div id="div4">信息科学与工程学院2</div> <div id="div5">土木工程学院2</div> <div id="div6">数学与计算科学学院2</div> </div></body></html>