搜尋
首頁web前端html教學CSS3的笔记总结_html/css_WEB-ITnose

css3  就是css2 的一个升级版本。css2 是用来做效果渲染的,而css3 可以使做出来的效果更佳丰富。

C3有兼容性问题,移动端支持稍微要好些.

      坚持以下原则:

                (1)渐进增强

                (2)添加私有前缀

                (3)考虑用户群体

 

【 选择器 】css3 在之前的基础上面扩展了三种类型的选择器

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

        (1) 属性选择器

                a[href] 所有的a 标签,这个a需要有 href 属性

                a[href='demo']  所有的a 标签,这个a需要有 href=demo

                a[href*='demo'] 包含demo

                a[href^='demo']  以demo 开始

                a[href$='demo'] demo  结束

        (2) 伪类选择器

                a:active  a:link  a:hover a:visited

                新增:

                        li:first-child

                        li:last-child

                        li:nth-child() 根据n 去取值,索引是从1开始计算

                        li:nth-last-child 从后向前计算,倒着算

                            n 的用法. 取值0,1,2,3,4...

 

                        empty 空的.

                        div:empty   选中没有子元素的div

                        div:target 结合锚点进行使用,处于当前锚点的元素会被选中;

        (3)伪元素选择器

                        我们的伪元素选择器是:: 两个

                            before: 想元素里面添加一个子元素,这个资源在最前面 (它默认是一个行内元素,我们需要转换成一个块元素,必须设置content:'')

                            after: 想元素里面添加一个子元素,这个资源在最后面

 

                        first-letter 选中第一个字或者字母。

                        first-line 选中第一行

         ::selection 可改变选中文本的样式;

1   //选中.demo 的父元素下面的第二个子元素,并且这个子元素有一个class 属性,它的的值是demo2 .demo:nth-child(2){<br />3  }

  (4)有两种新增方式可以表示颜色

           rgba ( red,green,blue,Alpha 透明通道)

           hsla(Hue 色调,Saturation 饱和度,Lightness 亮度,Alpha 透明度)

           如果给父盒子设置了透明度,子盒子会继承父盒子的透明度; 新增的颜色的标识方式里面,支持设置透明,而且设置的透明不会影响到子盒子;我想实现半透明的效果,我就可以使用 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
如何驗證您的HTML代碼?如何驗證您的HTML代碼?Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript:比較Web技術HTML與CSS和JavaScript:比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML作為標記語言:其功能和目的HTML作為標記語言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容,其目的在於提供一種標準化的方式來展示信息。 1)HTML通過標籤和屬性組織網頁的各個部分,如標題和段落。 2)它支持內容與表現分離,提升維護效率。 3)HTML具有可擴展性,允許自定義標籤增強SEO。

HTML,CSS和JavaScript的未來:網絡開發趨勢HTML,CSS和JavaScript的未來:網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML:結構,CSS:樣式,JavaScript:行為HTML:結構,CSS:樣式,JavaScript:行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:是編程語言還是其他?HTML:是編程語言還是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境