検索

インライン CSS スタイル シートでは、次のコードのような CSS コードを既存の HTML タグに直接記述します。

<p style="color:red">红色</p>

CSS スタイル コードは 二重引用符で記述する必要があります。

複数の CSS スタイルがある場合はセミコロンで区切ります:

<p style="color:red;font-size:12px">红色</p>

2 埋め込み

埋め込み CSS スタイルとは、

タグの間に CSS スタイル コードを記述できることを意味します。

<style type="text/css">span{ color:red; }</style>

3 外部

CSS スタイル ファイルをHTML ファイルの内部は、次のコードのようになります。

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

注:

  1. css スタイル ファイル名は、意味のある名前が付いています。 main.css などの英語の文字。
  2. rel="stylesheet" type="text/css"は固定の書き方なので変更できません。
  3. タグの位置は通常
  4. の 3 つのメソッドの優先順位です: inline>embedded>external ですが、embedded>external には埋め込み CSS スタイルが必要です。タイプ。

2 つの CSS セレクター

構文

选择器{    样式;}

2 つのセレクター

1 つのタグselector

タグセレクターは実際には HTML コード内のタグです

p{font-size:12px;line-height:1.6em;}

2 型セレクター

.类选器名称 {css样式代码;}

3 つの ID セレクター

ID セレクターはドキュメント内で 1 回のみ使用できます

#ID器名称{css样式代码;}

4 つの子セレクター

> シンボル表現、指定されたラベル要素の最初の世代の子要素 ​​(直接の子孫) を選択します

.food>li //选择类标签food下面的第一个li

5 には (子孫セレクター) が含まれます。

スペースを介して指定されたラベル要素の下にある子孫要素 (すべての子孫要素) を選択するために使用されます

h1 em {color:red;}

6 ユニバーサル セレクター

* HTML 内のすべてのタグ要素と一致します

7 疑似クラス セレクター

存在しない HTML を許可します ラベル (ラベルの特定の状態)スタイルの設定

a:hover{color:red;} //a标签鼠标滑过的状态设置字体颜色

8 グループ化セレクター

HTML 内の複数のラベル要素に同じスタイルを設定する スタイルを選択するときに、次を使用できます。グループ化セレクター、

h1,span{color:red;}

//これは、次の 2 行のコードと同等です:

h1{color:red;}span{color:red;}

トリプル CSS 継承

スタイルは、その子孫に自動的に適用されます。

例: p に色が設定されている場合、span にも色が設定されます。

p{color:red;}

<p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

継承されない CSS スタイルがいくつかあります。たとえば、border: 1px sold red;

fourweights

は、同じ要素に対して異なる CSS スタイル コードを設定し、より高い重みを持つ CSS スタイルが最初に使用されます。

重みのルール:

ラベルの重みは 1、クラス セレクターの重みは 10、ID セレクターの重みは最大 100 です。たとえば、次のコード:

p{color:red;}                  /*权值为1*/p span{color:green;}           /*权值为1+1=2*/.warning{color:white;}         /*权值为10*/p span.warning{color:purple;}  /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注: 継承にも値がありますが、その値は非常に低いと提案されている文献もあります。わずか 0.1 なので、継承される重みが最も低いことは理解できます。

5 つの書式

フォント

body{font-family:"宋体";}

フォントのサイズ、色

