DIV+CSS学习笔记（CSS）

时间：2022-09-20 16:43:30

  • 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>

DIV+CSS学习笔记（CSS）

  • 内部样式表

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

    • 使用 <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 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型

DIV+CSS学习笔记（CSS）

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

  • IE盒子模型

DIV+CSS学习笔记（CSS）

  • 从上图可以看到 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&plus;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&plus;CSS学习笔记（3）- 认识标签（2）

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

  9. HTML&plus;CSS学习笔记&lpar;1&rpar; - Html介绍

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

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

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

随机推荐

  1. 无需编译、快速生成 Vue 风格的文档网站

    无需编译.快速生成 Vue 风格的文档网站 https://docsify.js.org/#/#coverpage https://github.com/QingWei-Li/docsify/

  2. 汽车ABS系统-第一周作业

    ABS系统也成防抱死系统(Anti-lock Braking System),由罗伯特·博世有限公司所开发的一种在摩托车和汽车中使用,它会根据各车轮角速度信号,计算得到车速.车轮角减速度.车轮滑移率: ...

  3. hdoj 5402 Travelling Salesman Problem

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5402 类似于黑白棋盘,有的格子是可以不走的,有的格子是不能不走的,对于m或n中有一个奇数的情况, 所有 ...

  4. Caused by&colon; java&period;lang&period;ClassNotFoundException&colon; org&period;aopalliance&period;intercept&period;MethodInterceptor

    org.springframework.beans.factory.parsing.BeanDefinitionParsingException: Configuration problem: Fai ...

  5. bootstrap实例 之 响应式表格-----2017-05-15

    Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情 ...

  6. 如何处理JS，css与smarty标签的冲突

    smarty的默认标记符是大括号:{}, 假如我们页面上有JS且定义了函数或者对象,或者有CSS定义了样式,就会出现大括号, smary引擎就会把这些大括号当作smarty语法来解释, 很明显,这些C ...

  7. 后端分布式系列：分布式存储－HDFS 异常处理与恢复

    在前面的文章 <HDFS DataNode 设计实现解析>中我们对文件操作进行了描述,但并未展开讲述其中涉及的异常错误处理与恢复机制.本文将深入探讨 HDFS 文件操作涉及的错误处理与恢复 ...

  8. Linux查看线程

    我的程序在其内部创建并执行了多个线程,我怎样才能在该程序创建线程后监控其中单个线程?我想要看到带有它们名称的单个线程详细情况(如,CPU/内存使用率). 线程是现代操作系统上进行并行执行的一个流行的编 ...

  9. 【Ansible 文档】【译文】模版（Jinja2）

    Templating (Jinja2) 正如在 variables 部分描述的那样, Ansible 使用Jinja2模版来启用动态表达式和访问变量. Ansible 扩展了许多 filtes 和 t ...

  10. Python 获取文件的创建时间，修改时间和访问时间

    # 用到的知识# os.path.getatime(file) 输出文件访问时间# os.path.getctime(file) 输出文件的创建时间# os.path.getmtime(file) 输 ...

相关文章