css个人总结

Sep 12, 2016 pm 05:27 PM

1.什么是css,指的是叠层样式表,控制网页的的外观显示。

2.引入css的三种方式,外部链接,内部链接,内联,分别的语法是,,,style="属性:值"

3.css选择器,选择器就是要针对你要所改变的元素,而单独定义的样式,就常见的选择器:ID,CLASS,元素选择器,子元素选择器,群组选择器,相邻选择器,id选择器是唯一的意思是,只能定义一个id名相同的,class选择器,类选择器,可以为多个元素定义,id选择器和class选择器的区别在于,id是唯一的就像每个人的身份证一样只有一份号码是唯一的,而class就是像每个人的名字一样可以重复,元素选择器就是选泽要改变的元素标签名字,子选择器就是在当前元素后的子元素,群组合选择器就是选泽所有想改变的元素,相邻选择器就在当前同级元素的下一个元素。

语法:

这是一个段落

 相应的  css规则: #id{ 属性:值}

       

相应的css规则:.class{ 属性:值}

       

这是一个段落

相应的css规则:p{属性:值}

       

这是一个段落奥

相应的css规则:div p{属性:值}

      

这是一个段落奥

相应的css规则:div,p{属性:值}

   

这是一个段落奥

相应的css规则:div+div{属性:值}

 

 

这是一个段落奥

 

4.字体样式

字体的类型:font-family:  '';取值宋体,微软雅黑等、

字体的大小:font-size:;通常以像素值px,其他的还有em ,百分比

字体的粗细:font-weight:;取值bold粗体显示,normal正常

字体的样式:font-style:;italic斜体,normal正常

颜色;color;

行高:line-height:;字体的行高,一行的高度不是距离。

5.文本样式

文本装饰:text-decoration:;取值有,line-through(贯穿线),underline(下划线),overline(上划线)

文本对齐:text-align:;取值有,center(居中),left(左对齐),right(右对齐)

文本缩进:text-ident:;取值单位px.em,百分比

文本大小写:text-transform:;取值有 uppercase(大写) lowercase(小写) capitalize(首指母大写)

文本的字间距:letter-sapcing:;取值单位px ,em ,百分比

词间距:word-sapcing:;取值单位px ,em ,百分比

6.边框

border边框 边框的大小 类型 颜色 分别的设置

border-width:; 取值是单位px   em  百分比

border-style:; 取值是solid 实线  dashed虚线 等

border-color:;取值颜色 ,可以是十六进制。

7.背景 

背景图片,背景是否被重复 ,背景的位置,背景是否滚动  分别是

background:URL; 

background-repeat:;取值有,repeat(重复) no-repeat(不重复) repeat-x(x轴重复) repeat-y(y轴重复)

background-position:;取值可以是   center left right top

background-scroll:;  取值是scroll   fixed

 

可以简写;background: URL  repeat   position  scroll;

 

 

8.超链接样式

当我们鼠标移动到a标签上面,可以让他显示的样式,通过伪类来设置,不一定是a元素才有可以设置,在html中 任何元素可以都已设置伪类。语法:元素:hover

当鼠标未访问的样式a:link;,当鼠标访问后的样式a:visited;当鼠标移动到的样式a:hover;当鼠标按下时的样式a:active;

9图片

图片大小:可以通过设置它的宽度 高度来设置。

图片位置:通过text-align(水平居中),vertical-aligin(垂直居中)

图片边框:通过border来设置它的边框

10列表

列表的样式:list-style-type:;取值none,circle,等

列表图片:list-style-image:;

11表格

表格默认是没有边框的,我要通过border给它值

12,盒子模型

盒子模型分为:内容区,内边距,外边距,边框

13布局

浮动布局:通过float浮动块元素,注意清除浮动。

定位布局:position来设置。然后设置。上右下左的值。

固定定位:position:fixed/scroll

静态定位:position:static

 

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

See all articles