css 简单概念与使用方法

CSS : 层叠样式表(英文全称:Cascading Style Sheets)。看完本篇文章,你就大概了解了css


1. 简介:是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用    标记语言的一个子集)等文件样式的计算机语言。                 

  CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

2. 特点:CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

2.1 丰富的样式定义

2.2 易于使用和修改

2.3 多页面应用

2.4 层叠

2.5 页面压缩

作用:

  1. 样式表解决了html的内容与表现分离
  2. 使用样式表极大的提高了工作效率。

使用方法:

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。

名称CSS中的"层叠(cascading)"表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果

基本语法:

  1. Css规则主要由两部分组成 1.选择器 2.一条或多条属性声明
  2. 选择器主要作用是为了确定需要改变样式的HTML元素
  3. 每一条声明由一个属性和一个值组成,使用花括号来包围声明,属性与值之间使用冒号(:)分开

css中使用的单位:

需要注意的地方:

  1. 如果值为若干单词,则要给值加引号
  2. 多个声明之间使用分号(;)分开
  3. css对大小写不敏感,如果涉及到与html文档一起使用时,class与id名称对大小写敏感

css文件的导入方式:

第一种:内联样式表

  1. 要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性
<div style=”border:1px solid black”>这是一个DIV</div> 

注意:

  1.  慎用这种方式,它将内容与显示混合在一起,损失了样式表的优势
  2.  一般情况下,这种方式只有在一个标签上只应用一次样式时才会使用

第二种:外部样式表

      使用<style>标签在html文档的<head>中来定义的样式表。

注意:

注意:

  1. 这种方式,样式只适合应用于一个页面

第三种:内部样式表

  1. 如果想要在多个页面使用同一个样式表,就可以使用外部样式表来导入。
  2. 我们可以在html页面上使用<link>标签来导入外部样式表。

注意:

  1. 浏览器会从mystyle.css文件中读取样式,并对页面上的html进行修饰。
  2. 外部样式表,应该以css为后缀来保存,可以使用任意文本编辑器对css文件进行编辑。

另外介绍一种比较冷门的外部导入用法:(用处不大)  @import导入

需要注意:

  1. @import这种方式只有firefox支持,而ie不支持
  2. @import这种方式导入的css,会在整个页面加载后,才会加载样式。如果网络不好情况下,会先看到无样式修饰的页面,闪烁          一 下后,才会看到有样式修饰的页面。
  3. 而使用外部样式表,会先装载样式表,这样看到的就是有样式修饰的页面。
  4. @import不支持通过javascript修改样式,而link支持。

关于几个样式表的优先级:

内联样式表>内部样式表>外部样式表 (简单概括就是:就近原则)

 

简单使用方式:

一般来说,HTML的装饰均是通过css来完成的。而要完成装饰就要用到css选择器,css主要用于选择需要添加样式的html元素。

使用的选择器一般有 :  ID选择器 ,class选择器,元素选择器 ,  属性选择器,伪类,层级选择器 。

具体例子:

ID选择器:使用#引入,它引用的是id属性中的值。
 

 class  类选择器  :类选择器使用时,需要在类名前加一个点号(.)     在项目中,绝大部都是用类选择器排版

元素选择器:文档中的元素就是选择器

 

属性选择器: 如果需要选择有某个属性的元素,而不论属性是什么,可以使用属性选择器

伪类 :  css伪类用于向某些选择器添加特殊效果。

层级选择器:   Id、元素、类、属性选择器的结合

怎么在css中作出一些特殊的字体或者其他效果,你就需要使用到css的属性(font)了,当然上表的单位你也不愁没地方用到。

在css的属性中常用的属性(font)有:字体,文本,背景,尺寸,列表,表格,轮廓,定位,分类。

字体: (两种定义方法)   字体属性定义文本的字体系列,风格和变形

常用属性:

  1. font-family:定义字体系列
  2. font-size:定义字体的尺寸
  3. font-style:定义字体风格

文本:文本属性可定义文本的外观

常用属性:

  1. color:定义文本颜色
  2. text-align:定义文本对齐方式
  3. letter-spacing:定义字符间隔

背景: 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果(效果远在HTML上)

常用属性:

  1. background:简写属性,作用是将背景属性设置在一个声明中
  2. background-color:定义背景颜色
  3. background-image:定义背景图片
  4. background-position:定义背景图片的起始位置【left,center,right】
  5. background-repeat:定义背景图片是否及如何重复

尺寸 :尺寸 (Dimension) 属性允许你控制元素的高度和宽度。

常用属性:

  1. width:设置元素的宽度
  2. height:设置元素的高度

 

列表: 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。

常用属性:

  1. list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
  2. list-style-image:定义列表项标志为图象
  3. list-style-position:定义列表项标志的位置
  4. list-style-type:定义列表项标志的类型。

上面代码效果 :

表格:表格属性可以极大地改善表格的外观

常用属性:

  1. border-collapse:定义是否把表格边框合并为单一的边框。
  2. border-spacing:定义分隔单元格边框的距离
  3. caption-side:定义表格标题的位置【top,bottom】

轮廓:轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 outline 属性规定了元素轮廓的样式、颜色和宽度。

常用属性:

  1. outline:在一个声明中设置所有的轮廓属性
  2. outline-color:定义轮廓的颜色
  3. outline-style:定义轮廓的样式
  4. outline-width:定义轮廓的宽度

效果:

定位: 定位 (Positioning) 属性允许你对元素进行定位。定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 。CSS 有三种基本的定位机制:普通流、浮动和绝对定位

常用属性:

  1. lposition:把元素放置到一个静态的,相对的,绝对的,或固定的位置中。
  2. ltop:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
  3. lright: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
  4. lleft: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
  5. lbottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

相对定位:这是一个非常容易掌握的概念。如对一个元素进行相对定位,它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

绝对定位:顾名思义,如对一个元素进行绝对定位,它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素以他为起点进行移动。或重叠或分离。

分类: 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。

常用属性

  1. clear:设置一个元素的侧面是否允许其它的浮动元素
  2. float:定义元素在哪个方向浮动
  3. cursor:当指向某元素之上时显示的指针类型
  4. display:定义是否及如何显示元素
  5. visibility:定义元素是否可见或不可见。

clear:

浮动:

display:

visibility :

==============================================结束==================================================

==========================================css 框模型下次再讲==========================================

   文章会在订阅号上发布!!

                                                                

本人自己建立的一个QQ群号。还在完善中,期待你的加入!     本人自己建立的一个微信订阅号。还在完善中,期待你的加入! 

发布了30 篇原创文章 · 获赞 21 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_44078196/article/details/86709400
今日推荐