div+css笔记

合集下载

前端css知识笔记

前端css知识笔记前端CSS知识笔记。

CSS（层叠样式表）是前端开发中的一项重要技术，用于控制网页的样式和布局。

下面是一份关于前端CSS知识的笔记，涵盖了常用的CSS属性和技巧。

一、CSS选择器。

1. 标签选择器，选择指定标签的元素，例如p、div、h1等。

2. 类选择器，选择具有相同类名的元素，以"."开头，例如.class。

3. ID选择器，选择具有相同ID的元素，以"#"开头，例如#id。

4. 属性选择器，选择具有指定属性的元素，例如[type="text"]。

5. 伪类选择器，选择具有特定状态的元素，例如:hover、:active等。

6. 伪元素选择器，选择元素的特定部分，例如::before、::after等。

二、CSS盒模型。

1. 内容区域（content），元素的实际内容。

2. 内边距（padding），内容区域与边框之间的空间。

3. 边框（border），内边距与外边距之间的边框线。

4. 外边距（margin），边框与相邻元素之间的空间。

三、CSS布局。

1. 相对定位（relative），相对于元素原本位置进行定位，不影响其他元素的位置。

2. 绝对定位（absolute），相对于最近的已定位父元素进行定位，若无则相对于文档进行定位。

3. 固定定位（fixed），相对于浏览器窗口进行定位，元素固定在页面上的位置不变。

4. 浮动（float），使元素脱离文档流，可以实现多列布局。

5. 弹性布局（flexbox），通过设置容器和项目的属性，实现灵活的布局效果。

四、常用CSS属性。

1. 字体属性，font-family、font-size、font-weight等。

2. 文本属性，color、text-align、text-decoration等。

3. 背景属性，background-color、background-image、background-size等。

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的介绍div是用于存放html元素，文字，图片，视频的元素css 是层叠样式表，用于指定div中的内容的样式原理图：div+css的快速体验案例：test.html：<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN"><html><head><title>div+css入门案例</title><link href="my.css" type="text/css" rel="stylesheet"/> </head><body><div class="style1"><table><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr > <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> </table></div></body></html>my.css中指定：.style1{width:300px;height:200px;border:1px solid red;margin:100px 0px 0px 200px;}.style1 table{border:1px solid black;width:298px;height:190px;}.style1 table td{border: 1px solid black;text-align:center;}<span style="font-size:30px;color: blue;">栏目一</span><br/> 从使用span元素我们可以看到，css的基本语法<元素名 style=”属性名：属性值；属性名：属性值2；”/> 元素可以是html的任意元素：属性名：属性值要参考 w3c组织给出的参考文档◆使用css可以统一网站的风格css分类：外部css 内部css<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>css1.html</title><meta http-equiv="keywords" content="杨萌,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8">  <style type="text/css">.style1{}</style> font-size: 20px; color:red; font-weight: bold; font-style: italic;</head><body><span class="style1">栏目一</span><br/> <spanclass="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> <span class="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> </body></html>使用滤镜<style type="text/css">/*使用滤镜将图片变成黑白色*/img {}</style>/*使用滤镜*/a:link img { filter:gray;} filter:gray; a:hover img{ } filter:"";</style></head><body><a href="#"><img src="images/1.jpg" width=170pxborder=1/></a> <a href="#"><img src="images/2.jpg" width=170px border=1/></a> <a href="#"><img src="images/3.jpg" width=170px border=1/></a> <a href="#"><img src="images/4.jpg" width=170px border=1/></a> <a href="#"><img src="images/5.jpg" width=170px border=1/></a> <a href="#"><img src="images/6.jpg" width=170px border=1/></a> <a href="#"><img src="images/7.jpg" width=170px border=1/></a> </body>1．类选择器的基本语法:.类选择器名{属性名:属性值;…}.style1{font-weight: bold;font-size: 20px;background-color: pink;}<link rel="stylesheet" href="my.css" type="text/css"></link> </head><body><span class="style1">新闻一</span><span class="style1">新闻二</span><span class="style1">新闻三</span><span class="style1">新闻四</span><span class="style1">新闻五</span></body>2．id选择器基本语法：#id选择器名{属性名：属性值；}案例：#style2{font-size: 30px;background-color: skyblue;}在html文件中如果要引用id选择器，则<元素 id=‘id选择器的名称’></元素><span id="style2">这是一则重要的新闻</span>3．Html选择器 /*html选择器body(button,input,form...)*/ body{color:silver;}结论：当一个元素同时被id选择器类选择器 html选择器修饰时，优先级为： id选择器>类选择器>html选择器>通配符选择器<span class="style1" id="style2">这是一则重要的新闻</span> 案例：假设，我们希望所有的超链接（1）默认样式是黑色，24px，没有下划线（2）当鼠标移动到超链接时，自动出现下划线（3）点击后，超链接变成红色。

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 第一天：1初识CSS1.1介绍1.2原理图1.3快速案例test.html:1.4三个时期主要容1.6必要性案例：使用<span>元素1.7思考（滤镜——图片变成黑白色）2 CSS的选择器——通配符，html，类，idHtmlPage1.html:my.css:my.css:2.3html选择器2.4综合练习：HtmlPage1.html:my.css:第二天2.5通配符选择器2.6父子选择器页面效果：HTML:CSS:2.7id选择器和类选择器同时修饰html：CSS：注：重叠的部分是以id的为准，如颜色样式，其他不重叠的部分还要正常显示class中的部分.在一个元素中不能有两个及以上id选择器，但可以有多个class选择器2.8将类选择器和id选择器相同部分的容整合2.9课堂练习练习1html:CSS:练习2html：CSS：3 块元素和行元素3.1概念3.2各自存放的容及相互转换4 CSS核心容4.1流小知识：配置eclipse模板：4.2 CSS的盒子模型案例：页面：HTML：CSS：4.3 盒子模型综合案例该案例可以当做一个模板来使用，很多大型都有用到。

