css3 概要ノート_html/css_WEB-ITnose-htmlチュートリアル-php.cn

属性セレクター

E[attr] は属性名のみを使用しますが、属性値は決定しません
E[attr="value"] は属性名を指定し、属性属性値
E[attr~="value"] は属性名を指定し、属性値を持ちます。単語リストには値の単語などが含まれます。数字の前に ~" を記述する必要があります。
E[attr^="value"] は属性名を指定し、属性値を持ちます。属性値は value
E[attr$="value"] で始まります。属性名が指定され、属性値があり、属性値の末尾が value
E[attr*="value"]属性名が指定され、属性値があり、属性値に次が含まれますvalue
E[attr|="value"] は属性名を指定し、属性値は value または「value-」で始まる値 (zh-cn など)
例: Baidu Library;

<style>p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}p a[href*=text]{ background-image:url(img/text.gif);}p a[href*=pdf]{ background-image:url(img/swf.gif);}p a[href*=exl]{ background-image:url(img/x.gif);}</style></head><body><p>    <a href="http://www.miaov.com/doc/javascript.html">测试文字</a></p><p>    <a href="http://www.miaov.com/text/javascript.html">测试文字</a></p><p>    <a href="http://www.miaov.com/pdf/javascript.html">测试文字</a></p><p>    <a href="http://www.miaov.com/exl/javascript.html">测试文字</a></p>

ログイン後にコピー

備考: IE7 以降でサポートされています。

構造擬似クラス

E:nth-child(n) は E 親要素の n 番目のバイトポイントを表します
p: nth-child(odd){background:red}/奇数行に一致/
p:nth-child(even){background:red}/偶数行に一致/
p :nth-child(2n){background :red}
E:nth-last-child(n) は、後ろから前に計算された E 親要素の n 番目のバイトポイントを表します
E:nth-of- type(n) は E の親要素を表します。要素内の n 番目のバイトポイントであり、型は E
E:nth-last-of-type(n) は E の親要素内の n 番目のバイトポイントを表します。 type は E、後方から Precalculation
E:empty は E 要素に子ノードがないことを意味します。注: 子ノードにはテキストノードが含まれます
E:first-child は E 要素の最初の子ノードを表します
E:last-child は E 要素の最後の子ノードを表します
E:first-of - type は E の親要素内の最初の子ノードを表し、ノードタイプは E の
E です。 last-of-type は E の親要素内の最後の子ノードを表し、ノードタイプは E の
E です。 Only-child は、E 要素内に子ノードが 1 つだけあることを意味します。注: 子ノードにはテキストノードは含まれません。
E:only-of-type は、E の親要素に子ノードが 1 つだけ存在し、この一意の子ノードのタイプが E である必要があることを意味します。注: 子ノードにはテキストノードは含まれません

例: Sina Head Navigation

<style>.list{margin:0;padding:0; list-style:none;}.list li{width:150px;border-right:1px solid #000;float:left;}.list li:last-of-type{border:none;}.list a{float:left;width:40px;margin:0 5px; font:12px/30px "宋体"; text-align:center;}.list li a:nth-of-type(3n+1){ font-weight:bold;}.list li:nth-child(3) a:nth-child(2){ color:red;}</style></head><body><ul class="list">    <li>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>    </li>    <li>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>    </li>    <li>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>    </li>    <li>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>    </li>    <li>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>    </li>    <li>       <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>    </li>    <li>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>        <a href="#">测试文字</a>    </li></ul>

ログイン後にコピー

その他の疑似クラス

E: target は現在の URL の要素タイプを表しますフラグメント、この要素は E
E:disabled はクリック不可能なフォームコントロールを示します
E:enabled はクリック可能なフォームコントロールを示します
E:checked は選択されたチェックボックスまたはラジオを示します
E:first- line E 要素の最初の行を表します
E:first-letter E 要素の最初の文字を表します
E::selection ユーザーがテキストを選択したときの E 要素を表します
E::before生成されたコンテンツは E 要素の前にあります
E::after E 要素の後にコンテンツを生成します
E:not(s) は E 要素が一致しないことを意味します
E~F は隣接する F 要素を意味しますE 要素
コンテンツ属性

css3 描画クロス

a{ display: inline-block; width: 20px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg) }    a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg);}

