• css基础知识：

    • css样式表的定义

    • css：（Cascading Style Sheets）层叠样式表；

  • 分类及位置：内部样式-head区域style标签里面

    • 外部样式-link调用

    • 内联样式-标签元素里面

  • css内的注释：/*注释内容*/

  • css样式表的语法

    • 用颜色名表示

    • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, 
      　　olive, orange, purple, red, silver, teal, white, and yellow

    • 有17个预先确定的颜色，它们是

    • CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。

    • 盒子名或者标签名{属性:值;}

    • CSS中几种颜色的表示方法

- **用十六进制的颜色值表示(红、绿、蓝)**
  - `#FF0000`或者`#F00 ` - **用rgb(r,g,b)函数表示**
  - 如：`rgb(255,255,0)`- **用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)**
  - 如：`hsl(120,100%,100%)`,色调0代表红色，`120`代表绿色，`240`代表

蓝色

 - **用`rgba(r,g,b,a)`函数表示 **
   - 其中`a`表示的是改颜色的透明度，取值范围是`0~1`，其中`0`代表完全透明- **用hsla(Hue,Saturation,Lightness,alpha)函数表示**
  - 色调、饱和度、亮度、透明度

  • 例子

   <div style="position:absolute;top:0px">
        <div style="">background-color:gray</div>
        <div style="">background-color:#F00</div>
        <div style="">background-color:#ffff00</div>
        <div style="">background-color:rgb(255,0,255)</div>
        <div style="">background-color:hsl(120,80%,50%)</div>
        <div style="">background-color:rgba(255,0,255,0.5)</div>
        <div style="">background-color:hsla(120,80%,50%,0.5)</div>
    </div>

  • 内部样式表

    • 当单个页面需要设置样式时，就应该使用内部样式表。

    • 使用 <style></style>标签在文档<head></head>里面定义内部样式表

<head>
 <style type="text/css" >
  p{color:red;}
 </style></head>

  • 从外部引入到样式分为两种：（注意写在head标签里面）

  • 当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个css文件，然后引用到我们的页面中。

  • Link样式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>

  • Html式： <style type="text/css">@import url("css.css");></style>

  • 内联样式表（优先级高）

    • 写在标签里面的样式

    • 如：<p style="color:red;"></p>

  • 表示给p标签里面的文字颜色设置为红色

  • 区别：外链样式与导入样式

    • link标签是属于xhtml范畴，而@import则是css2.1中特有的。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

    • 加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@impor则在整个页面加载完成后才加载。

    • 兼容性的区别，因@import`CSS2.1才特有的，所以对于不兼容CSS2.1`的浏览器来说，无效。

    • 在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别，此时@import就无能为力了。

  • 样式的优先级补充

    • 内联样式表（标签内部） > 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

    • 相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：

  • 权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式

  • 层叠优先级是:

    • 浏览器缺省< 外部样式表 < 内部样式表 < 内联样式

  • 其中样式表又有:类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

  • 派生选择器以前叫上下文选择器，所以完整的层叠优先级是:

    • 浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级

  • 另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：

    • 一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！

第九章 css选择器(上)

  • css选择器：

    • class类选择器可以重复利用

    • id选择器唯一

  • 标签选择器

    • 什么是选择器：css选择器就是要改变样式的对象

  • 选择器{属性:值;属性:值;}

  • 标签选择器：页面中所有的标签都是一个选择器 p{color:red;}

  • ID选择器

    • 选择id命名的元素 以 # 开头 #p1{color:#0f0;}

  • 类选择器

    • class选择器，选择clas命名的元素 以.开头 .first{color:#00f;}

  • css代码写完后上线前要经过压缩处理

  • 本地和服务器分两个css版本（备份）

  • 压缩后注释都清除，空间体积减少

  • 群组选择器

    • 选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}

  • 包含选择器

    • span{color:red;}

    • 选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开p

  • 属性选择器

    • 选择包含某一属性的元素

    • a[title]{color:red;} 选择包含title的a标签

    • a[title][href]{color:red;} 选择包含title和href的a标签

  • > + 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）

    • p > span{color:red;}

  • 相邻兄弟选择器：只选择后面的相邻兄弟元素

    • p + span{color:red;}