CSS：HTML：4.4. 盒子模型练习CSS：html4.5 浮动第三天容回顾4.6浮动理解强化代码：（一）（二）对应页面：（一）（二）4.7清除浮动4.8 定位relativehtmlCSSabsolutestaticfixed（只能相对body定位）5 仿sohu页面图片在div中居中的方法。

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笔记

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 笔记

Div+css介绍Div+css是什么？1、传统页面table布局2、Div+css基本思想：数据和样式要分离Div+css 是一种目前比较流行的网页布局技术原理图如上可以这样理解div+css：Div 是用于存放内容（文字图片元素...）的容器Css 是用于指定放在div中的内容如何显示、包括这些内容的位置和外观快速入门案例：一个html 一个或者多个cssHtml:<html><head><title>css入门小案例</title></head><link rel=”stylesheet” type=”text/css” href=”xx.css”> //link 引入什么什么文件<body><div class=”style1”><img src=”xx.jpg”></div></body></html>Css:.style1{Width:400px;Height:300px;Background-color:silver;Border:1px solid red;Margin-left:400px;Margin-top:250px;Padding-top:20px;Padding-left:40px;}Css使用的必要性：css使用的基本语法：选择器{ //选择器有：类选择器等等其他选择器属性1：属性值；属性2：属性值；....}栏目风格不同的页面统一设置他们的样式怎么办<span>元素通常用于存放小块内容代码：<html><head><title>css入门小案例</title></head><link rel="stylesheet" type="text/css" href="cssrumen.css"/><body><span class="s1">栏目一</span><span class="s2">栏目二</span><span class="s3">栏目三</span><span class="s4">栏目四</span></body></html>Css:.s1{color:blue;font-size:10px;font-style:italic;font-weight:bold;}.s2{color:blue;font-size:10px;font-style:italic;font-weight:bold;.s3{color:blue;font-size:10px;font-style:italic;font-weight:bold;}.s4{color:blue;font-size:10px;font-style:italic;font-weight:bold;}Css中常用的四种选择器：1、类选择器（class选择器）基本使用：.类选择器名{ //前面的点不能少属性名：属性值......}2、id选择器基本使用：#id选择器{属性名：属性值}案例：#id2{background-color:silver;font-size:40px;}3、html元素选择器某个html元素{属性名：属性值}案例：/*html选择器*/body{color:orange;}4、通配符选择器*{Margin-top:0px;Margin-left:0px;或者margin:10px 30px 40px 1px;/*margin可以写一个值，（上右下左都用使用）如果是两个值（上下左右）如果是三个值（上左右下）*/}该选择器可以用到所有的html元素，但是其优先权最低基本使用：*{属性名：属性值}※四个选择器优先权Id选择器>calss选择器>html选择器>通配符选择器※css文件可以使用在各种文件中（php,html,jsp.asp...)案例：我们希望所有的超链接：（1）默认样式是黑色，24px没有下划线（2）当鼠标移动到超链接时，自动出现下划线（3）点击后，超链接变成红色。

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可以实现结构化的页面布局。