DHTML——CSS基础

最新推荐文章于 2021-08-03 18:36:01 发布

Neverbelazy

最新推荐文章于 2021-08-03 18:36:01 发布

阅读量937

点赞数

文章标签： DHTML CSS

本文链接：https://blog.csdn.net/neverbelazy/article/details/9031077

版权

JavaScript学习日志专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS2.0基础总结

本文根据传智博客张鹏Html+CSS视频按自己的理解总结了CSS2.0部分主要的知识点

1. CSS是什么, 有什么作用？

a. CSS的全称是: cascade style sheet 层叠样式表

b. CSS的作用是给html,xhtml,xml添加样式, 是对内容的样式修饰

c. 利用CSS+XHTML可以实现内容和表现的分离, 即XHTML架起内容的结构, CSS添加结构上的修饰信息

d. 另外, Javascript可以为网页增加交互行为

注: Web标准的构成: Structure-XHTML, Presentation-CSS, Behavior-Javascript

2. CSS是如何做到表现和内容相分离的？

a. xhtml中, 传统的样式添加可以借助xhtml里面的标签及标签中的属性来定义文字、表格、表单的样式, 这样情况下, 更改样式需要触及xhtml代码, 查找及修改都是十分麻烦的

b. css提供了一种单独的控制这些样式的方法, xhtml只需要提供架构信息, 节div, 段落p, 表格table, 表单form的层次结构, 将修饰这些结构信息的属性, 通过css的提供的一些途径锁定并提供修饰

3. CSS提供这些锁定修饰信息的途径是什么, 有哪几种？

a. CSS可以通过选择器锁定被修饰的对象, 常见的3中独立选择器: 元素选择器; 类选择器; ID选择器

b. 通过元素选择器的方式: CSS可以对某一种标签的属性进行控制, 其语法规则是

- 元素{属性: 属性值;} ({}内可以添加多对属性值, 用;隔开)

c. 通过class类选择器的方式: CSS可以对某一类拥有相同class类名的标签进行属性的控制, 其语法规则是

- . 类名{属性:属性值;} ({}内可以添加多对属性值, 用;隔开)

- 调用此CSS样式的标签需要 class="类名"

- 一个标签的class可以添加多个类名 class="类名1 类名2 类名3", 中间用空格隔开

d. 通过ID选择器的方式: CSS可以锁定一个id值的标签对其进行属性的控制, 其语法规则是

- #id值{属性:属性值;} ({}内可以添加多对属性值, 用;隔开)

e. 组合式: CSS可以将 b,c,d通过-空格直接连接逗号分隔- 三种方式实现层级嵌套, 交集条件和并集条件

- table tr{ background:red; } 又被成为后代选择器

- table#grade{ border:black 1px solid; } div.errorinfo{ color:red; }

- body, div, p{ margin:0; padding:0; }

f. 另外, CSS还提供了其他组合式选择器:

- 子元素选择符">" —— 相比层级嵌套, 其直接的子元素的选择修饰; h1> strong{color : red;}

- 相邻兄弟选择器“+” —— 有相同父元素的相邻元素的选择修饰; li+li {color:blue;}

- 属性选择器“[ ]” —— 某个选择器中的属性值设置样式; img[alt] {color:gold;}

g. 特别的, CSS还提供了伪类和伪元素来实现对某些选择器添加特殊效果 ":"

- a:link/visited/hover/active 一个链接未访问/访问后/鼠标悬停/单击中的样式修饰

4. CSS锁定了修饰信息之后, 这些修饰样式时如何封装并实现了与xhtml内容结构相分离的呢？

a. CSS提供了一种文件格式, .css 来存储样式信息

b. CSS提供了2种完全与xhtml相分离的CSS样式加载方式(外联式+导入式), 1种半分离的加载方式(头部内建式), 和1种没有分离的加载方式(标签内嵌式)

c. 外联式: 在当前html的head内链接一个.css 样式文件进来

- <link rel="stylesheet" type="text/css" href="xxxx(url)" />

- link标签实现, 需要制定 rel: 目标文本和当前文本的关系" stylesheet“ 和目标文本的类型type "text/css" 以及href:地址

- 可以方便于多个html文本样式内容的快速修改

d. 导入式: 在当前html的head内导入一个.css样式文件进来, 需要在style标签内使用

