【CSS】基本介绍

文章目录

    • 一、css的介绍
    • 二、css基础语法
    • 三、样式的建立
      • 1. 内部样式表(嵌套到页面中)
      • 2. 外部样式表(2种方式)
      • 3. 内联样式(表行间样式,行内样式,嵌入式样式)
      • 4. 样式表的优先级
    • 五、CSS3简介
      • 5.1、css3的概念
      • 5.2、css3的优势

一、css的介绍

层叠样式表(英文全称:Casscading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以修饰静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化及个性设置。
CSS 能够对网页中元素位置的排版进行像素级精准控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

二、css基础语法

【CSS】基本介绍_第1张图片
CSS语法说明:
每个CSS样式由两部分姐成,即选择符和声明,声明又分为属性和属性值:
属性必须放在花括号中,属性与属性值用冒号连接。每条声明用分号结束。
当一个属性有多个属性值的时候,属性值与届性值不分先后顺序,
在书写样式过程中,空格、换行等操作不影响属性显示。
例如:

div{width: 200px; height 200px background: red;}

三、样式的建立

1. 内部样式表(嵌套到页面中)

语法:
<style type="text/css">
	css语句
style>
注意:使用style标记创建样式时,最好将该标记写在<head>head>

2. 外部样式表(2种方式)

a:外部样式表的创建
b:外部样式表的导入

方法一:

语法:
<link rel="stylesheet" type="text/css" href="目标文件路径及文件名全称"/>
说明:
使用link元素导入外部样式表时,需要将该元素写在文档头部,即 与 之间。
rel:用于定义文档关联,表示关联样式表
type:定义文档类型

方法二:

语法:
<styel type="text/css">
	@import url("目标文件的路径及文件名全称");
style>
说明:
@和import之间没有空格,url和小括号之间也没有空格。括号内部加引号,必须以分号结束。

扩展知识:

差别1:
老祖宗的差别: link属于XHTML标签,而@import完全是CSS提供的一种万式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连按属性等,@import就只能加载css.

差别2:
加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@impont引用的CSS会等到页面全部被下载完再被加载。所以有时侯浏览@import加载CSS的页面时开始会没有样式。

差别3:
兼容性的差别。:@import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识别,而link标签无此问题

差别4:
使用dom控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签.

3. 内联样式(表行间样式,行内样式,嵌入式样式)

语法:
<标签 style="属性:属性值;属性:属性值 ;">标签>
例如:
<div style="width:100px;">div>

4. 样式表的优先级

a.内联样式表的优先级别最高
b.内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高

五、CSS3简介

5.1、css3的概念

CSS3是css技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

5.2、css3的优势

CSS3将完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说,CSS3主要的影响是将可以使用新的可用的选择器和属性,这些会允许实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果(比如说使用分栏)

你可能感兴趣的:(CSS,笔记,css)