html+css的文档笔记

《html+css的文档笔记》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

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

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

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

5、一个后代加元素样式。选择器用“空格”隔开2.举例：div.title{color：red}l子元素选择器1.描述：给某个元素的子元素添加样式2.举例：div>h1.title（color：red）lCSS选择器-基本选择器（单个选择器）1.通配符“*”：将匹配所有的HTML标记，只要中存在的标记都会生效2.标签选择器：对应于HTML标记，有什么样的HTML标记，就有什么样的镖旗选择器。如：p{color：red}3.类选择器：给HTML标记中，class属性值相同的元素，添加样式。命名必须以“.”开头。如：.news{}4.Id选择

6、器：给HTML标记中，具有一id属性的元素，添加样式。唯一性。命名以“#”开头。如：#news{}lCSS选择器-咋和选择器（多个选择器）1.多元素选择器：同时给多个元素添加样式，各个选择之间用逗号“，”分开。如：p,h1,#box{}1.后代元素选择器：给某个元素的子元素添加样式。用空格隔开。如：#boxh1{}2.子元素选择器：给某个元素的子元素添加样式。用“>”隔开。如：#box>h1{}一、CSS尺寸属性a)Width：元素宽度，一定要加px单位b)Height：元素高度。二、CSS字体属性a)Font-size：文字大小。如：font

7、-size：14px；b)Font-family：字体。如：font-family：微软雅黑；c)Font-style：斜体，取值：italic。如：font-style：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-h

8、eight：行高，可以用固定值，也可以用百分比。如：line-height：24px；line-height：150%；e)Text-indent：首