DIV+CSS学习笔记（CSS）

zoukankan html css js c++ java

DIV+CSS学习笔记（CSS）
- css基础知识：
- 分类及位置：内部样式-head区域style标签里面
- 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>
```
- 内部样式表
```
<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标签里面的文字颜色设置为红色
- 区别：外链样式与导入样式
- 样式的优先级补充
- 权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式
- 层叠优先级是:
- 其中样式表又有:类选择器 < 类派生选择器 < ID选择器 < ID派生选择器
- 派生选择器以前叫上下文选择器，所以完整的层叠优先级是:
- 另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：
第九章 css选择器(上)
- css选择器：
- 标签选择器
- 选择器{属性:值;属性:值;}
- 标签选择器：页面中所有的标签都是一个选择器 p{color:red;}
- ID选择器
- 类选择器
- css代码写完后上线前要经过压缩处理
- 本地和服务器分两个css版本（备份）
- 压缩后注释都清除，空间体积减少
- 群组选择器
- 包含选择器
- 属性选择器
- > + 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）
- 相邻兄弟选择器：只选择后面的相邻兄弟元素
第十章 css选择器(下)
- <a>伪类选择器
- 输入伪类选择器（针对表单）
- 其他伪类选择器
- css优先规则
第十一章背景属性
- 背景属性：
第十二章文字文本属性
- css文字文本属性：
第十三章盒子模型
- 盒子模型
- 所有的标签都是盒子模型
- 盒子模型的组成
- border 边框
- 单独属性：
- padding 内边距
- 单独属性：
  
  - `padding-top:`- `padding-right:`- `padding-bottom:`- ` padding-left:`
- 当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小
- margin 外边距
- 外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并
补充盒子模型内容
- 标准盒子模型
- 从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分
- IE盒子模型
- 从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content
- 和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding
- IE盒子模型width = padding+border+内容
- 标准盒子模型 = 内容的宽度（不包含border+padding）
- 例：
- 那应该选择哪中盒子模型呢？当然是“标准 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 盒子模型
- 扩展
第十四章块元素、行元素与溢出
- 基本概念
- 行块转换
- 溢出
- 文本不换行：white-space:nowrap;
- 长单词换行：word-wrap:break-word;
- 行内元素和快级元素小结
- 可以通过修改display属性来切换块级元素和行内元素
查看全文

相关阅读:
提升开发效率的十个工具
 JQuery常用函数及功能小结
 jquery-validation 学习总结
 JavaScript：避免代码的重复执行
 18 个最好的CSS框架用于提高开发效率
 如何书写高质量的jQuery代码
 13个 ASP.NET MVC 的扩展
 CSS_LESS 语法/函数详解
 21个值得收藏的Javascript技巧
 JQuery常用功能的性能优化

原文地址：https://www.cnblogs.com/mumusen/p/7453173.html

DIV+CSS学习笔记（CSS）

第九章 css选择器(上)

第十章 css选择器(下)

第十一章 背景属性

第十二章 文字文本属性

第十三章 盒子模型

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

第十一章背景属性

第十二章文字文本属性

第十三章盒子模型

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