body{font-size:12px;color:#666}

太字、斜体、下線、取り消し線

p span{font-weight:bold;} //粗体p a{font-style:italic;}   //斜体p a{text-decoration:underline;}  //下划线.oldPrice{text-decoration:line-through;} //删除线

インデント

p{text-indent:2em;}  //注意:2em的意思就是文字的2倍大小。

行間

p{line-height:1.5em;}

単語間、文字間

letter-spacing //字母间距:word-spacing //单词间距:

アライメント

text-align:left/center/right

6 ボックス モデル

コンセプト

モデル物が入っている箱のこと。すべてのブロックレベルの要素はボックス モデルの特性を持っています。

要素の分類

  1. ブロック要素
  2. インライン要素
  3. インラインブロック要素

ブロック

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>、<li>

  1. は新しい行に表示され、独自の行を占めます。
  2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。
  3. 幅のデフォルトは親コンテナの 100% です。

インライン要素

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

  1. 不单独占一行
  2. 不可设置元素的高度、宽度、行高及顶部和底部边距
  3. 元素的宽度就是它包含的文字或图片的宽度,不可改变
  4. 块状元素也可以通过代码display:inline将元素设置为内联元素

内联块状元素inline-block

<img  alt="css 概要_html/css_WEB-ITnose" >、<input>

将元素设置为内联块状元素: display:inline-block

  1. 不独占一行
  2. 可以设置宽高

边框

边框三个属性:

div{    border-width:2px;    border-style:solid;    border-color:red;}

1.border-style常见样式有:dashed(虚线)| dotted(点线)| solid(实线)

1.border-color(边框颜色)中的颜色可设置为十六进制颜色,如:

1.border-width(边框宽度)中的宽度也可以设置为:thin | medium | thick(不是很常用),常用的还是用象素(px)

四个边框单独设置:

border-top:1px solid red;border-bottom:1px solid red;border-right:1px solid red;border-left:1px solid red;

宽度和高度

css内定义的宽(width)和高(height),指的是填充padding以里的内容范围。

填充padding

上、右、下、左(顺时针)。

//合起来写:div{padding:20px 10px 15px 30px;}//分开写:div{   padding-top:20px;   padding-right:10px;   padding-bottom:15px;   padding-left:30px;}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px,左右一样为20px,可以这么写:

div{padding:10px 20px;}

边界margin

上、右、下、左。

//合起来写:div{margin:20px 10px 15px 30px;}//分开写:div{   margin-top:20px;   margin-right:10px;   margin-bottom:15px;   margin-left:30px;}

如果上右下左的边界都为10px;可以这么写:

div{ margin:10px;}

如果上下边界一样为10px,左右一样为20px,可以这么写:

div{ margin:10px 20px;}

七 布局模型

CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。在网页中,元素有三种布局模型:

1.流动模型(Flow)

2.浮动模型 (Float)

3.层模型(Layer)

流动模型

默认的网页布局模式

flow模型特征:

1.块状元素自上而下顺序分布,默认状态下,块状元素的宽度都为100%,以行的形式占据位置,霸道独占一行。

1.内联元素在所处的包含元素内从左到右水平分布

浮动模型

块状元素独占一行,让两个块状元素并排显示,可以使用浮动。

div{	width:200px; 	height:200px;     border:2px red solid;    	float:left;}

<div id="div1"></div><div id="div2"></div>

层模型

绝对定位(position: absolute)

将元素从文档流中拖出来,绝对定位元素不占文档流,忽略文档流的存在而浮在已有东西的上面left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位,如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

相对定位(position: relative)

通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。它相对定位占文档流 ,所以定位不好它会覆盖已有的东西。

固定定位(position: fixed)

与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。不会受文档流动影响,这与background-attachment:fixed;属性功能相同。

Relative与Absolute组合使用

相对于其它元素进行定位.参照定位的元素必须是相对定位元素的前辈元素:

<div id="box1"><!--参照定位的元素-->    <div id="box2">相对参照元素进行定位</div><!--相对定位元素--></div>//从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。

参照定位的元素必须加入position:relative;

#box1{    width:200px;    height:200px;    position:relative;    //绝对    }

定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

#box2{    position:absolute;  //相对    top:20px;    left:30px;        }//这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。

八 代码缩写,节能

1 盒模型代码简写

盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同,如下面代码:

margin:10px 10px 10px 10px;//可缩写为:margin:10px;

2、如果top和bottom值相同、left和 right的值相同,如下面代码:

margin:10px 20px 10px 20px;//可缩写为:margin:10px 20px;

3、如果left和right的值相同,如下面代码:

margin:10px 20px 30px 20px;//可缩写为:margin:10px 20px 30px;

注意:padding、border的缩写方法和margin是一致的。

2 颜色值缩写

关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。

p{color:#000000;}//可以缩写为:p{color: #000;}p{color: #336699;}//可以缩写为:p{color: #369;}

3 字体缩写

网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:

body{    font-style:italic;    font-variant:small-caps;    font-weight:bold;    font-size:12px;    line-height:1.5em;    font-family:"宋体",sans-serif;}

这么多行的代码其实可以缩写为一句:

body{    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;}

注意:

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:

body{    font:12px/1.5em  "宋体",sans-serif;}

只是有字号、行间距、中文字体、英文字体设置。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript:比較概要HTML対CSS対JavaScript:比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML:それはプログラミング言語か何か他のものですか?HTML:それはプログラミング言語か何か他のものですか?Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1)htmlStructuresandformatswebcontentusingtags.2)ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML:Webページの構造の構築HTML:Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ:HTMLの力テキストからウェブサイトへ:HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1)htmlは、などのタグを介してドキュメント構造を整理します。 2)ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3)マルチメディア関数を強化するなど、HTML5の新機能。 4)一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5)最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境