HTMLとCSSに関する知識ポイントのまとめ-htmlチュートリアル-php.cn

HTMLとCSSに関する知識ポイントのまとめ

零下一度

リリース： 2017-06-25 09:39:55

オリジナル

1308 人が閲覧しました

完全なページは 3 つの部分で構成されます:

html: ハイパーテキストマークアップ言語

セマンティックタグを通じてページの「構造」を構築します

css: カスケードスタイルシート

ページ用「スタイル」とページの美化

js: 軽量スクリプト言語。インタラクションは 2 つの場所 (動作) を指します

ページ上のフロントエンドによって書かれた「アニメーション」
"フロントエンドとバックエンドの「データインタラクション」
構造、スタイル、動作の組み合わせ

cssの導入方法

Embedded;(埋め込み)

<style>
    body{
        height:100%;
        background-color: red;
    }
</style>

ログイン後にコピー

インラインスタイル
```
<body style="height:100%; background: #333333">
```
ログイン後にコピー
外部リンク(実際の開発) 、すべての外部リンクが使用されます)
```
<link rel="stylesheet" href="style.css?1.1.11"/>
```
ログイン後にコピー

cssの優先順位

インライン>埋め込み>外部リンク

cssの共通属性とスタイル

設定が間違っている場合、黄色の感嘆符が表示されますChrome コンソールでプロンプトを表示するには
color: カラー値; 色を表現するには 3 つの方法があります
ショートカットキー: c+tab

英語: red
rgb(255,0 ,0)
#fff#fff

快捷键：fsz30->font-size:30px
font:400 14px/28px "宋体";

background:添加背景
图片默认是横向重复和纵向重复
位置：

横向位置：left center right
纵向位置：top center bottom

综合写法：background: url("images/bg2.png") no-repeat left center red;

background-image:url("图片地址")
background-repeat:no-repeat; /repeat-x;/repeat-y
background-position:0 0
background-color:red

字体是否倾斜

font-style:italic 倾斜／ normal 正常

下划线和删除线
text-decoration: line-through; 删除线
text-decoration: none; 去除下划线
text-decoration: underline;添加下划线

css中的选择器：

1.标签选择器：div p ul li dt dd em i u del strong b input label from table

缺点：只能进行共性的操作，无法个性操作

2.class选择器
3.id：

.class名,同一个页面能有无数个相同的class名
#id名
font-size: フォントサイズ

ショートカットキー: fsz30->font-size:30px
font: 400 14px/28px "宋体";
画像はデフォルトで水平方向と垂直方向に繰り返します
位置:

background: url("images/bg2.png") no-repeat left center red;

フォントが傾いているかどうか

font-style:italic 傾き/normal Normal

下線と取り消し線
text -decoration: line-through を削除
text-decoration: none; 下線を削除

text-decoration: 下線を追加します。 CSS に

タグセレクター: div p ul li dt dd em i u del Strong b 入力ラベルfrom table
デメリット: 共通の操作のみ実行可能で、個別の操作は実行できない

.class name

#id name、同じページには ID 名のみが存在します (ID 名は重複できません)。

<div class="div1 div2 div3" id="div1"></div>

ログイン後にコピー

4. 子孫セレクター: div p (div コンテナーの下にあるすべての p 要素、子孫、孫を選択します)
🎜🎜5. 子セレクター: div > p (div コンテナーの下の子を選択); 交差セレクター: div.div1🎜🎜🎜7。 🎜🎜8. ワイルドカード *: すべての要素を表します🎜🎜🎜 9. 順序セレクター: IE8+🎜🎜🎜 🎜div > p:first-child🎜🎜🎜 🎜🎜10. 次の兄弟セレクター ul li+li{} は、IE7+🎜🎜🎜🎜 開発によく使用されるブラウザ 🎜🎜🎜🎜chrome🎜🎜🎜🎜IE7~11🎜🎜🎜🎜firefox🎜🎜 と互換性があります。 🎜🎜CSSの継承そして、フォントから始まるcascading attributesは、intextを継承する可能性があります。 !重要な重みは無限です (少ない方が良い)🎜🎜🎜🎜ID 重みはクラス重みより大きい🎜🎜 🎜🎜 CSS ボックスモデル🎜🎜🎜🎜 CSS ボックスモデルは 5 つの部分で構成されます: 🎜🎜🎜🎜🎜 コンテンツ幅高さ + パディング + ボーダー + マージン🎜🎜🎜🎜🎜 単一行テキストのセンタリング: height = line-height🎜🎜🎜🎜 複数行テキストのセンタリング、パディング、行の高さ🎜🎜🎜🎜padding:🎜

padding是内边距
padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色
padding是复合值
padding:30px; ->pl30; pt30;pr30;pb30
padding:20px 30px; ->上下为20px 左右30px
padding:10px 20px 30px; -> 上10px 左右20px 下30px
padding:10px 20px 30px 10px; 上右下左

如果现设置padding:30px
再设置padding-left:10px
请问最后的值各是多少？
左10px; 其他都是30px

margin：外边框
border:

border:1px solid #000;
border-width
border-style：solid（实体）,dashed（虚线）,dotted（点）
border-color

行内元素和块级元素

p标签虽然是文本标签，但是它可以当容器来使用，p标签内一定不能放div; p段落也是块元素，他独占一行
文本元素：p span a i em u b strong img
容器级：div li dt dd h级（不建议）
除了p，所有的文本元素，都是行内元素
所有容器级别的元素，都是块元素
块和行内元素的相互转化

display：inline; //行内
display:inline-block;//行内块
display：block; //块

关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）
关于脱离文档流的方法
浮动 float:left; float:right;
绝对定位 position:absolute;
固定定位 position:fixed;
重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；
注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽
清除浮动

固定高度height:xxxpx;
缺点：如果作为产品列表的容器展示，我们无法知道容器的具体高度
overflow:hidden
clear:both
缺点：可以解决浮动引起的文档流错乱问题，但是上面浮动元素的父容器该没有高度还没有高度

伪类清除浮动

ul::after{
display: block;
height:0;
content: '';
clear: both;
}

ログイン後にコピー

溢出隐藏
清除浮动
缺点：如果父容器比较小，子容器比较大；父容器如果通过overflow:hidden来清除浮动的话，子容器就看不到了

透明度处理

rgba() 背景透明，文字不透明；
opacity:0 背景透明，文字也透明；
```
opacity:0.1;/*不兼容IE7浏览器*/
filter:alpha(opacity=10);
```
ログイン後にコピー

最基本的开发，首先必须创建的项目结构

images文件夹：放切好的图片
css文件夹：放置css文件：index.css
index.html文件

关于继承

宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)
font可以继承
color可以继承：当遇到a标签的时候， color无效；
line-height可以继承

当文本超度固定宽度的处理方法：

单行文本出超固定宽度出现省略号的写法：
```
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
```
ログイン後にコピー
英文不折行的问题处理： word-wrap:break-word;
出现滚动条的写法overflow-y:scroll;