HTML+CSS的文档笔记_第1页
HTML+CSS的文档笔记_第2页
HTML+CSS的文档笔记_第3页
HTML+CSS的文档笔记_第4页
HTML+CSS的文档笔记_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

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

文档简介

1、CSS简介一、 CSS简单介绍：a) Css cascading style sheets 层叠样式表b) Css的主要目的：是给HTML标记添加各种各样的表现(格式、样式)比如：文字样式，背景，文本样式，连接样式c) 提示：css是给HTML标记加的样式；js是给HTML标记加的行为。HTML标记是最先出现的d) HTML超文本标注语言：各种HTML标记e) Css层叠样式表：给HTML标记加的样式f) JavaScript脚本程序：给HTML标记加的程序。h1color: red ; font-size: 14px ; 选择器声明声明属性值属性值二、 Css语法格式a) b) 一个CSS规

2、则，由“选择器”和“格式声明语句”构成c) “选择器”：就是选择HTML标记，换句话说：就是给那个HTML语句加样式d) “格式生命语句”：由构成，中是各种格式语句。e) 一条格式语句，由“属性名：属性值”构成f) 每一条格式语句，必须用英文下的分号“；”结束。g) 属性名，就是CSS的各种属性，这些属性名都是固定值h) 属性值，一个属性名可以去不同的值，这个值不加引号。i) CSS中数字单位都是px，着个px不能省略三、 CSS选择器a) 基本选择器l “*”选择器：通配符1. 描述：将匹配所有的HTML标记，所有的标记都会改变的2. 语法：*color：red；3. 注意：“*”尽量少用，

3、因为IE6不支持l 标签选择器1. 描述：将匹配指定的HTML标记2. 语法：h1 color：red3. 注意：CSS标签选择器，与HTML标记一样，但是不能加尖括号l Class选择器（类选择器）-类选择器是使用频率最高的1. 描述：给一类HTML标记加样式。这里所指的“一类”是：每个HTML标记都有一个Class属性，且Class值一样。Class属性是公共属性，每个标记都有这个属性2. 类选择器的名称，必须以“.”开头，后跟HTML标记的class属性的值。如：.boxcolor：red；3. HTML标记的Class属性的值，不能以数字开头l ID选择器1. 描述：个指定ID的元素添

4、加样式。2. 注意:网页中HTML标记的ID属性的值，必须唯一的3. 每一个HTML标记都有一个id的公共属性。4. 注意：id属性一般是给Js用的，不是让你来加样式的，class属性只能给CSS样式的不能给Js用5. Id选择器的名称，必须以“#”开头，后跟HTML属性的值l 组合选择器1. 多元素选择器a) 描述：给多个元素加同一个样式多个选择器之间用“，”隔开b) 举例：h1,p,div,bodycolor：red；l 后代元素选择器（最常用）1. 描述：给某个标签的某一个后代加元素样式。选择器用“空格”隔开2. 举例：div .titlecolor：redl 子元素选择器1. 描述：给

5、某个元素的子元素添加样式2. 举例：div > h1.title（color：red）l CSS选择器-基本选择器（单个选择器）1. 通配符“*”：将匹配所有的HTML标记，只要<body>中存在的标记都会生效2. 标签选择器：对应于HTML标记，有什么样的HTML标记，就有什么样的镖旗选择器。如：pcolor：red3. 类选择器：给HTML标记中，class属性值相同的元素，添加样式。命名必须以“.”开头。如：.news4. Id选择器：给HTML标记中，具有一id属性的元素，添加样式。唯一性。命名以“#”开头。如：#newsl CSS选择器-咋和选择器（多个选择器）1.

6、 多元素选择器：同时给多个元素添加样式，各个选择之间用逗号“，”分开。如：p,h1,#box2. 后代元素选择器：给某个元素的子元素添加样式。用空格隔开。如：#box h13. 子元素选择器：给某个元素的子元素添加样式。用“>”隔开。如：#box>h1四、 CSS尺寸属性a) Width：元素宽度，一定要加px单位b) Height：元素高度。五、 CSS字体属性a) Font-size：文字大小。如：font-size：14px；b) Font-family：字体。如：font-family：微软雅黑；c) Font-style：斜体，取值：italic。如：font-style

7、：italic；d) Font-weight：粗体，取值：bold。如：font-weight：bold；六、 CSS文本属性a) Color：文本颜色b) Text-decoration：文本修饰线，取值：none(无)，underline（上划线），line-through（删除线）c) Text-align：文本水平对齐方式，取值：left，center，rightd) Line-height：行高，可以用固定值，也可以用百分比。如：line-height：24px；line-height：150%；e) Text-indent：首行缩进。如：text-indent：28px；f) Le

