18日目のレビュー
Java-day19研究ノート
19日目
One、div、spanタグ
div是html中一个普通的标签,主要用来当做容器,一般用于配合css完成网页的基本布局,
span是html中一个普通的标签,一般作为文本容器
1.1違い
div是一个块级标签,独占一行,能存放所有内容(除了html、head和body)
span是一个行级标签,内容会在一行内追加,只能嵌套像文本、图片、超链接
2、CSS
カスケードスタイルシートカスケードスタイルシート
スタッキング:レイヤーごと
スタイルシート:スタイルのコレクション
注:HTMLの学習はタグの学習であり、CSSの学習は主にスタイル(属性)、セレクターを学習します
1.1役割
1. 美化页面,修饰页面
2. 之前是html自己完成内容和样式,而现在我们可以通过css来完成样式的内容,并且可以批量的完成的样式的添加和修改
html当做毛坯房, CSS当做装修。
1.2CSSを使用する理由
之前的问题:
1. 之前用html属性完成样式的时候有很多问题,比如字体的大小只能在1和7之前选择,不能设置更大的字体,还有超链接的下换线不能去除等
2. 我们给标签设置属性之前需要先记忆标签是否有此属性,如果没有的话,写上也没有效果。
3. 有些效果需要嵌套好几层标签才能实现
而CSS可以解决如上问题
1. css不用记忆哪些属性属于哪个标签
2. 当需求变更时我们不需要修改大量的代码就可以满足需求
1.3使用方法
①フォーマット
选择器 {
属性名1 : 属性值1;
属性名2 : 属性值2;
属性名3 : 属性值3
}
注意事项:
1. 属性名和属性值之间通过英文状态的 : 连接
2. 大括号中可以放多对属性名和属性值,但是它们之间要通过分号 ; 分隔
3. 最后一个属性名和属性值的后面可以不加 ;
②cssをどこに置くか【導入方法】
HTMLは言語であり、CSSも言語です。CSSでHTMLのスタイルを変更する場合は、CSSをHTMLに導入する必要があります。つまり、CSSコードをどこに書くかという問題を解決するためです
行内样式
内部样式
外部样式
1.4はじめに
①最初のタイプ:インラインスタイル[インラインスタイル] [理解]
把CSS代码内嵌到HTML代码里,直接通过标签的style属性进行设置
<p style="color: green;">我是文字</p>
②2番目のタイプ:内部スタイル[マスター]
把CSS代码写在HTML文档内部,通过style标签来结合
1. 需要在head标签中写一个style标签
2. 在style标签中统一写css相关的样式设置
注意:
1. style标签中,可以写上type="text/css",也可以不写
2. style标签,一定要放在head标签中
<style type="text/css">
p {
color: pink;
font-size: 50px
}
</style>
③3番目のタイプ:エクステリアスタイル[マスター]
把CSS代码写在独立的CSS文件里,通过link标签结合
1. 将css样式写在一个后缀为css的文件中
2. 在html文件中引入css文件
注意:引入外部css文件,是在head标签中写一个link标签引入的
<link rel="stylesheet" href="../css/bb.css">
④3つの導入方法の優先順位
就近原则,也就是距离要修饰的标签最近的引入方式产生效果
1.5セレクター
セレクター:スタイル変更用のHTML要素(タグ)を選択するために使用されます
①ベーシックセレクター
セレクタ | 説明 | 文法 | 例 |
---|---|---|---|
ラベルセレクター | HTMLタグ名に基づいてタグを選択します | 标签名称{} |
div{ color:red; } |
IDセレクター | id属性値に基づいてラベルを選択します | #id值{} |
#d1 { color:blue; } |
クラスセレクター | クラス属性値(クラス名)に応じてラベルを選択します | .类名{} |
.c1 { color:yellow; } |
ユニバーサルセレクター | すべてのタグを選択 | *{} |
*{ color: pink;} |
②セレクター優先
ID选择器 > 类选择器 > 标签选择器 > 通用选择器
注意:如果优先级相同,那么就满足就近原则
③拡張セレクター
複数の基本的なセレクターの組み合わせにより、ラベルをより柔軟に選択できます
セレクタ | 説明 | 文法 | 例 |
---|---|---|---|
レベルセレクター | HTMLタグ名に基づいてタグを選択します | 祖先 后代 |
div a{ } |
属性セレクター | 指定された属性の値に基づいて要素をフィルタリングします | [属性='值'] |
input[type='text'] { } |
ユニオンセレクター | 複数のセレクターの結果を組み合わせる | 选择器1,选择器2,... |
.c1, span { } |
④疑似クラスセレクター[理解]
セレクタ | 説明 | 例 |
---|---|---|
:link |
通常のハイパーリンクを選択します | a:link{} |
:visited |
訪問したハイパーリンクを選択します | a:visited{} |
:hover |
マウスオーバー時にハイパーリンクを選択します | a:hover{} |
:active |
マウスで押されたハイパーリンクを選択します | a:active{} |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-伪类选择器</title>
<style>
/*超链接默认的颜色*/
a:link{
color: blueviolet;
}
/*超链接被访问之后的颜色*/
a:visited{
color: mediumvioletred;
}
/*鼠标悬浮在超链接上方显示的颜色*/
a:hover{
color: green;
}
/*鼠标点击不松开的颜色*/
a:active{
color: pink;
}
/*注意:一定要确保顺序为lvha*/
</style>
</head>
<body>
<a href="https://www.baidu.com">百度一下,你就知道</a>
</body>
</html>
1.6共通属性
CSSは、HTMLタグを変更するための多数のスタイル(属性)を提供します。背景属性、テキストスタイル、フォント属性を理解する必要があります。
①背景属性
特徴 | 属性名 | 属性値 |
---|---|---|
背景色 | background-color |
1.次のような色定数:赤 2.次のような16進数を使用します:#ABC 3.赤、緑、青(赤、緑、青)にはrgbを使用します |
背景画像 | background-image |
url(图片的路径) |
タイリング | background-repeat |
repeat デフォルト。背景画像は垂直方向と水平方向repeat-x に繰り返されます背景画像は水平方向に繰り返されます。repeat-y 背景画像が縦方向に繰り返されます。no-repeat 背景画像は1回だけ表示されます。 |
②テキストスタイル
特徴 | 属性名 | 属性値 |
---|---|---|
色 | color |
色 |
行の高さを設定する | line-height |
ピクセル |
テキストの変更 | text-decoration |
underline 下線overline がine-through 三振と交差しているnone 線がない |
テキストのインデント | text-indent |
テキストをインデントするには、em単位を使用できます。 |
テキストの配置 | text-align |
left テキストを左側に配置します。right テキストを右に配置します。center テキストを中央に配置します。デフォルト値:ブラウザによって決定されます。 |
③フォント属性
特徴 | 属性名 | 効果 |
---|---|---|
フォント名 | font-family |
フォントを設定します。マシンにはこのフォントが必要です |
サイズを設定する | font-size |
ピクセル |
スタイルを設定する | font-style |
italic イタリックnormal デフォルト値。ブラウザは標準のフォントスタイルを表示します。 |
厚みを設定する | font-weight |
bold 大胆な |