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

[网页设计]css之入门篇


今日学习终于到了css,css可以实现很多表现出很酷的界面,而css的出现是为了解决

HTML结构上写样式出现一片混乱现象而应运而生的语言,在以前样式都是和结构一起写的,

不分彼此,而这样大大增加了代码量,因为一个同样的样式不断重复,只能不断重新写出

来,还有也让代码写完后困难阅读,查找错误也变得无比艰辛,而这个时候css出现了,并

体现出了它的好处,而它的好处就是把上面的问题解决了,把结构与表现分离开来。

接下说说什么是css?

什么是CSS?

CSS (Cascading Style Sheets) 层叠样式表

CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。

目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了

,IE10以后也开始全面支持CSS3了。 不同的浏览器可能需要不同的前缀。它表示该CSS属性

或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需

要前缀的,但为了更好的向前兼容前缀还是少不了的。

css就是为了装饰HTML的结构而出现的,它能做到以前的HTML无法做到的事,它能把HTML装扮的

很美观,所以css是HTML的补充。

如:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>css</title>  <style>  p{    color: #ff00ff;    font-size: 16px;    font-weight: bold;  }  </style></head><body><p>wowaoda</p></body></html>

css把p标签修饰成字体是粉红色,粗体,字体大小为16像素,从这可以看出css可以为HTML里的元素补充样式,即修饰它,打扮它。

那么css究竟可以干嘛呢?

 CSS能做什么????

CSS把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。

比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。

CSS简化了前端开发工作人员的设计过程,更灵活的页面布局,更快的页面加载速度。

可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的代码,

那么整个站点的所有页面都会随之发生变动。 CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等。

目的:将表现与结构分离。

例子:

代码

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>css</title>  <style>  div{    width: 100px;    height: 100px;    border-radius: 50%;    background: rgba(200,150,200,0.3);    box-shadow: 2px 2px 2px 3px #eee;  }  </style></head><body><div></div></body></html>

这个完全是靠css实现,它使页面美化。

还有请点击这个:动画的css

那么前面写着这些,让我对其强大感到好奇,那接下来,让我们探探它的语言。

 CSS语法结构?

CSS 语法由三部分构成:选择符、属性和值

属性是您希望设置的样式属性。

每个属性有一个值。属性和值被冒号分开。

p{  font-size:15px;  }

p是选择符,属性是font-size,值为15px;

a{  color:#000;  }

这个也是一样理解,是不是很类似,它的结构很简单,就这三个部分。

那么css的就够都懂了,那么怎么实现这些css呢?那就要说说引用到页面了。

如何引入CSS?

三种引入方式:

1.行内引用 行内引用是指将CSS样式编码直接写在HTML 标签中的style属性里。

注意这种方式的引入CSS,是不需要写选择器的。

<p style="color:#ff7600;">我是段落</p>

2. 页内引用

页内引用作为页面中的一个单独部分,由<style></style>标签定位在<head></head>之中。

<head>  <meta charset="UTF-8">  <title>css</title>  <style>  p{    color: #ff7600;  }  </style></head>

3.外部样式表

外部样式表是CSS应用中最好的一种形式,它将CSS样式代码单独 放在一个外部文件中,再由网页进行调用。

<head>  <meta charset="UTF-8">  <title>css</title>  <link rel="stylesheet" href="style.css"></head>

这些就是它的引用方式,只要引用进来才能作用到HTML结构上。

既然有这几种引用方式,那么是不是随意引用的呢?如果这样那么就是乱套了,因为css也叫层叠样式表,既然

随便引用那么不是和它的理念冲突了吗?所以这些引用还是规则的,就是优先级;

优先级依次是:就近原则

行内引用 > 页内引用 > 页外引用

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>css</title>  <link rel="stylesheet" href="style.css"></head><body><div></div><p style="color:#ff7600;">我是段落</p></body></html>

它会优先执行行内样式,所以在外部样式中含有相同样式时,它是给忽略掉的。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>css</title>  <style>  p{    color: #fff;  }  </style></head><body><div></div><p style="color:#ff7600;">我是段落</p></body></html>

从规则中知道这个也一样,内部样式也是被忽略的。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>css</title>  <style>  p{    color: #fff;  }  </style>  <link rel="stylesheet" href="style.css"></head><body><div></div><p>我是段落</p></body></html>

根据规则,内部样式优先。

既然样式都会写,那么自己写了很多很多样式代码,然后想找出某处的样式怎么办?一个一个样式看一遍,这个岂不是很耗时,很费神,

既然自己都这样了,那这个代码到了队友那不就是个坑。所以我们是不是可以注释一下他呢,让代码可读性更加强。

CSS注释

/*这是头部*/header{  color:#fff;}/*这是导航*/nav{}/*这是主体*/.container{}/*这是尾部*/footer{}

这样是不是可读更强呢。

在HTML中结构可以很复杂,那么我们不可能简单的写个元素选择符吧。

而各种各样方便的选择符,从HTML结构树应运而生。

 选择符

1、通配选择符*

这个是选中全部元素,为他们设置样式。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>css</title>  <style>  *{    font-size: 15px;  }  </style></head><body><h1>标题</h1><p>我的段落的兄弟</p><p>我是段落</p></body></html>

它们的字体都被设置为15像素。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>css</title>  <style>  *{    font-size: 15px;    font-weight: bold;  }  </style></head><body><h1>标题</h1><p>我的段落的兄弟</p><p>我是段落</p></body></html>

它们都被加粗了。

2、元素选择符

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

body {}h1 {}p {}

3、 群组选择符

除了可以对单个标签进行样式指定外,还可以对一组标签进行相同的样式定义。

使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方,只需写一次样式。

p,h1{    font-size: 15px;    font-weight: bold;  }

4、 关系选择符

选择所有被E元素包含的F元素。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>css</title>  <style>  p span{    color: #eee;  }  </style></head><body><p>  <span>我是谁?</span></p></body></html>

 

今日课程知识到此!!!

接下来扩展补充:

特殊性:

每个选择器都有特殊性,而如果一个元素有两个或多个冲突的属性声明,特殊性高的胜出。

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分,如:0,0,0,0. 

一个选择器的具体特殊性如下确定:

对于选择器中给定的各个ID属性值,加0,1,0,0。

对于选择器中给定的各个类属性值、属性选择或伪类,0,0,1,0。

对于选择器中给定的各个元素和伪元素,0,0,0,1。

结合符和通配选择器对特殊性没有任何贡献。

而通配选择器   0,0,0,0.

结合符连零都没有。

例子:

h1{color:red;}   为0,0,0,1 

p em{color:purple}  为0,0,0,2 

.grape{color:purple}  为0,0,1,0

p.b e.a{color:red; }   0,0,2,2

#aa{color:red;}    0,1,0,0

div#aa *[href]{color:red;}  0,1,1,1

而第一个0是为行内样式准备的,因为越前面,代表优先级越高,假如非零数字位置一样,那么先比较前面的数字的大小,

然后再往下比较,直到数字不相对,取数字大那个的优先级高。

重要声明 !important   ,就是把你所需要的声明标出来,它的优先级最高,不过它要放在声明的值的最后。 

继承:

继承的特殊性连零都没有,就是没有特殊性;

这个0特殊性有零与无特殊性有很大的区别,就是0特殊性的选择器可以为后代加样式,

而继承虽然也有给后代加样式,但有限制的,只有有继承能力的才能加到后代元素中,如color等,而margin、padding和border这些属性都不会加到后代里。

相同权重的,按顺序比较,顺序越下他的优先级最高。

较高特殊性强于较低特殊性

所以伪类声明顺序:link-visited-hover-active

LVHA(简写)

当:visited在他们之后时,由于权重一样,所以会看他们的顺序,而:visited在他们之后会胜出。

当不是写统一属性就不会出现这种问题。所以写同一种属性时要注意 !!!!