CSS でよく使用されるスタイルの概要と CSS でよく使用される属性の概要-CSSチュートリアル-php.cn

この記事では、CSS でよく使用されるスタイルと CSS でよく使用される属性の概要を紹介します。必要な方は参考にしていただければ幸いです。表 CSS スタイルテーブル:

機能: HTML タグの表示方法を設定します。

文法構造:

最初のタイプ: セレクター {

スタイル属性ステートメント、またはこのタイプのスタイルシートは 2 つの部分でのみ定義できます。スタイルタグまたは CSS ファイルであり、各スタイルタグまたは CSS ファイルは複数のスタイルシートを定義できます

2 番目のタイプ: style="スタイル属性宣言 1; スタイル属性宣言 2;..."説明: このスタイルの CSS スタイルシートはのみで構成されます1 つ以上の宣言の中で、このタイプのスタイルシートはスタイルタグ属性でのみ定義できます。HTML ドキュメントの各タグにはスタイルタグのプロパティがあります

CSS スタイルシートの定義にどの方法を使用しても、スタイル属性はスタイルシート内の宣言は、スタイル属性（非ラベル属性、つまり、スタイル属性をラベル属性としてラベル内で直接使用することはできません）とスタイル属性値で構成され、スタイル属性とスタイル属性値は分離されていますコロンで区切る; 宣言を区切るにはセミコロンを使用します

注: 1. スタイル属性に複数のスタイル属性値がある場合、スタイル属性値はカンマで区切られます

2。大文字と小文字が区別され、スペースは無視されません

3. 属性値が複数の単語で構成されている場合は、一重引用符を使用することをお勧めします

セレクター:

タグセレクター:

タグセレクターは、HTML ドキュメントで定義されているタグ名を使用します。セレクター名とその構文は次のとおりです:

标签名{
    样式属性声明1;    ...}

ログイン後にコピー

アクションオブジェクト: タグセレクター名と同じタグ名を持つ HTML ドキュメント内のすべてのタグが影響を受けます

クラスセレクター:

クラス選択セレクターは属性を使用しますタグ内のクラスタグ属性の値をセレクター名として使用します。その構文は次のとおりです:

.class  标签属性的属性值{
    样式属性声明1;    ...}

ログイン後にコピー

アクションオブジェクト: クラスタグ属性とクラスセレクターの属性値。注: クラスタグが影響を受けます。属性は数字で始めることはできません

id セレクター:

ID セレクターは、タグ内の id タグ属性の属性値をセレクター名として使用します。構文は次のとおりです:

#id 标签属性的属性值{
    样式属性声明1;    ...}

ログイン後にコピー

Action オブジェクト: の属性値のみ。 id タグ属性と id セレクター# 同じタグのみが影響を受けます。注: id タグ属性の属性値は数字で始めることはできません。id タグ属性の属性値は HTML ドキュメント内で一意である必要があり、class タグ属性の属性値は一意である必要はありません

selector:

语法：父代选择器1 子父代选择器2 子父代选择器3...子代选择器{
        样式属性声 明1;        ...
    }

ログイン後にコピー

注: セレクタースペースを使用して区切ります

グループセレクター:

HTML ドキュメントの複数の CSS スタイルシートの一部のスタイルが同じ場合、グループセレクターを定義して CSS スタイルコードを簡素化することで抽出できます。このタイプのセレクターの名前は、カンマで区切られた複数のセレクターで構成されます。構文は次のとおりです:

选择器1,选择器2,选择器3...{
    样式属性声明;    ...}

ログイン後にコピー

ワイルドカードセレクター:

ワイルドカードセレクターは、HTML ドキュメント内のすべてのタグをリストするグループセレクターと同等です。構文は次のとおりです:

*{
    样式属性声明1;    ...}

ログイン後にコピー

CSS スタイルの使用方法

HTML に CSS スタイルを挿入するには 3 つの方法があります: 外部スタイルシート、内部スタイルシート、インラインスタイル

外部スタイルシート:

のスタイルルールこれらのスタイルシートの再利用を実現し、スタイルシートの管理を容易にするために、CSSスタイルをcssスタイルファイルに記述し、リンクタグを使用して複数のHTML文書内で同じタグが使用されます。 CSS ファイルを HTML ドキュメントに導入します。
追加: link タグは、ドキュメントの先頭に HTML の小さなアイコンを設定するためにも使用されます。構文構造: < link rel=”shortcut icon” type=”image/x-icon ” href=”画像パス” />
内部スタイルシート:

