検索

インライン 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 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は?Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は?メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか?オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか?Apr 05, 2025 pm 01:21 PM

WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...

React static Page構成:React-AppReviredを使用したコード圧縮を避ける方法は?React static Page構成:React-AppReviredを使用したコード圧縮を避ける方法は?Apr 05, 2025 pm 01:18 PM

React-App-Recrowiredを使用して静的ページを構築するときにコード圧縮を回避する方法について多くの開発者が配信したい...

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ヘンタイを無料で生成します。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい