Heim Web-Frontend HTML-Tutorial Html/Css(新手入门第一篇)

Html/Css(新手入门第一篇)

Jul 06, 2016 pm 01:28 PM

一、理解web标准含义--为什么采用web标准
*****将内容与样式分离
1、web标准是一系列标准,就是一系列技术标准
在使用时,是组合应用
【1】、结构化内容 html
【2】、表现化内容 css
【3】、行为化内容 JavaScript
2、网页开发的小工具--火狐浏览器中的firebug
工具--附加组件--搜索firebug
作为web前端工作,要兼容的浏览器ie,火狐浏览器,谷歌刘浏览器,苹果浏览器等。
网页是否有css样式,测试--在浏览器改变文字大小。
3、css定义技巧:
【1】、为了将来的css代码优化,建议所有的属性值后面都要带上“;”
【2】、某些html标签有自己默认的css属性值,
例如h1标签就有自己的属性值,自动就是加粗显示,字号比较大。
【3】、为了兼容主流浏览器,为统一,建议我们在设置时,将所有元素的css属性重置为标准的。
【4】、不同的浏览器,有各自不容的css属性值--要命的就是浏览器的兼容。
【5】、有一个比较特殊的字体想用怎么办?--将其转化为图片。(css3中可以通过@font-face

自定义字体)
分中英文字体。设置字体的顺序,将英文字体设置在前,中文在后。
【6】、css编辑工具--用什么都行,高手,用树叶杀人。
【7】、想让文字在垂直方向上居中,将行高设置为元素的高度,行高=元素高度
【8】、css可以重新设置,html标签的默认样式。
4、css应用给网页的方式:就相当于给人怎么去穿上衣服。
【1】、行内样式:应用于一个。
【2】、嵌入样式:应用于一类标签。
【3】、如果我们有很多的网页,都要用css,将这些css写到一个独立文件中,这个就是外链式(推荐使用)。
【4】、导入式样式:也是将样式写到一个文件中,再倒入到网页中。
*****说明,导入式,其实与内嵌式是相类似的,都是将样式加入到网页里。
1、导入式会占用html文件空间
2、有些浏览器解析会有问题。浏览器会最后读取@import中的内容
3、将多个样式文件,导入到一个样式文件中。

二、css的特性
css叫层叠样式表。
1、继承:子元素会继承父元素的某些样式。
【因为有些子元素本身就有默认值,所以他就不用父元素】
2、叠层:子元素如果定义了与父元素相同的样式,会覆盖掉父元素的样式。
*****后面的样式会覆盖前面的样式

三、css样式的优先权:当样式有冲突时,听谁?(可以用!important提高其优先权)
css优先权:就近原则
作用范围越小,优先权越高。
离要修饰目标越近的样式优先权越高。

爷爷--红
爸爸--绿
孩子--蓝
选择优先权
行内>id>class>标签选择符
特殊情况,我们可以提升某个属性的权限
*****IEtest工具,也有一个兼容性问题,在win7下打不开ie6.--下载绿色版ie6。不用安装直接用哪种版本。

四、常用的一些文字,文本控制的css样式
*****我们在应用css样式时,一定要注意它的默认值。因为不同的浏览器它的css默认值是不同的(不同的属性浏览
器支持是不一样的,我们还要保证我们网页的兼容性,尽量使用通过的属性,不用存在兼容性差别的属性。)

五、css控制元素的某种状态--伪类
伪类语法:
元素名称:伪类名称{属性:值}
例如:超链接的鼠标经过状态
a:hover{text-decoration:underline;}
*****如果,鼠标放上效果不起作用,请修改连接状态的顺序 L-V-H-A

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

See all articles