CSS+DIV课程笔记(部分)

合集下载

div+css笔记

常用的样式属性：颜色：color文本属性：文字对齐：style="text-align:justify;text-justify:distribute-all-line;"(左右两段七行) 大小：font-size:字体：font-family边框属性border-style 边框样式border-width 边框宽度border-color 边框颜色例：border:solid 4px #F60;定位属性（position）top 顶部边距（上边距）left 左边距width 宽度height 高度z-index z轴索引号，用于层position:relative(相对定位)保留文档中的位置position:absolute(绝对定位).完全脱离文档流，忽略其他元素。

HTML选择器Class selectorID selector关联选择器组合选择器伪元素选择器id 用#idclass 用.classCSS属性：字体文本Text-decoration:上划线overline、下划线underline、删除线through,none等Text-transform:首字母大写capitalize、全部大写uppercase、全部小写lowercase等Font-style:itatic(斜体),normal(正常),oblique.Text-align:段落水平对齐设置值（center,right,left,justify）Vertical-align:段落垂直对齐设置值(sub,super,top,middle,bottom/,10px/-10px,相对于元素行号属性的百分比)Letter-spacing:字母的间距Word-spacing:单词的间距Line-height:文本行高Text-indent:缩进方式White-space:排版方式设置值：normal,pre(里面的东西原样显示，包括空格),nowrap(不换行).边框Border-width:Border-color:Border-style:Border背景(上面的操作可以重复显示1px的图像，节省流量)列表位置布局其他。

DIV学习笔记

float属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局方式，我们的大部分div布局基本上都通过float的控制来实现布局float的可选参数为：none/left/right<div style="clear:both;"></div> 清除浮动。

如<div id="main" class="main_body"></div>class是设置标签的类id是设置标签的标识class属性用于指定元素属于何种样式的类。

