ホームページ >ウェブフロントエンド >htmlチュートリアル >css3 概要ノート_html/css_WEB-ITnose
css3 概要ノート_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:54:041270ブラウズ
属性セレクター
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);} texttext-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
2c0b86b93e9b74aebd596b0abc21f8ff
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([759ea3c95f16d42ec0e11bb715e29a35 || 40196a7013fee2ba2c5d6d05196bef87,]? 558a36b95badacf11365e303d670f8ab, 558a36b95badacf11365e303d670f8ab…)
只能用在背景上
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([759ea3c95f16d42ec0e11bb715e29a35]? [c6b8689ee1ac7d230c364f1dc1656d9e || 0495c7c44bb3063225c57ad476e02f51,]? 558a36b95badacf11365e303d670f8ab, 558a36b95badacf11365e303d670f8ab…);
起点：可以是关键字（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样式表规划及重用性的思考？