CSSの紹介

今日の勉強はついに CSS に行き着きました。CSS は多くのクールなインターフェイスを実現でき、CSS は問題を解決するようです

HTML 構造上のスタイルの記述が混乱したために生まれた言語です。以前は、スタイルは構造と一緒に記述されていました。

同じスタイルが繰り返し繰り返され、再度書き直すことしかできないため、相互に区別がなく、コードの量が大幅に増加します

その後、コードを書いた後も読みにくくなり、この時にcssが出てきて

エラーを見つけるのが非常に困難になりました。

その利点を反映しており、その利点は上記の問題を解決し、構造をパフォーマンスから分離することです。

それでは CSS とは何かについて話しましょう

CSSとは何ですか?

CSS (Cascading Style Sheets) カスケード スタイル シート

CSS3 は CSS2 のアップグレード版です。3 は単なるバージョン番号であり、CSS2.1 に基づいて多くの強力な新機能が追加されています。

現在、主流のブラウザである chrome、safari、firefox、opera、さらには 360 もすでに CSS3 機能のほとんどをサポートしています

、IE10 も CSS3 の完全サポートを開始します。 ブラウザーが異なれば、必要なプレフィックスも異なる場合があります。 CSS プロパティを表します

または、ルールはまだ W3C 標準の一部になっておらず、ブラウザのプライベート プロパティですが、現在ブラウザの新しいバージョンではルールは必要ありません

プレフィックスが必要ですが、前方互換性を高めるために、プレフィックスは依然として不可欠です。

CSS は HTML の構造を装飾するために登場しました。これまでの HTML ではできなかったことが可能になります。

とても美しいので、CSSはHTMLを補完するものです。

例:

リーリー

css は、フォントがピンク色、太字、フォント サイズが 16 ピクセルになるように p タグを変更します。このことから、css は HTML の要素にスタイルを追加する、つまり変更してドレスアップできることがわかります。

では、CSS では具体的に何ができるのでしょうか?

CSS で何ができるの? ? ? ?

CSS は、わずか数行のコードで、以前は画像やスクリプトを使用する必要があった多くの効果やアニメーション効果さえも実現できます。

丸い角、画像の境界線、テキストの影とボックスの影、トランジション、アニメーションなど。

CSS はフロントエンド開発者の設計プロセスを簡素化し、より柔軟なページ レイアウトとより速いページ読み込み速度を提供します。

サイト上のすべての Web ページのスタイルは、CSS ファイル内の対応するコードを変更するだけで制御できます。

その後、サイト全体のすべてのページがそれに応じて変更されます。 CSS は、携帯電話、PDA、プリンタ、テレビ、ゲーム機など、さまざまなデバイスをサポートできます。

目的: パフォーマンスを構造から分離します。

例:

コード

リーリー

これは完全に CSS によって実現され、ページを美しくします。

これをクリックしてください:

アニメーション用CSS

それでは、上に書いたことで、その力について興味が湧きました。次に、その言語を調べてみましょう。

CSS 構文構造?

CSS 構文は、セレクター、属性、値の 3 つの部分で構成されます

属性は、設定するスタイル属性です。

各属性には値があります。プロパティと値はコロンで区切られます。

リーリー

p はセレクター、属性は font-size、値は 15px です。

リーリー

これも同じように理解できますが、構造は非常にシンプルで、この3つの部分だけです。

CSS をすべて理解したところで、これらの CSS をどのように実装しますか?次に、ページへの引用について話しましょう。

CSSを導入するには?

3つの導入方法: 1. インライン引用 インライン引用とは、CSS スタイルのエンコーディングを HTML タグの style 属性に直接記述することを指します。

この方法で CSS を導入する場合、セレクターを記述する必要がないことに注意してください。

リーリー

2. ページ上の引用

ページ内参照はページの別の部分であり、 によって 内に配置されます。

リーリー

3.外部スタイルシート

外部スタイルシートは、CSS スタイルコードを外部ファイルに個別に配置し、Web ページによって呼び出すための最良の形式です。

リーリー

这些就是它的引用方式，只要引用进来才能作用到HTML结构上。

