目次
1、伸缩布局
2、多列布局
3、Web字体
3.1 字体格式
3.2 字体图标

CSS3_html/css_WEB-ITnose のメモ概要

Jun 24, 2016 am 11:15 AM

css3 は css2 のアップグレード版です。 CSS2 はエフェクトのレンダリングに使用されますが、CSS3 はエフェクトをより良く、より豊かにすることができます。 C3には互換性の問題があり、モバイルサポートはわずかに優れています。前のセレクターに基づくセレクターの

(获取到一个元素有多重方式,我们要控制页面上面的元素,必须先得到页面上面的元素,假设你的页面的层级结构比较复杂的时候)
ログイン後にコピー

, a[href= 'demo'] すべての a タグ、この a には href=demo が必要です

a[href*='demo'] にはデモが含まれます

a[ href^='demo'] デモから始まります

a[href$= 'Demo'] デモ終了

(2) 疑似セレクター

A: アクティブ A: リンク A: ホバー A: 訪問済み

新しい:

: first-child

li: last-child

li:nth-child() は n に基づいて値を受け取り、インデックスは 1 から計算されます

li:nth-last-child は前から計算されます前と後ろ

n の使用法 2 、 3,4 ...

EMPTY

DIV: Empty は DIV

DIV を選択します。

DIV: 使用するターゲット バインディング アンカー ポイント、現在のアンカーの要素ポイントが選択されます;

(

( 3) 疑似要素セレクター

私たちの疑似要素セレクターは :: 2 つの

beface: 要素に子要素を追加したい場合、このリソースが最前線にあります (これはインライン要素のデフォルトです。ピースに変換する必要があります。要素は接続に設定する必要があります: '')

後: このリソースは最初の要素によって選択されます。最後の最初の単語または文字。 -St FIRST-LINE 最初の行を選択します

:: SELECTION は中国語テキストの選択範囲のスタイルを変更できます; 透明度チャンネル)

hsla (色相、彩度、明度、アルファ透明度)

如果给父盒子设置了透明度,子盒子会继承父盒子的透明度; 新增的颜色的标识方式里面,支持设置透明,而且设置的透明不会影响到子盒子;我想实现半透明的效果,我就可以使用 rgba,hsla 颜色的表示方式.

(5) text-shadow 可以设置文本阴影,实际上就是给文本添加影子..

text-shadow:1px 1px 1px red;

第一个1px 向右移动,负值的是向左移动(正值向右偏移,负值向左偏移)

第二个1px 向下移动 ,负值是向上移动(正值是向下偏移,负值向上偏移)

第三个1px 向下移动 代表的是模糊度,,不能为负数,值越大,越模糊(模糊度,不能为负数,值越大,模糊度越高)

第四个red 代表模糊的颜色. 影子的颜色.

text-shadow:1px 1px 1px red,-1px -1px 1px red

// 可以为文本添加多个影子

(6)盒子模型

我们可以改变盒子计算宽高的方式,通过设置盒子的这个属性

box-sizing:content-box/border-box

content-box 盒子的高度以及宽度 盒子的宽度=width+padding+border

border-box 盒子的高度以及宽度 盒子的高度以及宽度=width

——————————————————————————————————————————

【 边框圆角 】

border-radius:<br />        1:正圆<br />        2:椭圆   x 轴 ,y 轴的概念.<br />        3:android 机器人<br />        4:小机器猫.<br />box-shadow 边框阴影;可以设置边框的阴影,外阴影,内阴影.<br />border-image:<br />            1:我们可以为边框设置图片,之前设置的都是背景色
ログイン後にコピー
而现在我们可以为四个边设置边框图片。<br />        我们只需要一张图,浏览器会自动帮我们进行裁剪。然后我们还可以指定宽度<br />指定边框图片的平铺方式.
ログイン後にコピー
                    1:border-image-source 边框图片的路径<br />                    2:border-image-slice 裁剪的方式<br />                    3: border-image-width 边框的宽度<br />                    4: border-image-repeat:round,stretch,repeat<br />【 渐变 】<br />        <strong>线性渐变:</strong><br />                liner-gradient(<br />                         135deg,    需要有一个角度. (顺时针方向)<br />                         yellow 25%,   起始颜色<br />                         green  50%    终止颜色<br />                )<br />        <strong>径向渐变:</strong>一个中心点,朝着四周进行渐变<br />                radius-gradient(<br />                        100px at center center    半径  at   中心点的位置<br />                        yellow   起始颜色<br />                        green     终止颜色<br />                )<br />【 背景 】<br />       <strong>背景尺寸:</strong><br />                我们可以为一个div 设置背景,<br />                1:假设我的背景图片的大小超过了盒子的大小.<br />                我们显示的背景不全面<br />                我们这个时候可以设置背景的大小与盒子的大小一致.<br />                但是我们不能做到盒子变大,背景变大<br />                background-size:contain  cover<br />                     contain: 背景图片始终完全显示,等比例缩放.<br />                     cover:  也会缩放,背景始终填充整个区域
ログイン後にコピー
       <strong> 背景原点:</strong><br />               background-origin:  可以设置背景图片的位置.<br />                background-origin:border-box,padding-box,content-box;
ログイン後にコピー
                      border-box   背景的原点在border 上面<br />                      padding-box  背景的原点在内边距上面<br />                      content-box   背景的远在content 内容区域