ログイン後にコピー

text

text-shadow

text-shadow: x y ぼかし色、 …
パラメータ
x 水平方向のオフセット
y 垂直方向のオフセット
ぼかしぼかしの距離
色影の色
文字の影レイヤーを多くするとベタつきます

テキストシャドウアプリケーション

最も簡単な使用法

text-shadow:2px 2px 4px black

ログイン後にコピー

シャドウオーバーレイ

text-shadow:2px 2px 0px red, 2px 2px 4px green;

ログイン後にコピー

最初に背面をレンダリングし、次に前面をレンダリングします
いくつかの楽しい例

//层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;//光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;//火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;

ログイン後にコピー

テキストストローク

webkit-text-stroke:width color

新しいテキスト関数

方向テキストの配置を定義します (完全に互換性があります)
Rtl 右から左に配置
Ltr 左から右に配置
unicode-bidi と組み合わせて使用する必要があることに注意してください

p{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;unicode-bidi: bidi-override}

ログイン後にコピー

Text-overflow は処理方法を定義します省略されたテキスト
クリップ省略なし
省略記号 (overflow:hidden およびwhite-space:nowrap と一緒に使用されることに注意してください)

p{width:300px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

ログイン後にコピー

カスタマイズされたテキスト

コード形式

@font-face {    font-family: 'miaov';    src: url('1-webfont.eot');    src: url('1-webfont.eot?#iefix') format('embedded-opentype'),         url('1-webfont.woff') format('woff'),         url('1-webfont.ttf') format('truetype'),         url('1-webfont.svg#untitledregular') format('svg');    font-weight: normal;    font-style: normal;}

ログイン後にコピー

フォント形式を変換して互換性のあるコードを生成 http://www.fontsquirrel.com/fontface/generator

柔軟なレイアウト

柔軟なボックスモデル

<style>.box{height:100px;padding:10px; display:-webkit-box; display: -moz-box;}.box div{width:100px;height:100px;background:red;border:1px solid #fff;}</style></head><body><div class="box">    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div></div>

ログイン後にコピー

注意してくださいフレキシブルボックスモデルを使用する場合、要素は親にdisplay:boxまたはdisplay:inline-boxを追加する必要があります

box-orientはボックスモデルのレイアウト方向を定義します

Horizontal 水平显示vertical 垂直方向

ログイン後にコピー

 .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-orient:vertical; }

ログイン後にコピー

box-direction 要素配置順序

 Normal 正序 Reverse 反序

ログイン後にコピー

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff; }

ログイン後にコピー

box-ordinal-group は要素の特定の位置を設定します

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{width:100px;height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}

ログイン後にコピー

box-flex はボックスの柔軟なスペースを定義します

子要素のサイズ = ボックスのサイズ * 子要素の box-flex 属性値 / 合計すべての子要素の box-flex 属性値の

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){width:300px;}.box div:nth-of-type(2){-webkit-box-flex:2;}.box div:nth-of-type(3){-webkit-box-flex:3;}.box div:nth-of-type(4){-webkit-box-flex:4;}.box div:nth-of-type(5){-webkit-box-flex:5;}

ログイン後にコピー

box-pack はボックスのリッチスペースを管理します

start すべての子要素が表示されますボックスの左側に、リッチスペースが右側にあります
end すべての子要素がボックスの右側に表示され、リッチスペースが右側にあります左
中央すべての子要素は中央に配置されます
justify 残りのスペースは子要素間で均等に配分されます

 .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:justify  ;  }

ログイン後にコピー

box-align は垂直方向の要素の位置を管理します

starすべての子要素が上部にあります
すべての子要素が下部にあります
中央にありますすべての子要素が中央にあります