- <style type="text/css> @import url("xxxx") </style>

- style@import的方式会增加html中的代码, 有些浏览器会最后读取@import中代码, 造成样式加载延迟, 不建议使用导入式

- @import语句可以使用在.css文件中, 将多个样式文本导入到一个样式文件中

- 和c. 外联式一样, 导入式可以方便于多个html文本样式内容的快速修改, 但是仍推荐不使用导入式, 用外联式

e. 内建式: 在当前的html文件head中利用style标签在style内部创建.css文件中的内容

<head>
      <style type="text/css">
           body{
                   font-size:12px;
                   }
           .blink{
                   text-decoration:blink;
                   }
           #password{
                   width:200px;
                   height:20px;
                   line-height:20px;
                   vertical-align: middle;
                   }
      </style>
</head>

- 内建式只做到了部分的内容结构和样式的分离, 而且只能实现本html文本内样式的快速修改

f. 行内式: 实际上只是针对html中某处的某个标签修改了此标签的style属性

- <p style="color:red;font-size:16px">;

- 只能改变这个标签本身的样式, 不过可以用此覆盖掉以加载的css样式, 以达到局部修改的目的

5. CSS有这么多种添加方式, 那么他们之间的优先级是什么样的, CSS样式加载遵循着什么原则吗？

a. CSS样式本身有三个特性: 继承、层叠、默认初始值

b. 继承是指: 父类标签的css属性可以被子类标签继承下来例如在选择器body{xxxx}定义的样式, <p>标签会自动加载此样式

c. 层叠是指: 子类标签中复写的css属性可以覆盖掉父类标签原本继承来的属性, 例如选择器p{xxx}重新定义的属性可以覆盖body{xxx}中定义的相同属性

d. 不是所有的属性都有继承性: 对父类设置无继承性的属性值, 子类不能直接得到这个属性值

e. 默认初始值: 很多标签有自己的初始化样式值

<head>
         <style type="text/css">        
                 body{font-size:24px;}
                 //p{font-size:6px;}
         </style>
</head>
<body>
            Text in body.
           <p> Text in p. </p>
           <h1> Test in h1. </h1>
</body>

f. 由于a中CSS样式的三个特性, CSS不同样式加载的优先级遵循: 就近原则, 即行内> 内建 >外联/导入

g. 根据就近原则,外联和导入同时存在在一个head中, 相同的样式属性后加载的属性值会覆盖先加载的属性值

h. 根据就近原则,外联css内部导入其他css文件, 外联文件内内建的属性的属性值会覆盖掉导入部分相同属性的属性值

6. html中的结构化是通过表格的形式来安排内容结构, html和CSS结合是指表格和CSS样式结合吗？

a. 当然, 是可以通过表格来限定样式的, 但是, 可以有更好的方式来限定内容结构

b. html标签可以分成两种类型的元素: 块元素和内联元素

c. 块元素的特点是: 可以设置宽高, 自己独占一行, 是一个可容纳多种元素的容器; 例如: div, p, h1~h6, body

d. 内联元素的特点是: 不可设置宽高, 不能独占一行, 内部只能容纳内梁元素; 例如: span, a, em

e. 所以, 可以利用c块元素的特性来实现内容布局

7. 具体是如何通过块元素实现布局的呢？

a. w3c组织规定了盒子模型以以实现对块元素的尺寸进行限定

- 盒子模型的具体尺寸设定包括: content, padding, border, margin

- 盒子的总尺寸等于这四个元素的尺寸和

- 设定width, height是针对content的

- 设定padding,margin,border都可以对4个方向单独设定

- border还可以设置width,style,color

b. 然后再将一块内容封装在定义了尺寸及样式的div的盒子中, 通过CSS提供的几种布局方式将这些div盒子布局

8. CSS提供了哪几种布局的形式？

a. 默认文档流方式: 按html的结构顺序, 块独占一行的属性存在

b. 浮动布局方式: float属性一旦设置, 对象相当于从默认文档流方式中分离出来, 其后面的对象将这个对象视作不存在, 并占它原来默认文档流中的位置

c. 位置布局方式: 将块放置在任意位置, 对象同样从默认的文档流中分离(不过其默认文档流中的位置是否释放要根据position属性来决定)