第十章 css选择器(下)

  • <a>伪类选择器

    • 伪类选择器的排序很重要，a:link a:visited  a:hover a:active，记作lvha

    • a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）

    • a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）

    • a:hover {color:#FF00FF;} /* 鼠标移动到链接上

    • */（可和其他标签结合一起用）

    • a:active {color:#0000FF;} / 选定的链接 /

    • 注意

  • 输入伪类选择器（针对表单）

    • input:focus{color:red;} / 键盘输入焦点 /

  • 其他伪类选择器

    • p:first-child{color:red;} /* 第一个p */

    • :before 在元素之前添加内容。

    • :after 在元素之后添加内容。

  • css优先规则

    • 内联样式表-> ID 选择器—> Class 类选择器->标签选择器

第十一章 背景属性

  • 背景属性：

    • 背景图片是否随着内容的滚动而滚动由background-attachment设置

    • background-attachment:fixed; 固定，不随内容的滚动而滚动

    • background-attachment:scroll; 滚动，随内容的滚动而滚动

    • background-size:x% y%;

    • background-size:x y;

    • 背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。

    • background-position:x% y%;

    • background-position:x y;

    • 背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现

    • background-position的取值可为英文单词或者数值和百分值。

    • background-positon的英文单词取值

    • top left

    • top center

    • top right

    • center left

    • center center

    • center right

    • bottom left

    • bottom center

    • ottom right

    • 不平铺：background-repeat:no-repeat;

    • 水平方向平铺：background-repeat:repeat-x;

    • 垂直方向平铺：background-repeat:repeat-y;

    • 完全平铺：默认为完全平铺

    • background:url(“images/1.jpg”);

    • backgronnd-image:url(“images/1.jpg”);

    • background:red;

    • backgronnd-color:red;

    • 背景的添加 ：

    • 背景颜色的添加:

    • 背景图片的添加：

    • 背景的平铺

    • 什么是平铺？平铺就是图片是否重复出现

    • 背景图片的定位

    • background-positon的数值取值

    • positon的百分值取值

    • 背景图片的大小

    • background-size的数值取值

    • background-size的数值取值

    • 背景图片的滚动

第十二章 文字文本属性

  • css文字文本属性：

    • text-align:center; 文本对齐(right/left/center)

    • line-height:10px; 行间距(可通过它实现文本的垂直居中)

    • text-indent:20px; 首行缩进

    • text-decoration:none;

    • letter-spacing: 字间距

    • 文本线(none/underline/overline/line-through)

    • color:red; 文字颜色

    • font-size:12px; 文字大小

    • font-weight:“bold” 文字粗细(bold/normal)

    • font-family:“宋体” 文字字体

    • font-variant:small-caps 小写字母以大写字母显示

    • 文字属性

    • 文本属性

第十三章 盒子模型

  • 盒子模型

    • 盒子模型就是一个有高度和宽度的矩形区域

    • 所有html标签都是盒子模型

    • div标签自定义盒子模型

  • 所有的标签都是盒子模型

    • class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。

  • 盒子模型的组成

    • 自身内容： width、height 宽高

    • 内边距： padding

    • 盒子边框： border 边框线

    • 与其他盒子距离： margin 外边距

    • 内容+内边距+边框+外边距=面积

    • 盒子模型组成部分：

  • border 边框

    • 常见写法 border:1px solid #f00;

  • 单独属性：

    • dotted 点状虚线

    • dashed（虚线）

    • solid（实线）

    • double（双实线）

    • border-width:

    • border-style:

    • border-color (颜色)

  • padding 内边距

    • padding:10px; 上下左右

    • padding:10px 10px; 上下 左右

    • padding:10px 10px 10px; 上 左右 下

    • padding:10px 10px 10px 10px; 上 右 下 左（设置4个点-->顺时针方向）

    • 值：像素/厘米等长度单位、百分比

  • 单独属性：

    - `padding-top:`- `padding-right:`- `padding-bottom:`- ` padding-left:`

  • 当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

  • margin 外边距

    • 值：与padding相同

    • 单独属性：与padding相同

  • 外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

补充盒子模型内容

  • 标准盒子模型

    • 盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型

  • 从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

  • IE盒子模型

  • 从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content

  • 和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding

  • IE盒子模型width = padding+border+内容

  • 标准盒子模型 = 内容的宽度（不包含border+padding）

  • 例：

    • 一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，假如用标准w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px

  • 那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。

  • 假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。

  • 反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

  • 用 jquery 做的例子来证实一下

<html><head><title>你用的盒子模型是？</title></head><body></body></html>

  • 　上面的代码没有加上 doctype 声明，在 ie 浏览器中显示 ie盒子模型，在 ff 浏览器中显示“标准w3c 盒子模型”。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "" style="color: rgb(0, 136, 204);">" style="color: rgb(0, 136, 204);">网页链接你用的盒子模型是标准w3c盒子模型</title></head><body></body></html>

  • 　代码2 与代码1 唯一的不同的就是顶部加了 doctype 声明。在所有浏览器中都显示“标准 w3c 盒子模型”

  • 所以为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型

  • 扩展

    • 学会使用box-sizing布局

第十四章 块元素、行元素与溢出

  • 基本概念

    • 块级元素：默认情况下独占一行的元素，可控制宽高、上下边距；

    • 行内元素：默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距

  • 行块转换

    • display:none; 不显示

    • display:block; 变成块级元素

    • display:inline; 变成行级元素

    • display:inline-block; 以块级元素样式展示，以行级元素样式排列

  • 溢出

    • overflow:hidden; 溢出隐藏

    • overflow:scroll; 内容会被修剪，浏览器会显示滚动条

    • overflow:auto; 如果内容被修剪，则产生滚动条

  • 文本不换行：white-space:nowrap;

  • 长单词换行：word-wrap:break-word;

  • 行内元素和快级元素小结

    • 区别一：

    • 区别二：

    • 区别三：

    • 块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度

    • 行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

    • 块级：块级元素可以设置宽高

    • 行内：行内元素不可以设置宽高

    • 块级：块级元素可以设置margin，padding

    • 行内：行内元素水平方向的margin-left; margin-right;

    • padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top;padding-bottom;却不能生效。

    • 区别四：

    • 块级：display:block;

    • 行内：display:inline;

    • 可变元素为根据上下文语境决定该元素为块元素或者内联元素。

    • applet - java applet

    • button - 按钮

    • del - 删除文本

    • iframe - inline frame

    • ins - 插入的文本

    • map - 图片区块(map)

    • object - object对象

    • script - 客户端脚本

    • a – 锚点

    • abbr – 缩写

    • acronym – 首字

    • b – 粗体(不推荐)

    • bdo – bidi override

    • big – 大字体

    • br – 换行

    • cite – 引用

    • code – 计算机代码(在引用源码的时候需要)

    • dfn – 定义字段

    • em – 强调

    • font – 字体设定(不推荐)

    • i – 斜体

    • img – 图片

    • input – 输入框

    • kbd – 定义键盘文本

    • label – 表格标签

    • q – 短引用

    • s – 中划线(不推荐)

    • samp – 定义范例计算机代码

    • select – 项目选择

    • small – 小字体文本

    • span – 常用内联容器，定义文本内区块

    • strike – 中划线

    • strong – 粗体强调

    • sub – 下标

    • sup – 上标

    • textarea – 多行文本输入框

    • tt – 电传文本

    • u – 下划线

    • address – 地址

    • blockquote – 块引用

    • center – 举中对齐块

    • dir – 目录列表

    • div – 常用块级容易，也是CSS layout的主要标签

    • dl – 定义列表

    • fieldset – form控制组

    • form – 交互表单

    • h1 – 大标题

    • h2 – 副标题

    • h3 – 3级标题

    • h4 – 4级标题

    • h5 – 5级标题

    • h6 – 6级标题

    • hr – 水平分隔线

    • isindex – input prompt

    • menu – 菜单列表

    • noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容

    • noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）

    • ol – 有序表单

    • p – 段落

    • pre – 格式化文本

    • table – 表格

    • ul – 无序列表

    • 设置宽度width 无效。 设置高度height 无效，可以通过line-height来设置。 设置margin

    • 只有左右margin有效，上下无效。

    • 设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

    • ①、和其他元素都在一行上；

    • ②、高，行高及外边距和内边距不可改变；

    • ③、宽度就是它的文字或图片的宽度，不可改变

    • ④、内联元素只能容纳文本或者其他内联元素

    • ①、总是在新行上开始；

    • ②、高度，行高以及外边距和内边距都可控制；

    • ③、宽度缺省是它的容器的100%，除非设定一个宽度。

    • ④、它可以容纳内联元素和其他块元素

    • 也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。

    • 每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；

    • 块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。

    • DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

    • 一、块级元素：block element

    • 二、行内元素：inline element

    • 三、block（块）元素的特点:

    • 四、inline元素的特点

    • 对行内元素，需要注意如下:

    • 五、常见的块状元素

    • 六、常见的内联元素

    • 七，可变元素

    • 八、行内元素与块级元素有什么不同

    • 替换元素有如下：（和img一样的设置方法）

      • <img>、<input>、<textarea>、<select>

      • <object>都是替换元素，这些元素都没有实际的内容

  • 可以通过修改display属性来切换块级元素和行内元素

DIV+CSS学习笔记（CSS）的更多相关文章

  1. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  2. CSS学习笔记——CSS选择器样式总结

    <style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...

  3. Html和Css学习笔记-css基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  4. CSS 学习笔记——CSS Selector

    CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body { /*对 body 元素定义样式*/ } body,div { /*同时选 ...

  5. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  6. div+css学习笔记一（转）

    div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  9. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  10. CSS学习笔记10 相对定位，绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

随机推荐

  1. IT运维分析

    http://www.infoq.com/cn/presentations/case-of-it-operation-analysis-and-log-search-analysis-engine?u ...

  2. Android 简述touch事件中的MotionEvent

    有关touchEvent的事件里都有一个 MotionEvent 參数,以下来简介一下它的属性的一些含义和使用的方法 通常单指操作时,一般例如以下: switch (event.getAction() ...

  3. 用c#编写爬虫在marinetraffic下载船仅仅图片

    近期在做船仅仅识别方面的事情,须要大量的正样本来训练adaboost分类器. 于是到marinetraffic这个站点上下载船仅仅图片.写个爬虫来自己主动下载显然非常方便. 站点特点 在介绍爬虫之前首 ...

  4. SAP学习之路

    此贴记录学习SAP过程~如有错误请指出~ 6.看着网上学习SAP的貌似比較花精力.学习好的话发展前景还是不错的 5.尽管还不是非常懂.可是还是充满期待,期待着java转型abap. 能够在虚拟机上安装 ...

  5. c++位运算符介绍

    下面是C/C++位操作运算符列表,其中运算符优先级为从上到下递减,但<<,>>优先级相同. C/C++位操作运算符 操作符 功能 用法 ~ 位求反 ~expr << ...

  6. POJ 2141 模拟

    思路:字符串解密 啥都告诉你了 模拟就好 //By SiriusRen #include <cstdio> #include <cstring> using namespace ...

  7. grunt yoman bower的理解

    grunt : 前端构建工具 1 什么事前端构建工具 目前前端已经开始了工程化 比如 一个项目 里面用到了几十个js文件 几十个css 很多图片资源 我们如果引入 还是按照以前的方式 out 因此这个 ...

  8. Autoencoders and Sparsity（二）

    In this problem set, you will implement the sparse autoencoder algorithm, and show how it discovers ...

  9. groupmod---更改群组识别码或名称

    groupmod命令用于更改群组识别码或名称. 需要更改群组的识别码或名称时,可用groupmod指令来完成这项工作. 语法 groupmod [-g <群组识别码> <-o> ...

  10. .Net 开源控件 NPlot使用小结

    NPlot是一款非常难得的.Net平台下的图表控件,能做各种曲线图,柱状图,饼图,散点图,股票图等,而且它免费又开源,使用起来也非常符合程序员的习惯.授权方式为BSD许可证. 下载链接: http:/ ...