<style> /*个未知宽高的块元素如何在屏幕中水平垂直居中？需说明原理。*/html{height:100%;}body{height:100%;margin:0;}.box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}.box div{background:red;border:1px solid #fff;}</style></head><body><div class="box">    <div>1s</div>    <div>2s</div>    <div>3s</div>    <div>4s</div>    <div>5s</div></div>

ログイン後にコピー

ボックスモデルシャドウ

使用法

box-shadow:[inset] x y blur [spread] color

ログイン後にコピー

参数
inset投影方式
inset：内投影
不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径
先扩展原有形状，再开始画阴影color

box-shadow:10px 10px 30px blue;box-shadow:inset 10px 10px 30px blue;box-shadow:0 0 30px 10px #000; box-shadow:0 0 30px 30px #000,inset 0 0 30px yellow;

ログイン後にコピー

其他盒模型新增属性

box-reflect 倒影

direction 方向必选 above|below|left|right;
距离
渐变（可选）

img{ -webkit-box-reflect:below;}//上下排列，倒影在下方img{ -webkit-box-reflect:right 10px;}//左右排列，倒影在右方img{-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}//线性渐变，逐渐消失background:-webkit-linear-gradient(red 0,blue 100%);//背景渐变

ログイン後にコピー

resize 自由缩放

both 水平垂直都可以缩放
horizontal 只有水平方向可以缩放
vertical 只有垂直方向可以缩放

.box{width:100px;height:100px;background:url(bg.jpg);border:5px solid #000; resize:both; overflow:auto;}

ログイン後にコピー

注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放

box-sizing 盒模型解析模式

content-box 标准盒模型 width/height=border+padding+content
border-box 怪异盒模型 width/height=content

.box{width:200px;height:200px;padding:50px;border:10px solid #000; box-sizing:border-box;}

ログイン後にコピー

Css3分栏布局

column-width 栏目宽度
column-count 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线

.wrap{width:900px;border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-width:400px;}//分成了宽度400px的两栏.wrap{ -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid red;}//分成了四列

ログイン後にコピー

只有webkit内核实现了该属性

Css3响应式布局

媒体类型

all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视

关键字

and
not not关键字是用来排除某种制定的媒体类型
only only用来定某种特定的媒体类型

媒体特性

(max-width:600px)
(max-device-width: 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips
@media screen{ 选择器{属性：属性值； }
}
@media screen and (max-width:400px) {
}

移动端meta

width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允许缩放（no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

新增样式属性

圆角

border-radius: 1-4个数字 / 1-4个数字
前面是水平，后面是垂直
不给“/”则水平和垂直一样

border-radius: 10px/5px;border-radius:100px/150px;border-radius:20px 40px 60px 80px/10px 20px 30px 40px;

ログイン後にコピー

参数
各种长度单位都可以：px，%。 %有时很方便但宽高不一致时不太好

border-radius:50%;

ログイン後にコピー

用法
1个：都一样
border-radius: 一样

 border-radius:20px;

ログイン後にコピー

2个：对角
border-radius: 左上&右下右上&左下

 border-radius:20px 40px;

ログイン後にコピー

3个：斜对角
border-radius: 左上右上&左下右下

border-radius:20px 40px 60px;

ログイン後にコピー

4个：全部，顺时针
border-radius: 左上右上右下左下

 border-radius:20px 40px 60px 80px;

ログイン後にコピー

例子：风车

<style>.box{width:400px;height:400px;margin:50px auto; transition:5s linear;}.box div{width:180px;height:180px;margin:10px;border:1px solid #000; box-sizing:border-box;float:left;background:red ;}.box div:nth-child(1),.box div:nth-child(4){ border-radius:0 70%;}.box div:nth-child(2),.box div:nth-child(3){ border-radius:70% 0;}.box:hover{ -webkit-transform:rotate(720deg);}</style></head><body><div class="box">    <div></div>    <div></div>    <div></div>    <div></div></div>

ログイン後にコピー

边框

边框图片 border-image

border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框宽度
border-image-repeat 图片的排列方式 round 平铺,repeat 重复,stretch拉伸

.box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:20px;border-right-width:20px;}.box{width:100px;height:100px; border-width:20px; -webkit-border-image:url(border.png) 27 27 round round;}

ログイン後にコピー

边框颜色 border-colors 只在火狐下实现

-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;

ログイン後にコピー

线性渐变

线性渐变格式
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
只能用在背景上

IE 下的样式格式如下

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');`

ログイン後にコピー

参数
起点：从什么方向开始渐变 left、top、left top 默认：top
角度：从什么角度开始渐变 x deg的形式

background-image:-webkit-linear-gradient(60deg,red,blue);background-image:-webkit-linear-gradient(60deg,red,blue,yellow,blue);

ログイン後にコピー

点：渐变点的颜色和位置
black 50%，位置可选

线性渐变实例进度条

<style>.wrap{width:200px;height:30px;overflow:hidden;border:1px solid #000;}.box{width:400px;height:30px;background:-webkit-repeating-linear-gradient(15deg,green 0,green 10px,#fff 10px,#fff 20px); transition:3s;}.wrap:hover .box{ margin-left:-100px;}</style></head><body><div class="wrap">    <div class="box"></div></div>

ログイン後にコピー

 background-image:-webkit-linear-gradient(60deg,red 0,blue 50%,green 100%);

ログイン後にコピー

repeating-linear-gradient

 background-image:-webkit-repeating-linear-gradient(60deg,red 0,blue 30px);

ログイン後にコピー

性渐变实例(2)
加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一个位置两个点——直接跳变
也可以用px 配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)
加入背景图片

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

ログイン後にコピー

实例：百度音乐图片光影效果

<style>.box{width:300px;height:300px;background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 210px) no-repeat -200px 0,url(new_bg.png) no-repeat; transition:1s;}.box:hover{background-position:300px 0,-100px -100px;}</style></head><body><div class="box"></div>

ログイン後にコピー

兼容版本

.box{background:-webkit-linear-gradient(red,blue);background:-moz-linear-gradient(red,blue);background:linear-gradient(red,blue); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');}

ログイン後にコピー

径向渐变

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点：可以是关键字（left,top,right,bottom），具体数值或百分比
形状： ellipse、circle
大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
注意firefox目前只支持关键字

background:-webkit-radial-gradient(red,blue);background:-webkit-radial-gradient(100px 50px,red,blue);background:-webkit-radial-gradient(100px 50px,circle,red,blue);background:-webkit-radial-gradient(100px 50px,100px 20px,red,blue);background:-moz-radial-gradient(100px 50px,red,blue);

ログイン後にコピー

<style>.box{width:300px;height:300px;border:1px solid #000;float:left;margin:10px;}.box:nth-child(1){ background:-webkit-radial-gradient(100px 50px,closest-side,red,blue);}.box:nth-child(2){ background:-webkit-radial-gradient(100px 50px,closest-corner,red,blue);}.box:nth-child(3){ background:-webkit-radial-gradient(100px 50px,farthest-side,red,blue);}.box:nth-child(4){ background:-webkit-radial-gradient(100px 50px,farthest-corner,red,blue);}.box:nth-child(5){ background:-webkit-radial-gradient(100px 50px,contain ,red,blue);}.box:nth-child(6){ background:-webkit-radial-gradient(100px 50px,cover ,red,blue);}</style></head><body><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></body>

ログイン後にコピー

背景

多背景 先写的背景在上面
逗号分开
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;

ログイン後にコピー

背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小
ackground-origin ： border | padding | content
border-box：从border区域开始显示背景。
padding-box：从padding区域开始显示背景。
content-box：从content区域开始显示背景。
background-clip
border：从border区域向外裁剪背景。
padding：从padding区域向外裁剪背景。
content：从content区域向外裁剪背景。
no-clip：从border区域向外裁剪背景。
实例：iphone开机动画

遮罩

Mask-image
Mask-position
Mask-repeat
实例：特殊形状的幻灯片效果

1、通过 translate 来移动元素和用 left top 移动元素有何区别？分别有何优劣？
2、在兼容IE6及所有其他浏览器、不使用JS的前提下：一个未知宽高的块元素如何在屏幕中水平垂直居中？需说明原理。
3、在兼容IE6及所有其他浏览器、不使用JS的前提下：三列布局：中间宽度固定，两侧宽度自适应屏幕？需说明原理。
4、在兼容IE6及所有其他浏览器、不使用JS的前提下：三列布局：中间自适应屏幕，两侧固定宽度，要求至少两种方式完成。
5、请在IE6下实现元素（如：DIV）中心点的旋转？
6、对于一个大型网站静态页面的制作，谈谈你对HTML结构的设计、CSS样式表规划及重用性的思考？