如样式表可以加入.baobao { color: lime; background: #ff80c0 } 使用方法：class="baobao"id属性用于定义一个元素的独特的样式。

如一个CSS规则#binbin { font-size: larger } 使用方法：id="binbin"id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

id属性是定义标签的名字，这样javascript就可以利用id来调用标签的其他属性了，class 是定义改标签的CSS样式的。

绝对定位使用position属性来实现。

position用于设置对象的定位方式可用值：static/absolute/relative对页面中的每一个对象而言，默认position属性都是static。

如果将对象设置为position:absolute，对象将脱离文档流，根据整个页面的位置进行重新定位。

当使用此属性时，可以使用top,right,bottom,left即上右下左四个方向的距离值，以确定对象的具体位置，看如下CSS：新的元素ul，在导航之前，先简要了解一下ul元素。

CSS+DIV课程笔记

CSS+DIV课程笔记1-1、什么是CSS和DIV一、什么是CSSCSS的全称是：Cascading Style Sheet（层叠样式表），利用它可以对页面当中的文本、段落、图像、页面背景、表单元素外观等实现更加精确的控制，甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整。

更为重要的是，CSS真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点文件的风格，大大减小了更新站点的工作量。

二、什么是DIVDIV是层的标记，在DIV中可以放入网页中任何一种元素（如：文字、图片、……），,然后配合CSS，可以实现网页各个元素的精确定位。

三、CSS+DIV的优势1、网页加载速度快2、更容易被搜索引擎接受3、能实现更多动态效果4、后期维护方便四、传统html的缺点：（1）维护困难（2）标记不足（3）网页过“胖”（4）定位困难1-2、1-3、1-4、CSS样式的使用方法一、CSS样式的使用方法:1、行内样式：直接在html标记中使用style=”……”来设置属性，也就是直接将css代码嵌套在html标注中，像使用html标记一样使用。

2、内嵌式：只对本页面起作用。

加在<head></head>之间<title></title>代码下面，格式：<style type=”text/css”><!-- //防止低版本的浏览器不支持会直接将CSS显示出来。

加这上这个相当于html的注释，如果显示就直接注释掉。

--></style>3、链接式：引入外部一个css文件，加在<head></head>标签之间<title></title>下面如：<link href=”1.css” type=”text/css” rel=”stylesheet”>1-5、CSS样式的定义方法一、CSS样式的定义方法：1、自定义样式（类别选择器）2、标记定义（标记选择器）3、#号定义法（ID选择器）（1）自定义样式方法：.自定义名称｛font-size:12px;color:#FF0000;｝使用方法：<p class=”自定义名称”;> 效果 </p>（2）标记定义方法：p｛font-size:12px;color:#FF0000;｝注：通过标记定义好的CSS样式效果会自动应用给网页中所有使用此标记的元素或对象。

div+css参考笔记

先用div布局用CSS控制显示根据需要用有语义标签或无语义标签先用div布局用CSS控制显示根据需要用有语义标签或无语义标签编码与charset 不一致则会导致乱码如果id取名字用数字命名则会导致css文件无效如果不声明DOCTYPE 低版本IE 显示效果不一样盒子长width+border-left+border-right+margin-left+margin-right+padding-left+ padding-right盒子高height+border-top+border-bottom+margin-top+margin-bottom+padding-top+ padding-bottom盒子里面文本占地的大小等于width和height的大小与padding margin border无关padding会导致所占空间发生变化可以破坏布局解决方法为了不破坏布局在增加padding后要减少原来width和height的值父子div 竖直方向margin会重叠父DIV 与外界的margin值为子DIV的margin 子DIV与父DIV之间的margin 无效普通元素 margin会重叠值为重叠margin 的最大值块元素(block element)address - 地址blockquote - 块引用center - 居中对齐块dir - 目录列表div - 常用块级容易，也是CSS layout的主要标签dl - 定义列表fieldset - form控制组form - 交互表单h1 - 大标题h2 - 副标题h3 - 3级标题h4 - 4级标题h5 - 5级标题h6 - 6级标题hr - 水平分隔线isindex - input promptmenu - 菜单列表noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）ol - 排序表单p - 段落pre - 格式化文本table - 表格ul - 非排序列表内联元素(inline element)a - 锚点abbr - 缩写acronym - 首字b - 粗体(不推荐)bdo - bidi overridebig - 大字体br - 换行cite - 引用code - 计算机代码(在引用源码的时候需要)dfn - 定义字段em - 强调font - 字体设定(不推荐)i - 斜体img - 图片input - 输入框kbd - 定义键盘文本label - 表格标签q - 短引用s - 中划线(不推荐)samp - 定义范例计算机代码select - 项目选择small - 小字体文本span - 常用内联容器，定义文本内区块strike - 中划线strong - 粗体强调sub - 下标sup - 上标textarea - 多行文本输入框tt - 电传文本u - 下划线var - 定义变量text-decoration none 默认。

CSS+DIV学习笔记

文档类型定义：框架型过渡型严格型元素：例如：title 元素并不指<title>开始标签，也不是指</title>结束标签，也不是指开始标签和结束标签中的内容。

它是指的这样一个整体，开始标签、结束标签加它们包含的内容。

html{font-size:12px;} = body{font-size:1em;} em在css中没有固定大小。

rgb 颜色单位color:rgb(100,200,200); 红绿蓝参数值最小为0，最大为255.#rrggbb十六进制颜色单color:#ffff00; 红绿蓝Color Name浏览器所支持的颜色名称color:green;Xhtml语法1：所有元素的标签都必须闭合空元素例：<br />2：所有属性的属性值都必须用引号括起来3:所有标签都必须合理嵌套4：<！--注释内容-->Div是块状元素，可以定义其宽度和高度，可以独立占据一行，并且我说清楚，块状元素是我们使用率最高的一个极为简洁的元素，为什么这样说呢，它没有过多的默认样式，它是最适合我们划分网页，分隔网页的一个元素，所以我们以后在布局的时候用它用的是最多的。

Span使用率高，和div元素使用率不相上下，它是一个非常简洁的元素，它没有太多的默认样式。

不能定义宽度和高度。

两个span可以同居一行，也是必须居于一行的。

什么叫默认样式？例b：它中间的内容就会显示粗体。

结构与表现分离。

内嵌定义、内部定义、外部定义。

在这三个当中结构与表现做的最好的是哪个呢？外部定义做的最好。

为什么呢？它彻底的把用于表现页面的代码单纯的放在一个文件里。

它和其它页面不掺合，无论这个页面怎么改，你只要根据指定的选择符调用css文件当中的样式，只要css文件中的样式一改其它所有页面都会跟着改。

它们完全分离在不同的页面中。

内部定义也做到了这点，只不过是它要求只能是在当前的页面中各个元素间可以共用同一个样式代码，这样的进行分离，那这种分离呢只能在当前页面中各个元素之间的分离，而不是各个页面之间的分离，所以说它并不是最好的方式。

div css设计知识点

div css设计知识点<div css设计知识点>CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。

它为网页提供了丰富的样式和排版选项。

在这篇文章中，我们将介绍一些关于CSS的重要知识点，包括选择器、盒模型、布局、定位和响应式设计等。

选择器:选择器是CSS中用于选取元素并应用样式的方法。

常见的选择器包括标签选择器、类选择器、ID选择器和属性选择器等。

使用选择器可以精确地选择要样式化的元素。

1. 标签选择器：使用HTML标签名作为选择器，将样式应用于相应的元素。

例如，使用div选择器可以选择所有的<div>元素。

2. 类选择器：使用类名作为选择器，将样式应用于具有相同类名的元素。

例如，使用.class选择器可以选择所有class属性为"class"的元素。

3. ID选择器：使用ID名作为选择器，将样式应用于具有相同ID名的元素。

例如，使用#id选择器可以选择具有id属性为"id"的元素。

盒模型:盒模型是CSS中用于描述元素尺寸和布局的核心概念。

每个元素都被视为一个矩形框，包含内容区域、内边距、边框和外边距。

理解盒模型是进行网页布局和样式化的基础。

1. 内容区域：元素内部用于显示内容的区域，由元素的宽度和高度确定。

2. 内边距：内容区域与边框之间的空白区域，用于调整元素内容与边框之间的距离。

3. 边框：内容区域和内边距之间的线条，用于围绕元素显示边界。

4. 外边距：边框与相邻元素之间的空白区域，用于调整元素之间的距离。

布局:CSS提供了多种布局方法，用于控制元素在网页中的位置和排列。

1. 流式布局：元素按照其在HTML中出现的顺序自动从左至右流动，并在空间不足时换行显示。

2. 定位布局：通过将元素的定位属性设置为绝对定位或相对定位，可以精确控制元素的位置。

3. 弹性布局：使用CSS的flexbox属性可以创建响应式的布局，使得元素能够自动适应不同屏幕尺寸和设备方向。

div+css笔记

DIV+CSS学习笔记Div是用于存放内容（文字，图片，元素）的容器Css是用于指定在div中的内容如何显示，包括这些内容的位置和外观快速入门案例（体验案例）：Css.html:<link rel="stylesheet" type="text/css" href="my.css"></head><body><div class="style1"><img src="F:\photo\QzonePic\0.jpg" width="200"></div></body>My.css:.style1{/*宽度*/width:400px;height:300px;background-color:silver;border:1px solid red;margin-left:400px;margin-top:250px;padding-top:50px;padding-left:50px;}Css中常用的四种选择器1、类选择器（class选择器）基本使用.类选择器{属性名:属性值;…}2、.id选择器基本使用：#id选择器{属性名:属性值;…}案例：/*id选择器的使用*/#id1{background-color:silver;font-size:"40px";}3、Html元素选择器基本使用某个html元素{属性名:属性值;…}4、通配符选择器该选择器可以用到所有的html元素，但是其优先权最低基本使用*{属性名:属性值;…}☞css文件可以使用在各种文件（php、html、jsp、asp...）四个选择器优先级如下：id选择器 > class选择器 > html选择器 > 通配符选择器案例：我们希望所有的超链接（1）默认样式是黑色，24px。

div+css笔记

1 / 55一、全局样式@charset "gb2312"; /* CSS Document */ body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;} ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;} ul { list-style:none;} img { border:0px;} a { color:#05a; text-decoration:none;} a:hover { color:#f00;}清除浮动 .clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}二、cursor: pointer;三、overflow:auto;zoom:1鼠标上去是手形清除浮动，直接写到样式表里，zoom 是为了兼容 ie6内部元素都是浮动时，让父级自适应高度四、#search * { vertical-align:middle;} 这里兼容所用的，属于 css hack 部分内容，是定义这些元素都垂直居中对齐, 当需要垂直居中对齐时就采用这种写法就行了五、<img src="/i/eg_tulip.jpg" 时能出现替代文本 #hot_news h1<font-size:12px;> .hot news h1<font-size:12px;> dd 标题列表alt="上海鲜花港 - 郁金香" /> alt 属性是图片无法显示复合样式六、dl dt<dl><dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd>2 / 55</dl>七、搜索引擎优化 seo 有很多工作要作，其中最起码的优化是一个很关键的步骤。

div+css基础知识（1）

div+css基础知识（1）css控制页⾯的有：1、⾏内样式2、内嵌式3、链接式4、导⼊样式css选择器：1、标记选择器2、类别选择器3、ID选择器优先级：ID>类>标记css的⽂字效果font-family：字体font-size：⽂字⼤⼩color：⽂字颜⾊font-weight：⽂字粗细text-decoration：underline 下划线text-decoration:overline 顶划线text-decoration：line-through 删除线字母间距：letter-spacing（默认normal）对齐⽅式text-align：left 左对齐text-align：right 右对齐text-align：center 居中对齐text-align：justify 两端对齐line-height ⾏间距图⽚边框border-style：dotted 点划线border-style：dashed 虚线border-style：solid 实线border-color颜⾊border-width：宽度设置⽹页背景background-color 背景颜⾊background-image：url(xx.jpg) 背景图⽚background-repeat：repeat-y 垂直⽅向重复background-repeat：repeat-x ⽔平⽅向重复background-repeat：no-repeat 不重复背景图⽚位置background-position：30% 70% 距离左端30%，距离上端70%的位置background-position：300px 25px 距离左端300px,距离上端25px的位置background-attachment：fixed 固定背景图⽚综合：background：blue url(xx.jpg)no-repeat fixed 5px 10px;表格样式<caption></caption> 表格标题属性：caption-size：bottom；border：1px solid red；表格边框border-collapse：collapse；边框重叠th scope="row" ⾏的表头th srope="col" 列的表头超链接text-decoration：none 去掉超链接下划线a:link 正常浏览状态的样式a:visited 被点击过的超链接样式a:hover ⿏标经过时的样式a:active 点了那⼀刻的样式⿏标经过时⼿指a:hover{cursor:pointer;}。

div+css 学习笔记

一.建站流程平面设计---- 制作----- 程序1.平面设计：ps2.制作：div+css3.程序：asp；; php; jsp。

jQuery：制作和程序中常用二．简介html：超文本标记语言（目前常用版本xhtml，最新版本html 5.0）xml：可扩展标记语言xhtml：相当于html 4.0版本html标签<html></html> <head></head> <div></div> <p></p> <br />……常用标签：<div></div> <ul><li></li></ul> <dl><dt></dt><dd></dd><dl>CSS:（Cascading Style sheet）层叠样式表命名：一般以英文命名（首字母不能为数字）三．css 调用方法外联：在<head></head>之间调用<link href="css/css.css" rel="stylesheet" type="text/css" /> 内联：写在<head></head>之间<style rel="stylesheet" type="text/css" ></style>内嵌：嵌在标签里style=" "四．属性1. class （.）id （#）2.属性写在花括符里，每条用逗号隔开（内嵌style=" "）3.常用weight：宽height：高border: 边线margin：边距（margin：0 auto；居中）padding：填充color：字体颜色font-size: 字体font-family：字体float：浮动（使两个div 在同一行上）background:背景4.边线border：1px solid #ccc；border-top：1px solid #ccc；border-left：border-right：border-bottom：solid:实线dashed:虚线dotted: 点线double:双线5.边距margin-top:10px;margin-left:10px;margin-right:10px;margin-bottom:10px;简写margin：10px；margin：10px 20px 30px 40px; (由上面开始顺时针方向)margin：10px 20px; （上下10px 左右20px）边距还可以是负数6.填充padding-top:10px;padding-left:10px;padding-right:10px;padding-bottom:10px;简写padding：10px；padding：10px 20px 30px 40px; (由上面开始顺时针方向)padding：10px 20px; （上下10px 左右20px）7.文字font-family:"黑体", Arial;font-size：12px; 文字大小color:#555;文字颜色font-weight: bold;line-height：22px; 行高text-indent:2em; 首行缩进（单位em首行缩进）text-align:center; 水平对齐word-spacing;英文单词letter-spacing:1px;汉字或字母间距font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）简写font:italic bold 12px/22px arial, "宋体";文字两端对齐最后一行左对齐text-align:justify;text-justify:inter-ideograph;文字超出显示省略号text-overflow:ellipsis;white-space:nowrap;*white-space:nowrap;overflow:hidden;8.背景background-color：#fff；背景颜色background-image：url(../images/index2_01.png); 背景图片background-repeat：no-repeat; 背景不重复值：repeat-x x轴重复repeat-y：y轴重复background-position：10px 20px；（离左边10像素上边20像素）它的值可以是left right center top bottombackground-attachment:fixed; 背景浮动scroll(默认值)背景滚动简写：background: #fff url(../images/index2_01.png) no-repeat 10px 20px fixed;9.大小weight：宽height：高值可以的auto （自动搞）%；例如：weight:20px; weight:auto; weight:80%;min 最小值max 最大值例如：min-height：最小高度10.内隐藏属性overflowvisible 默认值。

DIV+CSS学习要点整理

font 字体 color 颜色 font-size 字体大小 text-align 文本位置 background 背景 margin 外补丁 padding 内补丁 border 边框 float 布局 CSS 布局常用的方法：float:none|left|right 取值： none: left: right: position:static|absolute|fixed|relative 取值： static: 循 HTML 定位规则 absolute: left，right，top，bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

如果不存在这样的父对象，则依据 body 对象。

而其层叠通过 z-index 属性定义 fixed: (absolute)方式。

但是要遵守一些规范 relative: left，right，top，bottom 等属性在正常文档流中偏移位置  选择合适的标签（区别与 table 布局的习惯..）布局用：<div></div>；文本用：<h1～6></h1>，<p></p> 图片用：<img></img> 列表用：<ul><ol><li><dl><dt><dd> 数据用：<table></table> 其他的：form，input，select标签选择器类别选择器(.class)ID 选择器(#id)集体声明:并列关系<style type=“text/css” > ｛body,td,th,#header,.one{color:blue;font-size:12px;} </style> 嵌套声明:从属关系 <style type=“text/css” > P h1{color:blue;font-size:14px;} </style> 混合声明:并列及从属关系 <style type=“text/css” > P H1,#header ul{color:blue;font-size:12px;} </style> 并且同一个 HTML 元素可以具有多个类，每个类中间用空格分开： .center {text-align: center} .col{color:green;} <p class="center col">这个段落将会居中并且绿色</p> 注意：类名的第一个字符不能使用数字！派生选择器功能就是根据文档的层级关系来确定某个标签的样式。

div+css 知识汇总

三、CLASS和ID的区别
id是先找到结构/内容，再给它定义样式；
class是先定义好一种样式，再套给多个结构/内容。
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。
class(类)在同一个html网页页面可以无数次的调用相同的class类
只要你这个链接被点击过了，就会永远是visited，除非清空临时文件，明白否？
另外，如果你用的是空链接的话，只要点击过一个其他空链接也都会变成visiteN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式
＜/span>＜span>标识符允许你将一个段落分成不同的部分
clear 属性
如果您希望文本流在内联表格或图像的下一行继续输出，请使用 clear 属性，该属性有三个可选的值：left、right 或者 all，每个值都代表一个边界或两边的边界。
五、HTML <p> 标签
<p> 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。
一、鼠标事件知识点：
:visited 已经访问过的链接，被访问过的链接会记录在ie的临时文件当中
:hover 这才是鼠标悬停事件
:link 一般的链接
:active 鼠标点下去的刹那会发生的事件
严格来说，不能成为事件，这些是css的伪类，可以附加在任何标签后面，比如td:hover
但是由于ie的不支持，这几个伪类只能用在a上面。
三、字间距
字间距设置用：letter-spacing:4pt;即可

课堂笔记3-div+css

a {color: red;}这样凡是使用到<a> 标签的地方颜色都会红色。

那么当我们鼠标移到链接上面去可以改变文字颜色吗？可以的。

在<head></head> 里面加入</style>只要在html 一些标签中使用class="title" 就可以了，例如<p class="title"></p>#title3 {color: blue;}<p id="title3"> ID 表示方法</p>a:hover {color: blue;}看到了吧，a:hover 就是表示鼠标移到上面去的时候显示的颜色。

还可以加入文字大小font-size: 19px;也可以去掉下划线，text-decoration: none;-------当我们点击过的链接也可以显示别的颜色，告诉浏览者你已经点击过了。

a:visited {color: #cccccc;}==========================如果同一个页面需要多个<a> 的样式应该如何？例如一个页面这个地方我需要别的颜色，看我这样定义多个 a 样式。

div+css学习总结

在一个元素中不能有两个及以上 id 选择器，但可以有多个 class 选择器
2.8 将类选择器和 id 选择器相同部分的内容整合
2.9 课堂练习
练习 1
html: CSS:
练习 2
html： CSS：
3 块元素和行内元素 3.1 概念
3.2 各自存放的内容及相互转换
4 CSS 核心内容 4.1 流
HtmlPage1.html:
my.css:
2.2id 选择器
my.css:
2.3html 选择器
2.4 综合练习：
HtmlPage1.html: my.css:
第二天
2.5 通配符选择器
2.6 父子选择器
页面效果： HTML: CSS:
2.7id 选择器和类选择器同时修饰
html： CSS：注：重叠的部分是以 id 的为准，如颜色样式，其他不重叠的部分还要正常显示 class 中的部分.
（一）
（二）
对应页面：
（一）（二）
4.7 清除浮动 4.8 定位
relative
html CSS
absolute
static
fixed
（只能相对 body 定位）
5 仿 sohu 页面
图片在 div 中居中的方法
小知识：配置 eclipse 模板：
4.2 CSS 的盒子模型
案例：
页面： HTML： CSS：
4.3 盒子模型综合案例
该案例可以当做一个模板来使用，很多大型网站都有用到。
CSS：
HTML：
4.4. 盒子模型练习
CSS：
html
4Байду номын сангаас5 浮动

《2天轻松驾驭DIV+CSS》笔记

《2天轻松驾驭DIV+CSS》笔记《2天驾驭DIV+CSS》1、div+css 的叫法是不准确的，标准叫法是XHTML+CSS；2、table的目的是存储数据，div是为了架设页面结构，两者职能不同，没有谁优谁劣。

3、W3C是World Wide Web Consortum的缩写，中文为W3C 组织或万维网联盟，是出一系列网页标准的，包含结构、表现和动作标准。

4、四种样式的优先级按照“就近原则”：行内样式>内嵌样式>链接样式>导入样式，建议使用链接样式。

5、HTML页面中的元素就是通过CSS选择器进行控制的，有四种：标签、ID、类、通用选择器。

①标签选择器：就是一般的标签；②ID选择器（id）：一个HTML页面只能使用一次，用“#”引用；③类选择器(class)：一个标签可以用多个类选择器，不同值用空格分开，用“.”引用；④通用选择器：对整个网页中的标签进行样式定义，用“*”引用。

6、无论什么样的选择器，只要有公共的CSS代码就可以用“选择器的集体声明”，起到精简代码的作用（类似小学的“提取公因式”）。

7、选择器的嵌套，如：#div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/8、CSS命名规则：要让不懂代码的人看了也知道这块起什么作用。

（以后选择第二个后面单词首字母都大写）9、HTML标签包含块状元素和内联元素（div和p标签是块状元素，a标签是内联元素）①块状元素：可容纳内联元素和其他块状元素，排斥与其他元素位于同一行，width 和height起作用。

②内联元素：只能容纳文本或其他内联元素，允许其他内联元素同位一行，但width 和height不起作用。

如果要让宽高起作用，可以把内联元素转化为块状元素，语句：display：block；10、【第二课】浮动#redBlock{margin:20px 0 0 20px; /*上右下左*/float:left; /*两个都加float才能处于同一行*/}#blueBlock{float:left;}11、IE6双倍边距BUG出现要满足以下三个条件：●要为块状元素；●要左侧浮动；●要有左外边距（margin-left）●【解决办法】在css属性中加入“display：inline；”12、clear:both：清除某一方块对下面产生的作用（即影响），但不会影响它本身的浮动。

HTML+CSS+DIV笔记

HTML<body>标记的主要属性：*bgcolor:设置页面背景颜色，如：bgcolor=”#CCFFCC”*background:设置页面背景图片，如：background=”images/bg.gif”*bgproperties=”fixed”:使背景图片不随着滚动条的滚动而滚动*text:设置文档正文的文字颜色，如：text=”#FF6666”分段标记：<p>段落文字<p>正文标题：<h1>1号正文标题文字<h1><h2>2号正文标题文字<h2><h3>3号正文标题文字<h3><h4>4号正文标题文字<h4><h5>5号正文标题文字<h5>水平分隔线：<hr>注释标记：<!—注释文字-->文档头部信息：<title>:设置窗口标题<link>:建立到外部文件（主要是CSS外部样式表）的链接<link rel=”stylesheet” href=”mystyle01.css” type=”text/css”><style>:设置网页的内部样式表<meta>:设置当前页面的元数据信息文本格式：<b>:粗体<i>:斜体<del>:文字中部划线表示删除<ins>:文字下划线表示填充内容<sub>:下标<sup>:上标<pre>:原样显示，保留空格和换行字体：<font>标记的属性：Face:设置字体类型Size:设置字体大小Color:设置字体颜色列表：有序列表：<ol type=”a”><li>列表条目</li><li>列表条目</li></ol>无序列表：<ul><li>列表条目</li><li>列表条目</li></ul>表单：<form action=”/bbs/login.jsp” method=”post”>用户名：<input type=”text” name=”username”><br>密码：<input type=”password” name=”psw”><br><input type=”submit” value=”提交”><input type=”reset” value=”重置”></form>action中的信息表示表单信息将提交到何处method中的信息表示表单信息上传到服务器的方式表单组建：单行文本输入框：<input type=”text” name=”age” value=”0”>密码输入框：<input type=”password” name=”psw”>单选按钮：<input type=”radio” name=”gender” value=”male” checked>男<input type=”radio” name=”gender” value=”female”>女提交按钮：<input type=”submit” name=”submit” value=”提交”>CSSCascading Style Sheets内嵌样式（Inline Style）：以属性的形式直接在HTML标记中给出，用于设置该标记所定义信息的现实效果内嵌样式只对其所在的标记有效<body style=”background-color;#coffee;”><P style=”font-size:16px;color:red”>第一段文字</p><P style=”font-size:italic;font-size:20px;color:#bb22cc”>第二段文字</p></body>内部样式表（Internal Style Sheet）在HTML页面的头信息元素<head>中给出，可以同时设置多个标记所定义信息的现实效果内部样式表只对所在的网页有效<html><head><style type=”text/css”>body{background-color:#coffee}p.mystyle{font-size:20px;color:ble}}p.mystyle{font-size:40px;color:#dd44aa;text-align:center}</style></head><body><p class=”mystyle1”>第一段文字</p><p class=”mystyle1”>第二段文字</p></body></html>外部样式表（External Style Sheet）外部样式表将样式设置保存到独立的外部文件中，然后在要使用这些样式的HTML页面中进行引用外部样式表为纯文本文件，后缀“.css”外部样式表可被应用到多个页面中m1.css如下：body{background-color:#coffee}p.mystyle{font-size:20px;color:ble}}p.mystyle{font-size:40px;color:#dd44aa;text-align:center}ex.html如下：<html><head><link href=”m1.css” rel=”stylesheet” type=”text/css”></head><body><p class=”mystyle1”>第一段文字</p><p class=”mystyle1”>第二段文字</p></body></html>样式的优先级：内嵌样式、内部样式表、外部样式表、浏览器缺省样式CSS基本语法：CSS样式主要由三部分组成：选择器、属性名、属性值例如：P{color:#1166cc}h2{text-align:center; color:red}p.mystyle1{font-size:20px; color:blue}DIV标记DIV（division）是一个HTML标记，用于表示一块可现实HTML信息的区域如果不适用任何CSS样式设置的话，div标记的效果与分段标记p基本相同<div>第一段文字</div><div align=”center”>第二段文字</div>使用CSS+DIV可以实现结构化的页面布局。

CSS课堂笔记

1CSS1.1div、span、p标签这三个标签都可以看作是一个容器, 可以用来包裹其他的 html内容, 被包裹起来的内容形成了一个组, 可以通过css样式对这一组的内容统一设置样式.元素的类型:块级元素: 默认情况下独占一行的元素, 如: div p h1~h6 br hr行内元素: 默认情况下, 多个行内元素可以处在同一行。

如：span，input，font。

1.2CSS概述CSS：层叠样式表，可以用来美化html页面，通过CSS设置样式，可以实现展示数据的html 代码和设置样式的CSS代码的分离，增强了网页的显示能力！1.3在html页面中引入css样式的方式(1)通过标签上的style属性引入css样式大多数标签都可以具有style属性, 可以通过style属性为当前标签设置样式这种方式设置样式不推荐大量使用, 会造成页面结构的混乱, 不利于后期的维护及扩展.(2)通过style标签引入css样式在head标签内部, 可以提供一个style标签, 在style标签内部可以选中元素进行修饰!这种方式是将所有的css代码放在一个style标签内部统一进行管理, 初步的实现了html 代码和css代码的分离.(3)通过链接引入外部的css文件通过head标签下的link标签可以引入外部的css文件这种方式是将所有的css代码放在一个独立的文件中进行统一管理, 真正的实现了html 代码和css代码的分离.1.4选择器所谓的选择器可以帮助我们在html中选中想要修饰的标签进行修饰的技术1.4.1基本选择器(1)标签名(元素名)选择器通过标签的名称选中指定名称的标签进行样式的修饰格式: 元素名{}, 如: span{}<span></span><span></span>(2)类(class)选择器通过标签上的class属性, 可以为标签设置所属的类, 所有class值相同的标签则为一类, 可以通过标签名选择器选中这一类的标签进行修饰.格式: .类名{ css属性 }, 如: .c1{}<div class=”c1”></div><p class=”c1”></p><span class=”c1”></span>(3)I D选择器通过标签上的id属性, 可以为标签设置所属的编号, id值的特点是在整个html中是独一无二的. 可以通过id值选中想要修饰的标签格式: #id值{ css属性 }, 如: #d1{}<div id=”d1”></div>1.4.2扩展选择器(1)后代选择器在父选择器选中的元素内部, 再选中指定的后代元素进行修饰格式: 父选择器后代选择器{ }如: 选中div下所有的后代span → #d1 span{}(2)子元素选择器在父选择器选中元素的内部, 选中指定的子元素进行样式的修饰格式: 父选择器>子元素选择器{ }如: 选中div下所有的子元素span → #d1>span{}(3)分组选择器可以将多个选择器选中的元素统一来设置样式选择器1,选择器2,选择器3,…选择器n{}(4)属性选择器可以通过属性条件选中元素进行修饰格式: 选择器[属性条件..]{}如: 选中所有的普通文本输入框→ input[type=’text’]{}<input type=”text” name=”xx”/><input type=”submit” name=”xx”/>(5)相邻兄弟选择器如果两个元素具有相同的父元素, 并且是紧挨着的, 这两个元素就是相邻兄弟, 可以通过相邻兄弟选择器选中A元素后的B元素.格式: 大哥+小弟{ }(6)伪元素选择器伪元素选择器选中的不仅仅是元素本身, 还包括元素的状态状态分为如下几种::link 表示元素未被点击时的状态:hover 表示光标(鼠标)悬停时的状态(掌握!):active 表示元素被点击时的状态:visited 表示元素被点击之后的状态1.5外边距/边框/内边距margin –外边距margin-top:30px;margin-left: 30px;margin-bottom: 30px;margin:10px 20px 30px 40px;/* 上右下左 */margin:10px 20px 30px;/* 上左右下*/margin:10px 20px;/* 上下左右 */margin:10px;/* 上下左右 */注意: 垂直外边距合并的现象:外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。