interface Web
tutoriel CSS
Unit02 : aperçu CSS, syntaxe CSS, sélecteurs CSS, déclarations CSS
Unit02 : aperçu CSS, syntaxe CSS, sélecteurs CSS, déclarations CSS
Unit02 : présentation CSS, syntaxe CSS, sélecteurs CSS, déclaration CSS
my.css
p {
color: yellow;
}demo1.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><!-- 2.内部样式:在head元素内部的style标签内
写样式,这种样式可以在当前网页上复用. --><style>
/*CSS的注释是这样的*/
h2 {
color: blue;
}</style><!-- 3.外部样式:在单独的css文件中写样式,
需要通过link标签将其引入到网页上才有效.
这种样式可以在任意的网页上复用. --><link rel="stylesheet" href="my.css"/></head><body>
<!-- 1.内联样式:在元素的style属性里写样式,
这种样式只对这一个元素有效,无法复用. -->
<h1 style="color:red;">CSS是层叠样式表</h1>
<h2>CSS有3种使用方式</h2>
<p>1.内联样式</p>
<p>2.内部样式</p>
<p>3.外部样式</p></body></html>demo2.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
/*1.继承性:在父元素上写的样式,可以被子元素
继承,注意只有字体、颜色可以继承。*/
body {
font-family:
"微软雅黑","文泉驿正黑","黑体";
}
/*2.层叠性:先后给一个元素设置不同的样式,
其效果会叠加在一起. */
h1 {
color: red;
font-size: 50px;
}
/*3.优先级:先后给一个元素设置相同的样式,
其效果是以后者为准,也叫就近原则.*/
h2 {
color: blue;
}
/*...*/
h2 {
color: green;
}</style></head><body>
<h1>苍老师</h1>
<h2>范传奇</h2></body></html>demo3.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
/*1.元素选择器:略*/
/*2.类选择器:选择一类(class="某值")
具有共性的元素*/
.girl {
color: pink;
}
/*3.id选择器:根据id选择唯一的元素*/
#p4 {
color: red;
}
/*4.选择器组:写出一组选择器,会选中每个
选择器所对应的目标的并集(合计).*/
.girl,#p4 {
/*字体加粗*/
font-weight: bold;
}
/*5.派生选择器:
选择某元素满足条件的后代 */
/*5.1选择子孙*/
#p5 b {
color: red;
}
/*5.2选择儿子*/
#p5>b {
font-size: 30px;
}
/*6.伪类选择器:根据元素的状态选择元素*/
/*6.1选择未访问过的超链接*/
a:link {
color: green;
}
/*6.2选择已访问过的超链接*/
a:visited {
color: red;
}
/*6.3选择激活态(正在点)的按钮*/
#b1:active {
background-color: green;
}
/*6.4选择有焦点(光标闪烁)的文本框*/
#t1:focus {
background-color: yellow;
}
/*6.5选择悬停态的图片*/
img:hover {
width: 250px;
height: 250px;
}</style></head><body>
<p class="girl">苍老师呀苍老师</p>
<p>范传奇呀范传奇</p>
<p class="girl">王克晶呀王克晶</p>
<p id="p4">瞧你们那点破事</p>
<p id="p5">北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎大厦</b>B座8层</p>
<p>
<a href="http://www.tmooc.cn">达内</a>
<a href="http://www.sb.com">随便</a>
</p>
<p><input type="button" value="按钮1" id="b1"/></p>
<p><input type="text" id="t1"/></p>
<p>
<img src="../images/01.jpg"/>
<img src="../images/02.jpg"/>
<img src="../images/03.jpg"/>
</p></body></html>demo4.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
/*1.单个边设置边框(left/right/top/bottom)*/
h1 {
border-left: 10px solid blue;
}
/*2.四个边设置相同的边框*/
p {
border: 1px dashed red;
}</style></head><body>
<h1>苍老师</h1>
<p>
刘苍松,系达内Java教学总监.
是Java教学改革的先驱.
同时他也是一名摄影爱好者,
他拍的片都很么么哒!
他最擅长捕捉肉体和灵魂的契合点,
能够折射出对人性的思考与鞭挞! </p></body></html>demo1.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
p {
border: 1px solid red;
width: 100px;
height: 100px;
}
/*1.四个边一起设置相同的边距*/
#d1 {
padding: 20px;
margin: 30px;
}
/*2.四个边一起设置不同的边距(上右下左)*/
#d2 {
padding: 10px 20px 30px 40px;
margin: 40px 30px 20px 10px;
}
/*3.单个边设置边距(left/right/top/bottom)*/
#d3 {
padding-left: 30px;
margin-bottom: 20px;
}
/*4.对边设置边距(上下 左右)*/
#d4 {
padding: 20px 30px;
margin: 20px 30px;
}
/*5.外边距的特殊用法:
当采用对边设置外边距的时候,若
第二个值为auto,则该元素水平居中. */
#d5 {
margin: 50px auto;
}</style></head><body>
<p id="d0">d0</p>
<p id="d1">d1</p>
<p id="d2">d2</p>
<p id="d3">d3</p>
<p id="d4">d4</p>
<p id="d5">d5</p></body></html>demo2.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
/*1.设置背景图*/
body {
background-image:
url(../images/background.png);
background-repeat: repeat-y;
background-position: center;
}
p {
border: 1px solid red;
width: 125px;
height: 125px;
margin: 10px auto;
}
/*2.采用简化的方式设置背景(色和图)
background:颜色 图片 平铺 位置;
上述4个值可以酌情省略,但至少要保留
颜色或图片之一 */
.enemy {
background:
url(../images/airplane.png)
no-repeat center;
}
.hero {
background:
url(../images/hero0.png)
no-repeat center;
}
/*3.固定背景图*/
body {
background-attachment: fixed;
}</style></head><body>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="enemy"></p>
<p class="hero"></p>
<p class="hero"></p></body></html>demo3.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
h1,p {
border: 1px solid red;
width: 300px;
}
h1 {
text-align: center;
text-decoration: underline;
}
p {
text-indent: 2em;
line-height: 2em;
}
h1 {
height: 100px;
/*当行高=元素的高时,文字垂直居中*/
line-height: 100px;
}</style></head><body>
<h1>范传奇</h1>
<p>
华灯轻抚蚕丝被,
锦墙呢喃诉床帏.
情郎翘首索芳心,
佳人回眸送秋水.
丹心不畏相思苦,
浓情何惧岁月催.
万水千山终有路,
几度良宵几轮回. </p></body></html>demo1.html Démonstration de positionnement flottant
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
.d0,p {
width: 400px;
border: 1px solid red;
}
.d1,.d2,.d3 {
width: 100px;
height: 100px;
margin: 10px;
}
.d1 {
background-color: red;
}
.d2 {
background-color: green;
}
.d3 {
background-color: blue;
}
/*浮动*/
.d1,.d2,.d3 {
float: left;
}
/*消除浮动影响*/
p {
/*clear: left;*/
}
.d4 {
clear: left;
}</style></head><body>
<p class="d0">
<p class="d1"></p>
<p class="d2"></p>
<p class="d3"></p>
<!-- 仅仅是用来消除浮动影响的 -->
<p class="d4"></p>
</p>
<p>浮动时看看我的位置</p></body></html>demo2.html Étui mural photo, démonstration Positionnement flottant
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
body {
background-color: #066;
}
ul {
width: 780px;
margin: 20px auto;
/*border: 1px solid red;*/
/*去掉列表左侧的符号*/
list-style-type: none;
/*将列表自带的内边距去掉*/
padding: 0;
}
li {
border: 1px solid #ccc;
width: 218px;
padding: 10px;
margin: 10px;
/*为了保证诗的顺序必须左浮动*/
float: left;
background-color: #FFF;
}
p {
text-align: center;
}
/*鼠标悬停时,让li偏移2px的位置,
从而实现一个抖动的特效. */
li:hover {
position: relative;
left: 2px;
top: -2px;
}</style></head><body>
<ul>
<li>
<img src="../images/01.jpg"/>
<p>啊,Teacher苍!</p>
</li>
<li>
<img src="../images/02.jpg"/>
<p>你在何方?</p>
</li>
<li>
<img src="../images/03.jpg"/>
<p>难道是去了东洋?</p>
</li>
<li>
<img src="../images/04.jpg"/>
<p>那边的痴汉很多很多,</p>
</li>
<li>
<img src="../images/05.jpg"/>
<p>你一定要穿好衣裳,</p>
</li>
<li>
<img src="../images/06.jpg"/>
<p>别走光!</p>
</li>
</ul></body></html>demo3.html Démo positionnement absolu
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
p {
border: 1px solid red;
width: 318px;
/*只声明定位,不设置偏移量,
其位置不动,不受任何影响.
这样做仅仅是为了将该元素
作为绝对定位的目标而已.*/
position: relative;
}
p {
position: absolute;
bottom: 50px;
width: 318px;
background-color: #FFF;
text-align: center;
}
p {
height: 318px;
}</style></head><body>
<p>
<img src="../images/3.jpg"/>
<p>苍老师到此一游</p>
</p></body></html>demo4.html Démontrer le positionnement fixe (retour en haut)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
p {
border: 1px solid #ccc;
width: 40px;
line-height: 30px;
position: fixed;
right: 10px;
bottom: 30px;
text-align: center;
}</style></head><body>
<h1>iPhone7 Plus</h1>
<p>这是一个新款手机</p>
<p>它可以防火</p>
<p>它可以防盗</p>
<p>它可以防闺蜜</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>
<a href="#">顶部</a>
</p></body></html>go_to_top.html
demo1.html Définissez la sélection d'images sur flottant
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
p {
width: 800px;
height: 500px;
margin: 20px auto;
background-color: #066;
position: relative;
}
img {
position: absolute;
}
.i1 {
left: 150px;
top: 100px;
}
.i2 {
left: 200px;
top: 150px;
}
.i3 {
left: 250px;
top: 50px;
}
img:hover {
z-index: 999;
}</style></head><body>
<p>
<img src="../images/1.jpg" class="i1"/>
<img src="../images/2.jpg" class="i2"/>
<img src="../images/3.jpg" class="i3"/>
</p></body></html>demo2.html Définissez le style de séquence de liste
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
ol {
list-style-type: upper-roman;
}
ul {
list-style-type: square;
}
.south {
list-style-image:
url(../images/add.png);
}</style></head><body>
<ol>
<li>河北省</li>
<li>黑龙江</li>
<li>山东省</li>
</ol>
<ul>
<li>北京</li>
<li class="south">上海</li>
<li class="south">广州</li>
<li class="south">深圳</li>
<li class="south">杭州</li>
</ul></body></html>demo3.html
Convertir les éléments en ligne en éléments de bloc
Convertir les éléments de bloc en éléments en ligne
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
p {
display: inline;
}
span {
display: block;
}
img {
display: block;
}
p {
display: none;
}</style></head><body>
<p>
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
</p>
<p>
<span>111</span>
<span>222</span>
<span>333</span>
</p>
<p>
<img src="../images/01.jpg"/>
<img src="../images/02.jpg"/>
<img src="../images/03.jpg"/>
</p></body></html>Pour plus d'articles sur Unit02 : présentation CSS, syntaxe CSS, sélecteur CSS, déclaration CSS, veuillez faire attention au site Web PHP chinois !
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
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)
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment vérifier la date de bootstrap
Apr 07, 2025 pm 03:06 PM
Pour vérifier les dates dans Bootstrap, suivez ces étapes: introduisez les scripts et styles requis; initialiser le composant de sélecteur de date; Définissez l'attribut Data-BV-Date pour activer la vérification; Configurer les règles de vérification (telles que les formats de date, les messages d'erreur, etc.); Intégrez le cadre de vérification de bootstrap et vérifiez automatiquement l'entrée de date lorsque le formulaire est soumis.
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
