您的位置：首页 > Web前端 > CSS

项目复习期总结3：CSS引入方式，凝视，命名规范，背景，行高，文本属性

2017-06-14 11:19 645 查看

文件夹： 1、CSS凝视的书写怎么写？优点？ 2、CSS引入方式各种的优缺点 3、选择器的写法与选择器的优先级 4、CSS命名规范 5、背景，行高 6、文本(text与font开头)等全部属性

① CSS凝视书写规范：
1、单行凝视：直接写在属性值的后面。如：

① .search{
border:1pxsolid#fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/
}
② .wrap {    /*height: 100px;*/   }

2、多行凝视：分别在開始的地方及结束的地方凝视，如：

①/********Start 搜索条開始********/
.search{
border:1pxsolid#fff;
background:url(../images/icon.gif)no-repeat#333;
}
/********End 搜索条结束*********/

② <style type="text/css">
/*.tb {
width:300px;
font-size:12px;
background:#6887D9;
table-layout:fixed;
}*/
</style>

② CSS凝视书写优点：
1. 利用凝视能够高速定位到复杂的代码页面中，能够高效的编写样式。使得代码层次清楚，改动更加直观。 2. css注解（css 凝视）能够帮助我们对自己写的CSS文件进行说明。如说明某段CSS代码是什么地方、功能、样式等说明。以便我们以后维护具有一看即懂的方便性，同一时候在团队开发网页是时候合理适当的注解有利于团队看懂css样式是相应html哪里的。以便顺利高速开发网页。

扩展：JavaScript的两种凝视方法

行凝视

// 这是行凝视。注意'//'后面有空格

/* 这是一段凝视 */

块凝视

* 凝视以一行（*后面记得有空格）

* 凝视以二行（*后面记得有空格）

* 凝视以三行（*后面记得有空格）

扩展：HTML结构的凝视方法

使用  进行凝视

如：<body>

</body>

CSS引入方式各种的优缺点

① 外部引入：使用最广泛。一个css文件可控制多个页面，从整站来讲，降低代码数量。提高载入速度。便于维护

② 头部引入：使用也比較多，载入速度快。一般用于訪问量较大的站点或首页。可是整站代码较多。不利于维护

③ 标签内写：用得比較少。权重最高。代码多。载入慢。不利于维护

④ @import: 跟link类似。假设使用@import的话。要将@import放到样式代码的最前面，否则它将会不起作用
link与@inport差别： ① @import url（）机制是不同于link的，link是在载入页面前把css载入完成，而@import url（）则是读取完文件后在载入。所以会出现一開始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
② @import 是css2里面的。所以古老的ie5不支持。
③ 当使用javascript控制dom去改变样式的时候。仅仅能使用link标签，由于@import不是dom能够控制的
④ link除了能载入css外还能定义RSS。定义rel连接属性。@import仅仅能载入css

扩展：JS三种引入方式

选择器的写法与选择器的优先级

选择器种类：

① 标签名选择器 ② ID名选择器 ③ 类选择器 ④ 后代选择器

⑤ 群组选择器 ⑥ 伪类选择器 ⑦ 属性选择器 ⑧ 通配符 ⑨ 子代选择器

选择器优先级：

① CSS不同引入方式的优先级：标签内嵌样式 > 头部书写样式 > 外部引用样式 > 浏览器默认样式。

② CSS选择器的优先级：id > class > tagname.
③ 多个选择器混用时的优先级：样例.a .b c{}和.a c{},它们指向的目标都是c，可是前者的优先级高于后者。
[p]注：当指向同一目标选择器的优先级同样时。后面的优先级大于前面的优先级；当同一个标签中定义有多个class名时，各个类选择器之间的优先级与html中的class名排列无关，而是与css文件里各个类选择器的排列有关。

CSS命名规范

1、规则命名中，一律採用小写加中划线的方式，不同意使用大写字母或_
   2、命名避免使用中文拼音，应该採用更简明有意义的英文可是进行组合
   3、命名注意缩写，可是不能盲目缩写
   4、不同意通过1 、2、3等序号进行命名
   5、避免class与id重名
   6、id用于标识模块或页面的某一父容器区域，名称必须唯一，不要任意新建id
   7、class命名必须言简意赅
   8、除了重置浏览器默认样式外，禁止直接为html tag加入css样式设置。比如：div { width:200px;height:100px;}
   9、每一条规则应该确保选择器唯一。禁止直接为全局 .nav/.header/.body等类设置属性

详见：独行冰海-CSS编码规范
扩展：JS命名规范

1、区分大写和小写 2、首写符必须是字母，下划线（ _ ）或者美元符($) 3、除首字母外的字符，能够由字母。数字，下划线，美元符号组成 4、不同意包括空格

背景。行高属性

background背景属性：
   * background-color
   * background-position
   * background-size
   * background-repeat
   * background-origin
   * background-clip
   * background-attachment
   * background-image
CSS3新增的属性：

background的语法：[详见博客背景图合并知识整理] background-color：red | #RGB;[/p]

background-position:X轴坐标 Y轴坐标 | left| right | center | top..

background-size: 100px | 30% | cover | contain; 在线測试

background-repeat: repeat | no-repeat | repeat-x | repeat-Y

background-origin：border | padding | content

background-clip：border-box | padding-box | content-box

background-attachment：fixed | scroll

background-image：url

简写的形式：background:color url() positon repeat。

备注：background-size的属性值假设仅仅设置一个值。则第二个值会被设置为 "auto"。

cover：实现把背景图像扩展至足够大。以使背景图像全然覆盖背景区域。

contain：把图像图像扩展至最大尺寸，以使其宽度和高度全然适应内容区域

line-height行高属性：设置行间的距离（行高）。
语法： line-height : normal | <实数> | <长度> | <百分比> | inherit
行高与行距：

line-height具体解释

color [/tr]

CSS 文本属性 [tr]	属性	描写叙述
设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本加入修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。 CSS2 包括该属性，可是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

CSS 字体属性

属性	描写叙述
font	简写属性。作用是把全部针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

项目复习期总结3：CSS引入方式，凝视，命名规范，背景，行高，文本属性

CSS 文本属性

CSS 字体属性