8、tter-spacing：字间距。七、 CSS为类选择器：给超链接加的样式（连接的不同状态加样式）a) 一个超链接，有四个状态：l 正常状态（：link）：鼠标没放上之前连接的样式l 放上状态（：hover）：鼠标放到连接上时样式l 激活状态（：active）：按住鼠标左键不松开的样式，这个样式特别短暂。l 访问过的状态（：visited）：按下鼠标左键，并弹起，这时样式的效果l 在平常工作中，会使用以下写法，来给连接加不同的样式：a:link，a:visitedcolor：gray；text-decoration：none；/将“正常状态”和“访问过的状态”合二为一a:hovercolor：

9、red；text-decoration：underline/鼠标放上去的效果八、 CSS列表属性a) List-style：列表样式，取值：none。去掉项目符号或编号前面的各种符号。九、 CSS边框属性：每个元素都可以加边框线a) Border-left：左边框线。l 格式：border-left：粗细 线型 线的颜色；l 线型：none（无线），solid（实线），dashed（虚线），dotted（点状线）l 举例：border-left：5px dashed red；b) Border-right：右边框线。c) Border-top：上边框线。d) Border-bottom：下边框

10、线。e) Border：同时给四个边框线加边框线。十、 CSS内边距属性：边框线到内容间的距离a) 注意：平常我们所说的width和height属性，他们指内容的宽度和高度，不包含内，外边距，边框线b) Padding-left：左内填充距离，左边距到内容间的距离c) Padding-right：右内填充距离，右边距到内容间的距离d) Padding-top：上内填充距离，上边线到内容间的距离。e) Padding-bottom：下内填充距离，下边线到内容间的距离。f) 缩写形式l Padding：10px；/四个边的内填充分别为10pxl Padding：10px 20px；/上下为10px

11、 ， 左右为20pxl Padding；5px 10px 20px；/上为5px ，左右为10px ， 下为20pxl Padding：5px 10px 15px 20px/顺序一定是“上右下左”十一、 CSS外边距属性：边线往外的距离a) Margin-left：左边线往外的距离b) Margin-right：右边线往外的距离c) Margin-top：上边线往外的距离d) Margin-bottom：下边线往外的距离。e) 简写式l Margin：10px；/四个外边距分别为10pxl Margin：10px 20px；/上下边距为10px，左右边距为20pxl Margin：5px 10

12、px 20px；/上边距的距离为5px，左右边距的距离为10px ，下边距的距离为20pxl Margin：5px 10px 15px 20px/顺序一定是“上右下左”b) CSS背景属性l Background-color：背景颜色l Background-image：背景图片地址。如：background-image：url（images/bg.jpg）l Background-repeat:背景平铺方式，取值:no-repeat(不平铺)、repeat-x(水平方向)、repeat-y(垂直方向)l Background-position：背景定位1. 格式：background-pos

13、ition：水平方向定位 垂直方向定位2. 用英文单词定位：background-position：left | center | right | top | center | bottom；3. 用固定值定位：background-position：50px 50px;/背景距离容器的左边50px，容器顶端50px4. 用百分比定位：background-position：50% 50%；/水平居中，垂直居中5. 用混合定位：background-position：left 10px；/背景靠左边器，距离容器顶端10pxl 简写方式：1. Background：背景色 背景图 是否定位 定位

14、方式；2. 举例：background：url（images/bg.gif） no-repeat center center;3. 举例：background：#ccc url(images/bg.gif) no-repeat left 10px;l CSS浮动和清除1. Float：让元素浮动，取值：left（左浮动）、right（右浮动）2. Clear：清除浮动，取值：left（清除左浮动），right（清除右浮动），both（同时清除上面的右浮动和左浮动）l CSS浮动1. 浮动的元素，将向左或向右浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止l 浮动元素，不再占用空间了，并且

15、，浮动元素的层级要高于普通元素l 浮动元素，一定是“块元素”。不管他是什么元素。l 如果浮动的元素，没有指定宽度的话。浮动后它将尽可能的变窄。因此，浮动元素一般要定宽度和高度l 浮动的功能：可以实现将多个块元素并列排版l 如何让包围浮动元素，包住元素？你就需要在浮动元素的下边，使用清除浮动元素操作二、 CSS 清除浮动a) CSS清除浮动的功能有两个：l 可以包围元素从“视觉上”包围浮动元素l 清除之下的其它元素将恢复默认排版l 有浮动，就得有清除l 如果包围元素指定了高度，那么可以不用清除浮动b) 项目案例：l F:【HTML语言代码文件2】传智播客第五天CSS浮动2.html<sty

16、le type="text/css">body,.KaiXue,ul,li,imgmargin:0px;padding:0px;.KaiXueborder:1px solid #F90;width:660px;margin:20px auto;padding:10px;a:link,a:visitedfont-family:"Courier New", Courier, monospace;color:#008;font-size:18px;text-decoration:none;a:hovercolor:#E00;.KaiXue imgwidt

17、h:300px;height:180px;padding:10px 14px;.KaiXue ullist-style:none;.KaiXue lifloat:left;text-align:center;.KaiXue .clearclear:both;</style></head><body><div class="KaiXue"><ul> <li> <img src="美妞.jpeg"/><br/> <a href="#"&g

