你的位置:首页 > 网页设计

[网页设计]CSS(一):认识CSS


1.什么是CSS

CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或

-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);

transform为CSS3的新属性,各浏览器都需要添加前缀来支持。

2.CSS能做什么

  • 样式定义如何显示HTML 元素。
  • CSS把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。
  • CSS简化了前端开发工作人员的设计过程,更灵活的页面布局,更快的页面加载速度。
  • 可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的代码,那么整个站点的所有页面都会随之发生变动。
  • 目的:将表现与结构分离。
/* style.css */body{  background-color:#ccc;}h1{  font-size:16px;  font-family:"微软雅黑";  font-weight:normal;}

<!-- index.html --><head>  <link rel="stylesheet" href="./style.css"></head><body>  <h1>这是标题</h1></body>

3.CSS语法结构

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,选择器通常是你需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

p{         /* 选择器 */     color:red;   /* 属性:值; */}

4.如何引入CSS

引入样式表的方法有三种:

  • 外部样式表
  • 内部样式表
  • 内联样式

  4.1 外部样式表

    当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:

<head>  <link rel="stylesheet" type="text/css" href="style.css"></head>

  4.2 内部样式表

    当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表。

<head>  <style>    p {      color:red;    }  </style></head>    

  4.3 内联样式

    内联样式是指将CSS样式直接写在HTML 标签中的style属性里。注意这种方式的引入CSS,是不需要写选择器的。

<p >这是一个段落</p>

  4.4 三种引入方式的优先级对比

    当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

5.CSS代码注释

css 代码注释,以 /* 开始 */ 结束。

/* 公共样式*/body { margin:0px; padding:0px;}    /*导航样式开始*/  #nav {   ……  }/*导航样式结束*/  

6.CSS选择器

CSS选择器用于选择你想要的元素的样式的模式。

  6.1 通配符选择器

    * 选择器选择所有元素。* 选择器也可以选择另一个元素内的所有元素:

*{         /* 选择所有元素 */  margin:0;  padding:0;}div *{       /* 选择div元素下的所有元素 */  color:blue;}

  6.2 元素选择器

    所谓元素选择符,指以网页中已有的标签名作为名称的选择符。

body{        /* 选择标签为body的元素 */  font-size:16px;}a{         /* 选择标签为a的元素 */  text-decoration:none;}

  6.3 群组选择器

    除了可以对单个标签进行样式指定外,还可以对一组标签进行相同的样式定义。使用逗号对选择符进行分隔。对页面中需要使用相同样式的元素,只需写一次样式。

h1,h2,h3,p{       font-size:16px;  color:red;}