文件夹:

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>

       <!-- <div class="wrap"></div> -->

    </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,可是前者的优先级高于后者。

注:当指向同一目标选择器的优先级同样时。后面的优先级大于前面的优先级;当同一个标签中定义有多个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等类设置属性


扩展:JS命名规范
1、区分大写和小写
2、首写符必须是字母,下划线(
_ )或者美元符($)
3、除首字母外的字符,能够由字母。数字,下划线,美元符号组成
4、不同意包括空格



背景。行高属性
background背景属性:


   * background-color

   * background-position

   * background-size

   * background-repeat

   * background-origin

   * background-clip

   * background-attachment

   * background-image

CSS3新增的属性:

background-color:red | #RGB;

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


行高与行距:





CSS 文本属性

属性 描写叙述
color 设置文本颜色
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引入方式,凝视,命名规范,背景,行高,文本属性的更多相关文章

  1. web(五)CSS引入方式,编写规范及调试

    CSS (Cascading Style Sheets)层叠样式表 ,是由万维网联盟(W3C)制定的标准 CSS的主要作用: 美化html元素的外观,例如设定背景颜色.字体等. 对网页元素进行布局.以 ...

  2. Javascript用途,语法特点,难点,调试工具,引入方式,命名规范,变量声明及赋值,数据类型,运算符

    JavaScript用来干什么 数据的验证 将动态的内容写入到网页当中(ajax) 对事件做出相应 读写html当中的内容 检测浏览器 创建cookies 模拟动画 语法特点 基于对象和事件驱动的松散 ...

  3. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  4. css 基础 css引入方式

    color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...

  5. css引入方式

    1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...

  6. link标签和css引入方式

    link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...

  7. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  8. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  9. css引入方式和基本样式

    css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...

随机推荐

  1. wpf获取webbroswer的两个方法

    //跳转前的地址 private void WebBrowser_BeforeNavigate2(object pDisp, ref object URL, ref object Flags, ref ...

  2. php面向对象之构造函数和析构函数

    php面向对象之构造函数和析构函数 简介 php面向对象支持两种形式的构造函数和析构函数,一种是和类同名的构造函数(php5.5之前),一类是魔术方法(php5.5之后).与类名相同的构造函数优先级比 ...

  3. linux系统oracle服务自启动

    终于知道为什么自启动脚本一直无法成功执行,原来都是空格不对惹的祸.具体步骤说明如下: 1.修改dbstart和dbshut脚本 dbstart脚本默认值启动oracle服务,不启动监听服务,如果想在启 ...

  4. Redis学习笔记(十) 命令进阶:事务操作

    原文链接:http://doc.redisfans.com/transaction/index.html Redis中也提供了对于事务的支持,由于Redis是单线程处理Client的请求,所以实现起来 ...

  5. ROS集成开发环境RoboWare Studio安装教程

    前言:很多人说vim是最快的,所以我选择用roboware. ROS 自带的编辑器vim增加插件,效果如下: RoboWare Studio,效果如下: 下面开始安装. 一.安装 去官网 http:/ ...

  6. Android FloatMenuSample

    项目地址:fanOfDemo/FloatMenuSample crosg/FloatMenuSample transfer from yiming/FloatMenuSample GIF GRADLE ...

  7. Spring meven 配置

    使用maven的仓库化管理,可以更方便有效的控制文件. 在官网下载maven. 官网的地址:http://maven.apache.org/download.cgi  请选择最新的版本下载, 这里我用 ...

  8. 玩转 sublime3 第一弹 文件介绍

    安装 官网下载地址:http://www.sublimetext.com/3 本文将以Windows 64 bit 进行讲解. 目录介绍 sublime默认安装之后会生成一个安装目录和数据目录: C: ...

  9. Java用freemarker导出Word 文档

    1.用Microsoft Office Word打开word原件: 2.把需要动态修改的内容替换成***,如果有图片,尽量选择较小的图片几十K左右,并调整好位置: 3.另存为,选择保存类型Word 2 ...

  10. 前端精选文摘:css之BFC 神奇背后的原理(转载)

    一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...