18、t;图像点击</a> </li> <li> <img src="天使.jpg"/><br/> <a href="#">图像点击</a> </li> <li> <img src="古风.jpeg"/><br/> <a href="#">图像点击</a> </li> <li> <img src="man.jpg"/&

19、gt;<br/> <a href="#">图像点击</a> </li> </ul> <div class="clear"></div></div></body></html>三、 CSS继承性a) CSS属性继承：外层元素的样式会被内层元素的样式继承。多个外层元素样式最终会被叠加到内层元素上b) 什么样的CSS属性能被继承呢？l CSS文本属性都会被继承的：1. Color、font-size、font-family、font-styl

20、e、font-weight、text-align、text-decoration、text-indent、letter-spacing、line-height提示：<body>中的CSS属性，会被所有的子元素继承。c) CSS的优先级l 单个选择器的优先级1. 行内样式>id选择器>class选择器>标签选择器d) 多个选择器的优先级l 多个选择器的优先级，一般情况下指向越准确，优先级越高，特殊的情况下，我们需要假设一些值 如果标签选择器 优先级为1类选择器 优先级为10Id选择器 优先级为100行内样式 优先级为1000e) 计算优先级.news h1color

21、:red;优先级：10+1=11.titlecolor:blue;优先级：10Div .newscolor:red;优先级：1+10+1=12H1 .titlecolor;blue;优先级：1+10=11四、 Display属性a) 功能:规则网页元素是如何显示的问题b) 取值：none(隐藏)、block(以块元素显示)、inline(以行内元素显示)l Block：可以实现将行内元素转换成块元素l Inline：可以将块元素转换成行内元素五、 Overflow属性：当内容溢出时，该如何显示a) Overflow：当内容溢出时，溢出的内容该如何显示。取值：visible(可见)、hidden

22、(隐藏)、scroll(出现滚动条)、auto(内容超出自动出现滚动条)六、 Cursor光标的类型a) Cursor：网页中光标的类型，取值：text（文本光标）、help（帮助光标）、wait（等待光标）、pointer（手型）等。七、 CSS定位a) Position：元素定位方式，取值：static、fixed、relative、absolutel Static：静态定位（默认、不定位）l Fixed：固定定位l Relative：相对定位l Absolute：绝对定位l 定位方式，要与定位属性配合使用l 定位坐标：指定定位的元素，偏离目标元素多远的距离，取值：l Left：定位元素，

23、距离目标元素左边的距离l Top：定位元素，距离目标元素上边的距离l Right：定位元素，距离目标元素右边的距离l Bottom：定位元素，距离目标元素下边的距离b) 固定定位，position：fixedl 固定定位，是相对于浏览器窗口来进行的定位偏移l 固定定位，不占空间，层级高于普通元素l 固定定位，如果不指定定位坐标的话，固定定位元素位置在原地不动了c) 相对定位，position：relativel 相对定位，是相对于“原来的自己”进行定位l 相对定位，依然占据空间，层级高于普通元素l 如果不指定定位定位坐标的话。相对定位元素的位置在原地不动l 相对元素，原来是行内元素，定位还是行

24、内元素，原来是块元素，定位后还是块元素提示：相对于定位和绝对定位，一般情况下是配合使用d) 绝对定位，position：absolutel 相对于祖先定位元素（相对定位，决定定位），来进行的定位。1. 如果它的父元素没有进行任何定位的话，在往上找定位l 决定定位元素，不占空间，层级要高于普通元素l 如果不指定定位坐标的话，绝对定位元素的位置在原地不动l 绝对元素，一定是“块元素”八、 HTML引入CSS的方法a) 嵌入式l 通过<style>标记，来引入css样式l 语法格式：<style type=“css/text”></style>l 提示：<s

25、tyle>中的CSS样式，只能给当前网页来使用l 同一个网页，<style>标记可以多次出现b) 2万联式l 通过<link>标记，来引一个外部的CSS文件（.CSS），这样可以实现公共的CSS代码，被多个网页使用l <link rel=”stylesheet” type=”text/css” href=”css/public.css”/>l <link>标记的常用属性1. Rel：也就是引入的是什么类型的文件。取值：stylesheet2. Type：内容类型3. Href：引入的css文件地址提示：<link>标记放在<

26、;head>标记中同一个网页，可以使用多个<link>来链入多个外部文件。九、 行内式（主要用于JS控制元素的样式）a) 每一个HTML标记，都有一些公共的属性：class、id、title、style。b) HTML标记中的style属性的值，与CSS中的一模一样提示：行内样式中，CSS代码不能写的过多；行内样式中，多个CSS属性不能换行，也就是一行写完，行内样式优先级是最高，比ID选择器还要高十、 CSS表格属性a) Border-collapse：表格边框合并，取值：collapseb) <table border="1" width="500" height="300" bgcolor="#33CCFF" align="center" cellspacing="0" rules="all">十一、 盒子模型

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

温馨提示

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

最新文档

评论

0/150

提交评论