Web前端开发必知必会 课件-中文版 lesson 4 基本CSS与颜色模型_第1页
Web前端开发必知必会 课件-中文版 lesson 4 基本CSS与颜色模型_第2页
Web前端开发必知必会 课件-中文版 lesson 4 基本CSS与颜色模型_第3页
Web前端开发必知必会 课件-中文版 lesson 4 基本CSS与颜色模型_第4页
Web前端开发必知必会 课件-中文版 lesson 4 基本CSS与颜色模型_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

地址：杭州市滨江区滨文路528号邮政编码：3100532024/4/10CSS基础与颜色模型

LESSON4CONTENTS01CSS基本选择器类,ID,标签02CSS样式规则03颜色模型与颜色什么是CSSCSS(CascadingStyleSheets)层叠式样表Acomputerlanguagefordemonstratingtheelementstylesin

HTML/XMLdocuments优点精准、灵活控制布局、字体、背景等layout,font,backgroundandcolor…小小修改，大大变化CSS样式可用于（网页的）任何地方，任何元素，无处不在012024/4/10行内式内嵌式CSS选择器selectors网页元素使用选择器可以迅速改变其样式基本选择器：Tag(标签，即网页元素自身)Class(类)ID（复合选择器：后述）5选择器命名规则合法选择器：h2a（标签）.a1._myfont（类）#p1#a_b_c_123

（ID）非法：p1section1.123.p#a#345标签：=标签名ID

或

Class

命名规则：

用

“A”~“Z”或

“a”~“z”或“_”打头

（不能以数字开头）后跟:“0~9”或

“A(a)~Z(z)”或

“_”不能用标签名

02ColorModel颜色模型

—指的是某个三维颜色空间中的一个可见光子集，它包含某个色彩域的所有色彩。RGB（加色）模型用于彩色阴极射线管等彩色光栅图形显示设备中RGB(Red,Green,Blue)HSL(Hue,Saturation,Lightness)Usage:CRT/LCDCMYK（Cyan,Magenta,Yellow,Black）模型032024/4/10传统：00~FF（0~255indecimal）RGB“#FFFFFF”<bodybgcolor=“#FF0000”/><bodybgcolor=“#F00”/><bodybgcolor=“red”/>-----------------现在：CSS3中设置字体颜色：color:rgb(255,0,0);(or)color:rgba(255,0,0,1);RGB颜色取值（rgb,rgba）rgbaalpha（透明度）opacity：alpha（0～1）1—nottransparent,0—totallytransparent<bodybgcolor=“#0000FF”>---可行<bodybgcolor=“hsla(0,0%,96%,1.00)”>---不可行HSL取值(hsl,hsla)Hue

(色调)，Saturation

(饱和度)、Lightness

(亮度)i.e.

color:hsl(90,50%,60%);(H色相,S饱和度%,L亮度%)2024/4/10颜色取值实例方法1：不带透明度：rgb(r,g,b)带透明度：rgba(r,g,b,alpha)

取值范围：rgba(0~255,

0~255,0~255,0~1)方法2：hsl(h,s,l)或hsla(h,s,l,alpha)valueranges：hsla(0~255,0~100%,0~100%,0~1)i.e.扑克牌网页定义类.mainbox:width\height\background-color…使用它：<divclass=“mainbox”>定义4个ID分别对应四个花色

(#spade,#club,#heart,#diamond)使用div(Width\height\border\background-image…)定义.big类，结合<span>用于单独放大

<p>红桃<spanclass=“big”>A</span></p><body><header><h2>我们一起学习网页前端开发</h2></header><divclass="mainbox"><!–classmainboxfordiv--><p>主体部分：</p></div><footer>copyrighthere</footer></body>/*CSS*/header,footer{text-align:center;}

.mainbox{margin:0pxauto;

width:1000px;background-color:rgb(255,255,255);padding:1em;

}

/*endofCSS*/基本框架网页：HowCSSselectorswork(inhtml)Define（inheadsection）在head中定义<styletype=“text/css”>.classname

{color:#RRGGBB；padding:2em;border:solid#00F1px;}#idname{…}Tagname{…}</style>Apply（inbodysection）在body中使用class<bodyclass=“style1”><pclass=“p1”>ID<divid=“container”><divid=“banner”>……</div></div>tagautomaticallyappliedCSS代码：Aselector(选择器)HTML代码：标签，用于标识网页元素

Summary小结Q&A选择器有几种基本类型？在哪里定义？如何使用？rgba中的a代表什么？是否有办法把rgb值转换为hsl？常用CSS属性：background-color，background-imagecolor，font-size，font-family（字体）text-align（p,h1,h2,div,…等内部文本对齐方式）margin,padding,width，heightborder,border-lef

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论