第 12 章 CSS 入门 - 水之原
May 20, 2016 pm 04:50 PM学习要点:
1.使用 CSS
2.三种方式
3.层叠和继承
主讲教师:李炎恢
本章主要探讨 HTML5 中 CSS(层叠样式表),它是用来对 HTML 文档外观的表现形式进行排版和格式化。
一.使用 CSS
CSS 样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS 属性和属性值。
<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:red;font-size:50px;"</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 是颜色属性,red 是颜色属性值;font-size是字体大小属性,50px 是字体大小属性值。
二.三种方式
创建 CSS 样式表有三种方式:1.元素内嵌样式;2.文档内嵌样式;3.外部引入样式。
1.元素内嵌样式
<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:red;font-size:50px;"</span><span style="color: #0000ff;">></span>这是一段文本<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>
解释:即在当前元素使用 style 属性的声明方式。
2.文档内嵌样式
<span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;"> <br>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;"> blue</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;"> 40px</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 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></span>
解释:在
元素之间创建(4).元素内嵌样式(使用 style 属性设置)。
//元素内嵌
<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:red;font-size:30px;"</span><span style="color: #0000ff;">></span>我将被三种方式叠加样式<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>
//文档内嵌
<span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">><br></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;">blue</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>
//外部引入
<span style="color: #800000;">@charset "utf-8"; p </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> green</span>;<span style="color: #ff0000;"> font-style</span>:<span style="color: #0000ff;"> italic</span>; }
如果某一个样式被优先级高的给替换掉了,却又想执行这个样式方案,可以将这个方案标记成重要样式(important)。
//强行设置最高优先级
<span style="color: #800000;">color: green !important;</span>
3.样式继承
如果某一个元素并没有设置父元素相关的样式,那么就会使用继承机制将父元素的样式集成下来。
//元素继承了
元素的样式
<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color:red;"</span><span style="color: #0000ff;">></span>这是<span style="color: #0000ff;"><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>HTML5<span style="color: #0000ff;"></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span>
样式继承只适用于元素的外观(文字、颜色、字体等),而元素在页面上的布局样式则不会被继承。如果继承这种样式,就必须使用强制继承:inherit。
//强制继承布局样式
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是<span style="color: #0000ff;"><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>HTML5<span style="color: #0000ff;"></span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">><br></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;"> border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid red</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> b </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> border </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> inherit</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></span></span>

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

Quel est le but du & lt; mètre & gt; élément?

Quel est le but du & lt; datalist & gt; élément?

Quel est le but du & lt; Progress & gt; élément?

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