ログイン後にコピー
<strong> 背景裁剪:</strong><br />                 background-clip:   border-box,padding-box,content-box;<br />        <strong>多重背景:</strong><br />              url("images/bg1.png") left top no-repeat,<br />              url("images/bg2.png") right top no-repeat,<br />              url("images/bg3.png") right bottom no-repeat,<br />              url("images/bg4.png") left bottom no-repeat,<br />              url("images/bg5.png") center center no-repeat;<br />【 过渡 】 我们要完成过渡,我们需要使用一个transition这样的一个属性<br />        1:补间动画<br />            开始状态,结束状态<br />        2:帧动画    transition: all  5s linear  过渡延迟多少秒执行<br />             (1)设置过渡的属性 (all)  linear 匀速<br />             (2)过渡时间      ease-in<br />             (3)过渡的速度       ease-out    <br /><br />————————————————————————————————————————————————————————————————————————————————————————
ログイン後にコピー

【 过渡 】(transtion:all 2s linear 3s;)
ログイン後にコピー
    transition 属性<br />    all 需要过渡的属性<br />    2s 过渡这些属性需要执行的时间<br />    linear 过渡的速度<br />    4s 延迟多少秒<br />【 2D——3D转换 】 我们2d 转换和3d 转换,我们都可以使用transform 属性<br />    2d 转换<br />         我们有三种转换效果<br />         ① scale(1.5,2)   放大 大于1;缩小 小于1<br /> ② translate(200px,200px) 向水平方向移动,垂直方向移动,可以接受负值(负值是反方向,百分比)<br /> ③ rotate() 正值顺时针方向,负值是逆时针方向<br />      transform-origin 旋转的中心点的位置;默认的中心点在中间<br />    3d:转换<br /> 掌握一个坐标系,有了x轴,y轴,z 轴的概念。此外,我们想在一个平面实现3d 的效果,我们使用到了透视..
ログイン後にコピー
        ① x轴,z轴,y轴的方向 tranlateX(200px) 水平向右移动<br />        ② 围绕x,y,z 轴旋转,角度,旋转.<br />        ③ 旋转的中心点.<br />        <strong>立体盒子:</strong>每一个平面(盒子)都对应一个3d 坐标系
ログイン後にコピー
        <strong>透视:</strong>观察者与目标物的距离 ,设置了这个距离之后,我们就可以透过透视产生立体的效果<br />                 transform-origin  旋转的终点的位置<br />                 transform-style:preserve-3d (把子元素放在一个3维空间内)
ログイン後にコピー
  【 动画 】 有一个animation属性  (这里有八个值)<br />                1:我要执行那个动画,名称<br />                2:执行动画需要花费的时间<br />                3:速度,执行动画的方式. steps()<br />                4:延迟多少秒执行动画<br />                5:循环的次数.<br />                6:是否交替执行动画.<br />                7:动画结束的状态.<br />                8:动画的暂时,运行状态.
ログイン後にコピー

 animation 属性:  move (动画的 名称)
ログイン後にコピー
    —— animation:move 10s linear
ログイン後にコピー
    动画执行的时间
ログイン後にコピー
    动画的速度<br />    延迟时间<br />    循环的次数<br />    动画是否交替的效果 alternate<br />    动画的结束状态 forward<br />    动画的状态  running  paused
ログイン後にコピー

1 // 定义动画2 @keyfreames move{3       from{4       }5       to{6       }7 }
ログイン後にコピー

 1 //  我们在做动画的时候我们定义一组动画 2  @keyfreames move{ 3            0%{ 4                  } 5            20%{ 6                  } 7            40%{ 8                  } 9            80%{10                  }11            100%{12                  }13   }
ログイン後にコピー

——————————————————————————————————————————————————

1、伸缩布局

CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。

如下图:

主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向

侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的

方向:默认主轴从左向右,侧轴默认从上到下

主轴和侧轴并不是固定不变的,通过flex-direction可以互换。

(1)必要元素:

a、指定一个盒子为伸缩盒子 display: flex

b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction

c、明确主侧轴及方向

d、可互换主侧轴,也可改变方向

(2)各属性详解

a、flex-direction调整主轴方向(默认为水平方向)

b、justify-content调整主轴对齐

c、align-items调整侧轴对齐

d、flex-wrap控制是否换行

e、align-content堆栈(由flex-wrap产生的独立行)对齐

f、flex-flow是flex-direction、flex-wrap的简写形式 flex-flow: cloumn wrap

g、flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配

h、order控制子项目的排列顺序,正序方式排序,从小到大

此知识点重在理解,要明确找出主轴、侧轴、方向,各属性对应的属性值可参考示例源码

2、多列布局

类似报纸或杂志中的排版方式,上要用以控制大篇幅文本。

了解即可,实际意义不大。

3、Web字体

3.1 字体格式

不同浏览器所支持的字体格式是不一样的,所以我们有必要了解一下有关字体格式的知识。

1、TureType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;

2、OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;

3、Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;

4、Embedded Open Type(.eot)格式

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+;

5、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;

了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体生成工具帮我们生成各种格式的字体,因此无需过于在意字体格式间的区别差异。

推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体

3.2 字体图标

其实我们可以把文字理解成是一种特殊形状的图片,反之我们是不是也可以把图片制作成字体呢?

答案是肯定的。

常见的是把网页常用的一些小的图标,借助工具帮我们生成一个字体包,然后就可以像使用文字一样使用图标了。

优点:

1、将所有图标打包成字体库,减少请求;

2、具有矢量性,可保证清晰度;

3、使用灵活,便于维护;

Font Awesome 使用介绍

http://fontawesome.dashgame.com/

定制自已的字体图标库

http://iconfont.cn/

https://icomoon.io/

SVG素材

http://www.iconsvg.com/

<br /><br /><br />
ログイン後にコピー

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
ログイン後にコピー

 

 

 

 

 

 

 

 

 

 

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

See all articles