ホームページ > 記事 > ウェブフロントエンド > CSSとは何ですか? CSS カスケードスタイルの概要 (コード)

CSSとは何ですか? CSS カスケードスタイルの概要 (コード)

不言オリジナル: 2018-07-27 17:52:414754ブラウズ

CSSとは何ですか? CSSはCSSカスケードスタイルシートです。 CSS は Cascading Style Sheets の略称であり、カスケードスタイルシートを意味します。 CSS の出現により、Web ページ要素のスタイルが強化され、Web ページの形式が Web ページのコンテンツから分離されました。次にcssの具体的な内容を見ていきます。

css 基本構文とページリファレンス

css は次のように定義されます:

selector { 属性: 値; 属性: 値; 属性: 値;}

セレクターはスタイルをページ要素に関連付けます。プロパティは、設定するスタイルプロパティです。各プロパティには 1 つ以上の値があります。コード例:

p{ width:100px; height:100px; color:red }

CSSページ導入方法:

1. 外部リンク: linkタグを介してページ内に外部スタイルシートにリンクします。

<link rel="stylesheet" type="text/css" href="css/main.css">

2. 埋め込み: スタイルタグを使用して Web ページに埋め込みスタイルシートを作成します。

<style type="text/css">
    p{ width:100px; height:100px; color:red }
    ......</style>

3. インライン: ラベルの style 属性を使用して、ラベルにスタイルを直接書き込みます。

<p style="width:100px; height:100px; color:red ">......</p>

CSSテキスト設定

アプリケーションテキストに一般的に使用されるCSSスタイル:

主に 3 つの方法がありますCSS カラー値を表現するには:
2. RGB 表現 (例: rgb(255,0,0) は red

css セレクター

一般的に使用されるセレクターは次のとおりです:

1. タグセレクター

タグセレクター、このタイプのセレクターは大きな影響を与えるため、推奨されます。可能な限り階層セレクターで使用する必要があります。

例:

*{margin:0;padding:0}
div{color:red}   
<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->

2. ID セレクター

ID 名で要素を選択します。要素の ID 名は重複できないため、スタイル設定項目はページ上の 1 つの要素にのみ対応し、ID 名を再利用することはできません。通常、プログラム Use に与えられるため、セレクターとして id を使用することはお勧めできません。

例:

#box{color:red} 
<p id="box">....</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

3. クラスセレクター

1つのクラスを複数の要素に適用でき、1つの要素に対して複数のクラスを使用することもできる、柔軟なアプリケーションです。 CSS 最も一般的なセレクター。
例:

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

4. 階層セレクター

は、主に親要素の下にある子要素、または子要素の下にある子要素を選択するために使用され、名前を減らすためにラベル要素と組み合わせて使用することもできます。レベルの競合による名前付けを防ぐために使用されます。
例:

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

5. グループセレクター

同じスタイル設定がある場合は、複数のセレクターを使用できます。
例:

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

6. 疑似クラスと疑似要素セレクター

一般的に使用される疑似クラスセレクターには、マウスが要素上にあるときの状態を示す前と後の疑似要素セレクターが含まれます。要素にコンテンツを挿入して使用できます。

.box1:hover{color:red}
.box2:before{content:&#39;行首文字&#39;;}
.box3:after{content:&#39;行尾文字&#39;;}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

CSS ボックスモデル

ボックスモデルの説明

CSS ボックスモデルは、要素の対応するスタイルを設定するためのメタファーとして実際のボックスを使用し、要素はページ上に四角形として表示されます。ボックスモデルの概略図は次のとおりです:

要素はボックスと呼ばれ、対応するスタイルは次のように設定されます: ボックスの境界線 (ボーダー)、ボックス内のコンテンツ間の間隔、および境界線 (パディング) とボックス間の間隔 (マージン)。

枠線を設定する

上枠など片側に枠線を設定するには、次のように設定できます:

border-top-color:red;    /* 设置顶部边框颜色为红色 */  
border-top-width:10px;   /* 设置顶部边框粗细为10px */   
border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)  
  dashed(虚线)  dotted(点线); */

上記の3つの文は1つの文に短縮できます:

border-top:10px solid red;

もう一方の枠線を設定する方法3 辺は上と同じです。上の「上」を置き換えます。「左」に変更すると左側が設定され、「右」に変更すると右側が設定され、「下」に変更すると下端が設定されます。

4 つの辺の設定が同じ場合は、4 つの辺の設定を 1 つの文に組み合わせることができます:

border:10px solid red;

内側の間隔のパディングを設定します

ボックスの 4 つの辺の内側の間隔を設定します。

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

上記の設定は次のように省略できます:

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  四个方向的内边距值。 */

padding の後に 3 つの値、2 つの値、および 1 つの値を続けることもできます。それぞれ設定する項目は次のとおりです:

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

Set外側の間隔マージン

外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。

盒子模型的尺寸

按照下面代码制作页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的真实尺寸</title>
    <style type="text/css">
        .box01{width:50px;height:50px;background-color:gold;}
        .box02{width:50px;height:50px;background-color:gold;border:50px
         solid #000}
        .box03{width:50px;height:50px;background-color:gold;border:50px
         solid #000;padding: 50px;}
    </style>
</head>
<body>
    <p class="box01">1</p>
    <br />
    <p class="box02">2</p>
    <br />
    <p class="box03">3</p>
</body>
</html>

页面显示效果如下：

通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

思考题：
1.在布局中，如果我想增大内容和边框的距离，又不想改变盒子显示的尺寸，应该怎么做？

课堂练习
请制作图中所示的标题：

margin相关技巧
1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

.clearfix:before{
    content: &#39;&#39;;
    display:table;
}

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

块元素、内联元素、内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

块元素
块元素，也可以称为行元素，布局中常用的标签如：p、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

支持全部的样式
如果没有设置宽度，默认的宽度为父级宽度100%
盒子占据一行、即使设置了宽度

内联元素
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

支持部分样式（不支持宽、高、margin上下、padding上下）
宽高由内容决定
盒子并在一行
代码换行，盒子之间会产生间距
子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式

解决内联元素间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size

内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

支持全部样式
如果没有设置宽高，宽高由内容决定
盒子并在一行
代码换行，盒子会产生间距
子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

请制作图中所示的菜单：

浮动

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

4、浮动让行内元素或块元素自动转化为行内块元素

5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

7、浮动元素之间没有垂直margin的合并

清除浮动

父级上增加属性overflow：hidden
在最后一个子元素的后面加一个空的p，给它样式属性 clear:both（不推荐）
使用成熟的清浮动样式类，clearfix

.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮动的使用方法：
.con2{... overflow:hidden}
或者
<div class="con2 clearfix">

定位

关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

典型定位布局
1、固定在顶部的菜单
2、水平垂直居中的弹框
3、固定的侧边的工具栏
4、固定在底部的按钮

relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
inherit 从父元素继承 position 属性的值

background属性

属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

举例：
下面这些例子使用下面这张图片做为背景图：