Heim > Artikel > Web-Frontend > Zusammenfassung einiger Wissenspunkte zu HTML und CSS
Zusammenfassung einiger Wissenspunkte zu HTML und CSS
- 零下一度Original
- 2017-06-25 09:39:551304Durchsuche
Eine vollständige Seite besteht aus drei Teilen:
html: Hypertext Markup Language
Erstellen Sie die Seite mithilfe semantischer Tags „Struktur“
CSS: Cascading Style Sheet
ist für den „Stil“ der Seite und die Verschönerung der Seite verantwortlich
js: leichte Skriptsprache; Interaktion bezieht sich auf zwei Orte (Verhalten)
das Frontend selbst „Animation“ auf der Seite geschrieben
Die „Dateninteraktion“ von Front und Backend
Die Kombination aus Struktur, Stil und Verhalten
So führen Sie CSS ein
-
Eingebettet; (eingebettet)
<style> body{ height:100%; background-color: red; } </style> -
Inline-Stil
<body style="height:100%; background: #333333">
-
Typ des externen Links (echte Entwicklung, alle externen Links werden verwendet)
<link rel="stylesheet" href="style.css?1.1.11"/>
CSS-Priorität
Inline>eingebetteter>externer Link
Gemeinsame CSS-Attribute und -Stile
Bei falscher Einstellung wird manchmal in der Chrome-Konsole ein gelbes Ausrufezeichen, Aufforderung
Farbe: Farbwert; es gibt drei Möglichkeiten, Farbe auszudrücken
Tastenkombination: C+TabAuf Englisch: rot
rgb(255,0,0)
#fffSchriftgröße: Schriftgröße
Tastenkombination: fsz30-> Schriftgröße:30px
font:400 14px/28px "宋体";-
Hintergrund: Hintergrund hinzufügen
Das Bild wiederholt sich standardmäßig horizontal und vertikal Position:
Horizontale Position: links Mitte rechts
Vertikale Position: oben Mitte unten
Umfassendes Schreiben:
background: url("images/bg2.png") no-repeat left center red;-
background-image:url("image address")
Hintergrundwiederholung:no-repeat; /repeat-x;/repeat-y
Hintergrundposition:0 0
Hintergrundfarbe :rot
Ob die Schriftart schräg ist
Schriftstil: kursiv schräg ／ normal Normal
Unterstrichen und durchgestrichen
Textdekoration: durchgestrichen; durchgestrichen
Textdekoration : keine; Unterstreichung entfernen
Textdekoration: Unterstreichung hinzufügen
Auswahl im CSS-Gerät:
1. Etikettenauswahl: div p ul li dt dd em i u del strong b Eingabeetikett aus Tabelle
Nachteile: Es können nur allgemeine Vorgänge ausgeführt werden, und einzelne Operationen können nicht ausgeführt werden
2. Klassenauswahl
3.id:
.class名, die gleiche Seite kann unzählige gleiche Klassennamen haben#id名, die gleiche Seite kann nur einen ID-Namen haben (ID-Namen können nicht wiederholt werden);-
Im realen Entwicklungsprozess wird die Klasse zum Festlegen von Stilen und die ID zum Abrufen von Elementen verwendet
<div class="div1 div2 div3" id="div1"></div>
4. Nachkommenselektor: div p (wählen Sie alle p Elemente von Nachkommen unter dem div-Container aus)
5. Untergeordneter Selektor: div > (wählen Sie den Sohn unter dem div-Container aus); kompatibel mit IE7+
6. Schnittpunktselektor: div.div1
7. Union-Selektor: div, p
8. Platzhalter *: Stellt alle Elemente dar
9. Bestellauswahl: Kompatibel mit IE8+ >
- 10 Brother Selector ul li+li{} ist kompatibel mit IE7+
- Entwickeln Sie häufig verwendete Browser
- IE7~11
- Firefox
- CSS-Vererbung und Kaskadierung
- Attribute beginnend mit Schriftart kann vererbt werden; Zeilenhöhe
- Farbe kann vererbt werden
- Text kann ebenfalls vererbt werden, z. B. Textausrichtung
- CSS-Gewicht
- !wichtiges Gewicht ist unendlich (weniger gut verwenden)
- Das Gewicht von id ist größer als das Gewicht der Klasse
- CSS-Box-Modell
- Das CSS-Box-Modell besteht aus 5 Teilen:
Einzeiliger Text Zentrierung: Höhe = Zeilenhöhe
- Zentrierung von mehrzeiligem Text, Abstand und Zeilenhöhe
-
padding是内边距
padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色
-
padding是复合值
padding:30px; ->pl30; pt30;pr30;pb30
padding:20px 30px; ->上下为20px 左右30px
padding:10px 20px 30px; -> 上10px 左右20px 下30px
padding:10px 20px 30px 10px; 上 右 下 左如果现设置padding:30px
再设置padding-left:10px
请问最后的值各是多少？
左10px; 其他都是30px
margin：外边框
border:
border:1px solid #000;
border-width
border-style：solid（实体）,dashed（虚线）,dotted（点）
border-color
行内元素和块级元素
p标签虽然是文本标签，但是它可以当容器来使用，p标签内一定不能放div; p段落也是块元素，他独占一行
文本元素：p span a i em u b strong img
容器级：div li dt dd h级（不建议）
除了p，所有的文本元素，都是行内元素
所有容器级别的元素，都是块元素
块和行内元素的相互转化
display：inline; //行内
display:inline-block;//行内块
display：block; //块
关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）
关于脱离文档流的方法
浮动 float:left; float:right;
绝对定位 position:absolute;
固定定位 position:fixed;
重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；
注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽
清除浮动
固定高度height:xxxpx;
缺点：如果作为产品列表的容器展示，我们无法知道容器的具体高度overflow:hidden
clear:both
缺点：可以解决浮动引起的文档流错乱问题，但是上面浮动元素的父容器该没有高度还没有高度-
伪类清除浮动
ul::after{ display: block; height:0; content: ''; clear: both; }
溢出隐藏
清除浮动
缺点：如果父容器比较小，子容器比较大；父容器如果通过overflow:hidden来清除浮动的话，子容器就看不到了
透明度处理
rgba() 背景透明，文字不透明；
-
opacity:0 背景透明，文字也透明；
opacity:0.1;/*不兼容IE7浏览器*/ filter:alpha(opacity=10);
最基本的开发，首先必须创建的项目结构
images文件夹：放切好的图片
css文件夹：放置css文件：index.css
index.html文件
关于继承
宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)
font可以继承
color可以继承：当遇到a标签的时候， color无效；
line-height可以继承
当文本超度固定宽度的处理方法：
-
单行文本出超固定宽度出现省略号的写法：
white-space:nowrap; overflow:hidden; text-overflow:ellipsis
英文不折行的问题处理：
word-wrap:break-word;出现滚动条的写法
overflow-y:scroll;
区分伪类和伪元素
伪元素：用:和::都可以，现在建议用::
伪类：给当前选择器添加动效，只能用:
Das obige ist der detaillierte Inhalt vonZusammenfassung einiger Wissenspunkte zu HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!