Unit02: CSS の概要、CSS 構文、CSS セレクター、CSS 宣言
css
Unit02: CSSの概要、CSS構文、CSSセレクター、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>ログイン後にコピー
デモ3.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>ログイン後にコピー
<!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>ログイン後にコピー
<!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 フォト ウォール ケース、フローティング ポジショニングのデモ
<!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 絶対ポジショニングのデモ
Rrieeeedemo4.html 固定ポジショニングのデモ (トップに戻る)
<!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>ログイン後にコピー
go_to_top.html
demo1.html 画像選択をfloatに設定します
<!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>ログイン後にコピー
demo2.html リストシーケンススタイルを設定します
rrreデモ3 .html
インライン要素はブロック要素に変換されます
ブロック要素はインライン要素に変換されます
<!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>ログイン後にコピー
詳細については Unit02: CSS の概要、CSS 構文、CSS セレクター、CSS 宣言については、PHP 中国語に注意してください。関連記事のウェブサイトです！
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前
By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前
By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前
By DDD
R.E.P.O.で節約説明した（そしてファイルを保存）
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法
4週間前
By DDD
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7569
15
7569
15
CakePHP チュートリアル
1386
52
1386
52
Steamのアカウント名の形式は何ですか
87
11
87
11
NYTの接続はヒントと回答です
28
107
28
107
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
