border虚线

Css介绍 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 Css笔记 字体相关属性： font (字体) color (颜色) font- (字体-加粗) font-size (字体-大小) font-weight (字体-类型) text-shadow (文本的阴影效果) line-height (行间的距离,行高) letter-spacing (字体间的距离) text-align (文本-水平对齐) direction (内容显示方向) 背景相关属性： Background (背景) background-attachment (固定到背景) background-color (背景-颜色) background-image (背景-图片) background-position (背景-图片-位置) background-repeat (背景-是否及如何重复背景图像) background-size (背景-大小) 边框相关属性： border (边框) border-color (边框-颜色) border-style (边框-样式) border

CSS的简述 1.什么是CSS Cascading Style Sheet 层叠级联样式表 CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的,应用优先级高的，不冲突的样式规则共同作用。 2.CSS的优势 内容和表现分离 网页结构表现统一，可以实现复用 外 样式十分的丰富 建议使用独立于html的css文件 利用SEO，容易被搜索引擎收录！ 3.CSS的发展史 CSS1.0 CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画…. 浏览器兼容性~ CSS的使用方式 1.内联样式：把CSS样式嵌入到html标签当中，类似属性的用法 <h1 style= "color:red;" >我是标题</h1> 好处:可以单独什么某个元素样式，缺点：不利于样式重用 2.内部样式：在head标签中使用style标签引入css <style> h1 { color : green ; } <

一、 盒模型的概念和组成 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都以拥有可像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。 1） padding的使用方法 填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。 用法： 1）用来调整子元素在父元素中的位置关系。 注：padding属性需要添加在父元素上。 3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。 属性值的4种方式： 四个值：上 右 下 左 {padding:10px 20px 30px 40px;} 三个值：上 左右 下 {padding:10px 20px 30px ;} 二个值：上下 左右 {padding:10px 20px ;} 一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/ 说明：可单独设置一方向填充，如：上方向padding-top:10px; 右方向pahdding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px; 3） margin的使用方法 边界：margin,在元素外边的空白区域，被称为边距。 margin-left

第七章　　基本视觉格式化 正常流（没有浮动和定位元素）、非替换元素（包含在文档中）、替换元素（用作其它内容的占位符，如img）、块级元素（会和其它元素形成换行，如div）、行内元素（span之类的元素）和根元素（位于文档树顶端的元素，在HTML文档中就是元素html） 水平格式化 <p style="width:200px;">wideness?</p>　　/*200px指的是内容区的宽度*/ 水平格式化七大属性：margin-left、border-left、padding-left、width、padding-right、border-right和margin-right，其中有3个属性可以设置为auto：元素内容的宽度width及左右外边距 如果设置width、margin-left或margin-right的某个值为auto，而余下两个属性指定为特定值，那么设置为auto的属性会自动确定所需长度，从而使元素框等于父元素的width 如果这3个属性都设置为特定值（值不合理，且过分受限），此时会把margin-right强制取为auto 某个外边距和width设置为auto，设置为auto的外边距会减为0 3个值都设置为auto，两个外边距都自动为0，width完全填充其包含块 外边距可以设置为负数（按反方向偏移） 如果width、内边距和外边距设置为百分数值

元素的背景是内容、内边距和边框区的背景。 css中：width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 bootstrap中：width 和 height 指的是包含border、padding、element的框的总尺寸,不包含margin。 margin、padding、border四值顺序：top right bottom left。值复制遵循对等原则。 length：规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。%：定义基于父元素宽度的百分比。此值不会如预期地那样工作于所有的浏览器中。 padding-top 该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，不允许负值。padding-bottom同理。 padding-left该属性设置元素左内边距的宽度。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现.padding-right同理。 外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。a. 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。b.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开

盒子模型 页面布局的三大核心，盒子模型，浮动和定位 网页布局过程 先准备好相关网页元素，网页元素基本都是盒子Box 利用CSS设置好盒子样式，然后放到相应位置 往盒子里面装内容 盒子模型的组成 所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是 一个盛装内容的容器，CSS盒子包括：边框、外边距、内边距、和实际内容 border：边框 组成：边框宽度、边框样式 、边框颜色 border：border-width|border-style|border-color 属性 作用 border-with 定义边框粗细，单位是px border-style 边框样式：solid：实线边框、dashed：虚线边框、dotted：点线边框 border-color 边框颜色 边框简写 border：1px solid red； #没有顺序 表格边框的粗细 border-collapse：collapse； collapse：合并 border-collapse：collapse；表示相邻边框并在一起 【注意】 边框会额外增加盒子的实际 大小。两种解决方案 测量盒子大小的时候不量边框 如果测量的时候包含了边框，则需要width\height减去边框宽度 content：内容 padding：内边距 用于设置内边距，即边框与内容之间的距离 属性 作用 padding-left