HTML文書内のスタイルは他のHTML文書では共通ではありませんが、このHTML文書内の複数のタグのスタイルは同じです。これらのスタイルルールを再利用し、スタイルルールの管理を容易にするために、CSS スタイルを HTML に直接記述する必要があります。

ドキュメントのスタイルタグ内のインラインスタイル:

HTML ドキュメント内の特定のタグスタイルが異なる場合。他のタグスタイルから変更されている場合、またはドキュメント内のタグスタイルが親タグスタイルと一致していない場合、CSSスタイルがHTMLで記述されている場合ドキュメント内のラベルのstyleタグ属性の属性値において、

CSSスタイル優先

セレクターの優先順位:

ID セレクター > クラスセレクター > ラベルセレクター、およびセレクターの優先順位はセレクターを考慮しません

スタイル挿入メソッドの優先順位:

CSS スタイルを挿入する一般的な順序に従う場合 (つまり、最初にリンクを使用して外部スタイルシートを挿入し、次にスタイルタグを使用して内部スタイルシートを挿入し、最後にスタイルタグ属性にインラインを挿入します。スタイルに関しては、優先順位はインラインスタイル > 内部スタイルシート > 外部スタイルです。シーツ

常用CSS样式属性

边框样式属性
border-width属性：用于为元素的所有边框设置宽度或单独的为各边边框设置宽度
注意：如果不设置border-style属性或将其设置为none或hidden属性值，则border-width属性不会起作用，这时边框宽度实际上会重置为0
border-style属性：用于设置元素所有边框的样式，或者单独为各边设置边框样式，该属性有多个值（none默认值，定义无边框；hidden与none相同；dotted定义点状边框；dashed定义虚线；solid定义实线）
注意：只有当值不为none或hidden时才能出现
border-color属性：用于设置一个元素所有边框的颜色或为四个边框分别设置不同的颜色
注意：把border-style属性声明到border-color属性之前，元素需先获得边框再改变其颜色
边框简写属性：
注意：1.把边框的宽度，样式和颜色设置到一个声明中，需要按照宽度，样式，颜色的顺序进行设置，允许不设置其中某个值
2.使用border设置边框属性时，border-width，border-style，border-color的值只能取一种

border:2px solid greenyellow;border-bottom:2px solid orange;

ログイン後にコピー

轮廓线样式属性：轮廓线是在标签边框边缘绘制一条线，该线不会占据空间，也不一定是矩形，主要起到突出标签的作用
outline-color样式属性：设置轮廓线的颜色，使用该样式属性时必须设定outline-style样式属性的属性值不能为none，否则看不到效果
outlin-style样式属性：设置轮廓线的样式，该属性有多个值（none默认值，定义无轮廓；dotted定义点状轮廓；dashed定义虚线轮廓；solid定义实线轮廓）
outline-width样式属性：设置轮廓线的宽度，使用该样式属性时必须设定outline-style样式属性的属性值不能为none，否则看不到效果（如果outline-style为none，宽度实际上会重置为0）
outlilne样式属性：用于在一个声明中设置所有的轮廓线样式属性（即颜色，样式，宽度），且该样式属性设置属性值时不需要设置所有轮廓线样式属性所对应的属性值，但需按照outline-color，outline-style，outline-width的顺序进行排列，中间用空格隔开

内容溢出样式属性：
overflow样式属性：当标签中的内容溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：visible默认值，所溢出内容不会被修剪，会呈现在元素框之外；scroll所溢出内容会被修剪，但浏览器会显示滚动条以便查看其余的内容；auto如果所溢出内容被修剪，浏览器会显示滚动条以便查看其余的内容
overflow-x样式属性：当标签中的内容x方向溢出标签时，用于设定如何处理溢出的内容
overflow-y样式属性：当标签中的内容y方向溢出标签时，用于设定如何处理溢出的内容

背景样式
background-color样式属性：设置标签背景颜色，该样式属性设置的背景颜色会填充背景的内容，内边距和边框区域，扩展到标签边框的外边界，但不包括外边距
background-image样式属性：设置标签背景图片，该样式属性有多个属性值：url（’URL’）指向图片的路径；none默认值，不显示背景图片
background-repeat样式属性：设置标签背景图片重复模式，该样式属性有多个属性值：repeat默认值，背景图片将在水平和垂直方向重复；repeat-x背景图片将在水平方向重复；repeat-y背景图片将在垂直方向重复；no-repeat背景图片将仅显示一次
background-attachment样式属性：设置标签背景图片是否随着
页面其余部分的滚动而滚动，该样式属性有多个属性值：scroll默认值，背景图片会随着页面其余部分的滚动而滚动；fixed当页面的其余部分滚动时，背景图片不会移动
background-position样式属性：随着标签背景图片的位置
background-size样式属性：设置单张背景图片的尺寸，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
background样式属性：用于在一个声明中设置所有的背景样式属性，且该样式属性设置属性值时不需要设置所有背景样式属性所对应的属性值且设置的属性值没有顺序要求

字体样式
font-style样式属性：设定字体的风格（normal默认值，显示标准的字体风格；italic显示斜体的字体风格）
font-variant样式属性：设定是否以小型大写字母的字体显示文本（normal默认值，显示标准的字体；small-caps显示小型大写字母的字体）
font-weight样式属性：设置字体的粗细（normal默认值，定义标准的字符；bold定义粗体字符；bolder定义更粗的字符；lighter定义更细的字符；值px直接设定）
font-size样式属性：设置字体大小
font-family样式属性：设置字体系列，使用逗号分割每种字体，如果浏览器不支持第一个字体则会尝试第二个字体；如果字体系列中的所有字体都不支持，则使用浏览器默认支持的字体
font样式属性：用于在一个声明中设置所有的字体样式属性，且该样式属性设置属性值时不需要设置所有字体样式属性所对应的属性值，但需要按照font-style、font-variant、font-weight、font-size/line-height和font-family顺序进行排列，中间用空格隔开。
注意：1.font样式属性至少要指定字体大小和字体系列；
2.没有font-color样式属性，如果要设置字体的颜色需要使用color样式属性；

文本样式
letter-spacing样式属性：设置字符间距，样式属性值可以为负，但这时字符之间更加拥挤
line-height样式属性：设置行间距（即行高），不能为负值
text-align样式属性：设置标签内文本的水平对齐方式，该属性有多个值：left把文本排到左边；right把文本排到右边；center把文本排到中间；justify实现两端对齐文本效果
text-transform样式属性：设置文本的大小写，该属性有多个值：none默认值，定义带有小写字母和大写字母的标准的文本；capitalize文本中的每个单词首字母大写；uppercase定义仅有大写字母；lowercase定义仅有小写字母
text-indent样式属性：设定文本块中首行文本的缩进，如果样式属性值为负值，则首行会被缩进到左边
text-decoration样式属性：设定文本装饰（比如是否有下划线及划线显示的位置），该属性有多个值：none默认值，定义标准的文本；underline定义文本下的一条线；overline定义文本上的一条线；line-through定义穿过文本的一条线

列表样式
list-style-type样式属性：设置列表项标记的类型
list-style-position样式属性：设置列表项标记相对于列表项内容的位置，该属性有多个值：inside列表项目标记放置在文本以内；outside默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外
list-style-image样式属性：将列表项标记设定为指定的图片
list-style样式属性：用于在一个声明中设置所有的所有的列表样式属性，且该样式属性设置属性值时不需要设置所有列表样式属性所对应的属性值，但需要按照list-style-type、list-style-position和list-style-image顺序进行排列，中间用空格隔开

超链接样式
CSS 伪类用于向某些选择器添加特殊效果，伪类使用语法：

选择器:伪类{
    样式属性声明1;    ...}

ログイン後にコピー

CSS中常用的伪列如下：
：link 向未被访问的链接添加样式
：visited 向已被访问的链接添加样式
：hover 当鼠标悬浮在标签上时向标签添加样式
：active 向被激活的标签添加样式
：focus 向拥有键盘输入焦点的标签添加样式
注意：如果:link，:visited，:hover和:active一起使用，为了产生预期的效果，在 CSS 定义中需按照:link、:visited，:hover，:active的顺序进行

光标样式属性
cursor样式属性用于设定光标的显示形状，该属性有多个属性值，其中pointer使光标呈现为指示链接的指针