既然有这几种引用方式，那么是不是随意引用的呢？如果这样那么就是乱套了，因为css也叫层叠样式表，既然

随便引用那么不是和它的理念冲突了吗？所以这些引用还是规则的，就是优先级；

优先级依次是：就近原则

行内引用 > 页内引用 > 页外引用

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="style.css"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:#ff7600;"</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

它会优先执行行内样式，所以在外部样式中含有相同样式时，它是给忽略掉的。

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:#ff7600;"</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

从规则中知道这个也一样，内部样式也是被忽略的。

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="style.css"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

根据规则，内部样式优先。

既然样式都会写，那么自己写了很多很多样式代码，然后想找出某处的样式怎么办？一个一个样式看一遍，这个岂不是很耗时，很费神，

既然自己都这样了，那这个代码到了队友那不就是个坑。所以我们是不是可以注释一下他呢，让代码可读性更加强。

CSS注释

<span style="color: #000000;">/*这是头部*/
header{
    color:#fff;
}
/*这是导航*/
nav{}
/*这是主体*/
.container{}

/*这是尾部*/
footer{}</span>

这样是不是可读更强呢。

在HTML中结构可以很复杂，那么我们不可能简单的写个元素选择符吧。

而各种各样方便的选择符，从HTML结构树应运而生。

 选择符

1、通配选择符*

这个是选中全部元素，为他们设置样式。

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    *</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 15px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>标题<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我的段落的兄弟<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

它们的字体都被设置为15像素。

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    *</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-size</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 15px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        font-weight</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> bold</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>标题<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我的段落的兄弟<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是段落<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

它们都被加粗了。

2、元素选择符

所谓元素选择符，指以网页中已有的标签名作为名称的选择符。

<span style="color: #000000;">body {}

h1 {}

p {}</span>

3、 群组选择符

除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。

使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方，只需写一次样式。

<span style="color: #000000;">p,h1{
        font-size: 15px;
        font-weight: bold;
    }</span>

4、 关系选择符

选择所有被E元素包含的F元素。

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>css<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    p span</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #eee</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>我是谁？<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

 

今日课程知识到此！！！

css.doyoe.com  css参考手册

接下来扩展补充：

特殊性：

每个选择器都有特殊性，而如果一个元素有两个或多个冲突的属性声明，特殊性高的胜出。

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0,0,0,0. 

一个选择器的具体特殊性如下确定：

对于选择器中给定的各个ID属性值，加0,1,0,0。

对于选择器中给定的各个类属性值、属性选择或伪类，0,0,1，0。

对于选择器中给定的各个元素和伪元素，0,0,0,1。

结合符和通配选择器对特殊性没有任何贡献。

而通配选择器   0,0,0,0.

结合符连零都没有。

例子：

h1{color:red;}   为0,0,0,1 

p em{color：purple}  为0,0,0,2 

.grape{color:purple}  为0,0,1,0

p.b e.a{color:red; }   0,0,2,2

#aa{color:red;}    0,1,0,0

div#aa *[href]{color:red;}  0,1,1,1

而第一个0是为行内样式准备的，因为越前面，代表优先级越高，假如非零数字位置一样，那么先比较前面的数字的大小，

然后再往下比较，直到数字不相对，取数字大那个的优先级高。

重要声明 !important   ,就是把你所需要的声明标出来，它的优先级最高，不过它要放在声明的值的最后。 

继承：

继承的特殊性连零都没有，就是没有特殊性；

这个0特殊性有零与无特殊性有很大的区别，就是0特殊性的选择器可以为后代加样式，

而继承虽然也有给后代加样式，但有限制的，只有有继承能力的才能加到后代元素中，如color等，而margin、padding和border这些属性都不会加到后代里。

相同权重的，按顺序比较，顺序越下他的优先级最高。

较高特殊性强于较低特殊性

所以伪类声明顺序：link-visited-hover-active

LVHA（简写）

当:visited在他们之后时，由于权重一样，所以会看他们的顺序，而:visited在他们之后会胜出。

当不是写统一属性就不会出现这种问题。所以写同一种属性时要注意 ！！！！