制作过网页的人都有为画线而烦恼的经历，先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。下面把通过实例来说明其应用技巧。 1、给文本加边框 上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的。 第一个边框的CSS代码是：style="border:thin solid red"； “border”后面的三个参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红色）。 边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线）， 此外，也可以自定义宽度，如：1pt、5px、2cm等。 边框线的类型有九个确定值：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid（实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅）， 注意：如果系统不支持这些边框的属性值，那么“dotted”、

(特别鸣谢郭欣新同学提供书籍：《精通CSS+div网页样式与布局》) 一、css语法构成:选择器、声明（属性：值） 　　1、选择器：标记选择器(h1)、类别选择器(h1.className)、ID选择器(h1#idName)，选择器的优先级由低到高为标记、类别、ID。 　　2、声明：键值对，键对应属性名称、值对应属性值。 二、css继承：子标签无条件得到父标签的css值，如果css属性相同，则子标签css属性覆盖父标签css属性。 三、引入css方式：内联式、链接式、导入式。建议使用链接式，避免使用内联式。 　　1、内联式：将css声明写在html标签的style属性里。 　　2、链接式：在html页面<head>中写入<link rel='stylesheet' type='text/css' href="test.css"> 　　3、导入式：在html页面<head>中写入<style>@import url(test.css)</style> 四、css属性之字体篇 　　1、font-family:字体集。font-family:黑体,宋体; 　　2、font-size:字体大小。font-size:16pt; 字体单位（inch、cm、mm、pt、pc），pc = 12pt，常用pt。 　　3、color:字体颜色。color:#FFFFFF; 颜色统一用RGB格式

没看 CSS （ Cascading Style Sheet ）之前，一直以为 CSS 挺难的，在网页上看到的那些代码一点都不知道代表些什么，晚上花了几个小时看了一下，发现也不过如此，而且好像属于超级简单的那种。有这种感觉不知道 CSS 真的是这样还是由于我孤陋寡闻的缘故。 其实我感觉学 CSS 只要知道 CSS 的类型就够了，然后看到不认识的标签 google 一下就可以了。不过如果要自己设计还是要了解一些里面的具体内容。计算机学到现在，我越来越感觉不管是做软件还是弄网站，就像是在玩搭积木的游戏，先要了解你要做什么东西，就像孩子们的志愿，我要造长城还是搭一个竖型塔亦或只是键一个小木屋就够了，然后孩子们会根据手上的积木材料来决定怎么去搭建自己的梦想，就像是我们根据不同的语言功能去拼凑我们的软件。感觉知识的模式都是这样，高中学做数学题目我也有这个感觉，我很少用参考书，一般总是先看看书本，给我提供了多少的定理、公式等，然后碰到题目就去套，总有一个会是正确的。运用知识不就是套用自己的学到过的知识的过程吗？想到这里我很后悔小时候没有玩过搭积木的游戏了！记得那个时候我应该还不知道搭积木是什么东西吧，不知道从什么时候才开始知道有这个名词，就是感觉等自己很大以后才知道！ 言归正传了， CSS 主要包括 3 种样式类型，即类选择器样式、 ID 选择器样式、重定义标记样式。 类选择器样式定义如下：

认识盒子模型 每个矩形都有元素的内容、内边距（padding）、边框(border)、外边距(margin)组成。 （1）网页是有多个盒子嵌套排列的结果。 （2）内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 （3）外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。 （4）虽然盒子模型拥有内边距、边距、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些元素。 边框属性 设置内容 样式属性 常用属性值 上边框 border-top-style:样式； border -top-width:宽度； border-top-color:颜色； bordet-top:宽度 样式 颜色 ； 下边框 border-bottom-style:样式； border-bottom-width:宽度； border-bottom-color:颜色； border-bottom:宽度 样式 颜色； 左边框 border-left-style:样式； border-left-width:宽度； border-left-color:颜色； border-left:宽度 样式 颜色； 右边框 border-right-style:样式； border-right-width:宽度； border