9. 这几种布局的占位的优先级是怎么样的,显示的优先级呢？

a. postition:absolute的位置布局是完全游离于浮动布局和默认文档流布局, position:relative的位置布局时, 保留默认文本流中的原占位

b. 在默认文档流布局前面的浮动布局是游离于默认文档流布局的, 但是在默认文档流之后的浮动布局仍然会收到前面默认文档流布局的占位影响

c. 三种布局的视觉显示前后: 位置布局>浮动布局>默认文档流布局

d. 注意, 前面定义过的默认文档流布局的块, 依然会排斥浮动布局方式, 但是无法排斥位置布局方式

e. 根据b,c,d, 如果在某个浮动布局块的后面添加默认文档流方式的块, 前面的浮动式,不排斥默认文档流的布局, 但是出现干涉时,浮动式会盖在默认文档流式的上面

f. 所以, 浮动流在显示级别上是前于默认文档流的, 但是其占位级别是低于默认文档流的

g. 特别的, 浮动对象对父元素也有影响！

10. 根据9.e, 既然在浮动布局和默认文档流混合使用时会出现显示干涉, 但如果我们还有比如第一行两个块浮动,第二行一个块的布局要求, 要如何实现呢？

a. 此时可以选择清除浮动布局以消除前面的浮动布局对后面布局的影响

b. 清除布局的方法是调用clear属性来清除某个方向前面浮动的干涉: none,left,right,both

c. 注: 清除浮动布局无法实现将后面默认布局的块的margin也与浮动布局的块相排斥, 此时的margin还是相对于其他默认布局的块的

11. 实现位置布局需要哪些要素, 何时用位置布局会比较好？

a. 定位布局是通过position属性来实现的, 对position属性的定义必不可少

- postion属性值的默认是static, 另外还有absolute和relative

b. 有了position的属性, 再通过top/right/bottom/left等方向, 限定块的实际位置

c. position: absolute; 时top/right/bottom/left值是相对于父容器的位置, 布局对象游离出默认文本流布局

d. position: relative; 时top/right/bottom/left值是相对于其自身默认文档流布局中的位置, 布局对象游离出默认文本流布局但是其原来的位置在默认文本流布局中仍然存在

e. 对于c, 位置定位相对的父容器必须也是位置定位

f. 实现d的两种方式:

- 给父容器加postion:relative;

- 给父容器加postion: absolute; top/right/bottom/left;

g. 当页面内需要在一个局部零散地放置一些块的时候, 通常这些块直接没有矩阵式的规律, 而且直接有不规则的空白, 那么可以将这个部分内的块通过进行位置布局

12. CSS对样式的属性分为几大类, 有什么样的框架方便记忆和查询?

a. 从盒子模型的角度: Dimensions, Padding, Margins, Border

b. 考虑盒子模型在整个文档中的定位和布局: Positioning + Layout

c. 考虑内容及对内容的修饰: Font, Text, Background,

d. 考虑对内容的控制:Lists, Table, Scrollbar

e. 其他一些属性: Outline(在border外的修饰框); Aural(添加声音)等

13. 常用的CSS属性设定有哪些？

a. Dimension: height, width;

b. Padding: padding/-top/left/right/bottom

c. Margin: margin/-top/left/right/bottom

d. Positioning: position, z-index, top/left/right/bottom

e. Layout: clear, float, display, overflow/-x/-y, visibility, clip

f. Font: color, font-weight, font-size, text-decoration, text-transform, line-height, font-family

g. Text: vertical-align, text-align, white-space

h. Background: background-color; background-image;background-repeat;background-position; background-attachment

i. Lists: list-style-image/position/type

j. Table: border-collapse, border-spacing, empty-cells, caption-side

参考资料: 传智播客张鹏带你一周hold住html+css 视频

Neverbelazy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DHTML——CSS基础

CSS2.0基础总结本文根据传智博客张鹏Html+CSS视频按自己的理解总结了CSS2.0部分主要的知识点1. CSS是什么, 有什么作用？a. CSS的全称是: cascade style sheet 层叠样式表b. CSS的作用是给html,xhtml,xml添加样式, 是对内容的样式修饰c. 利用CSS+XHTML可以实现内容和表现的分离, 即XH
复制链接

扫一扫