对css的简单介绍

css又被叫做层叠样式表。

学习css的话可以先学习样式表,然后在学习样式。

css样式表:

1,行内样式表

2,内部样式表

3,链接样式表

4,导入样式表


一.行内样式表:

我们将行内样式表理解为紧跟标签的样式表,类似:<p style="样式值">....</p>

二.内部样式表

内部样式表一般也是写在html文件中的,一般是写在html文件的head标签中。类似:

<head>
       <style>
             样式
       </style>
</head>
三.链接样式表

               链接样式表一般写在外部css文件中,这样写最大的好处是实现了表现和样式的分离。一般在html文件中使用的话t也是在head标签种,类似:

<head>
     <link href="路径" type="text/css" rel="stylesheet"/>
</head>

需要注意:link标签中type和rel是固定的,不可以更改和删除。其次就是对于路径的理解。

路径:

 1.相对路径 :这个文件所在的路径所引起的和其他文件(或文件夹)的关系。

1.对于同在一个文件夹中的文件,使用的时候直接使用它的名字就可以。

2.对于一个文件(image1.jpg)在文件夹(例如:image文件夹)中里面,一个在文件夹外面的情况,使用的时候:../image/image1.jpg

3.对于一个文件在文件夹(image)里面,另一个文件在另一个文件夹(html)的里面,使用的时候:image/image1.jpg

2.绝对路径:一般是指文件所在的绝对位置,通常是从盘符开始的路径

1.对于本地的绝对路径的引用,使用的话:file:///+地址(在路径开头加上file:///是为了多浏览器的兼容)

2.对于网络文件的引用,直接就是该文件的网络地址就可以了

四.导入式样式表

导入式样式表其实和链接样式表类似的,都是在外部建立css文件,然后引用给html文件,同样实现了样式和表现的分离。

类似:

<head>
       <style>
            @import url(路径)
       </style>
</head>
在使用的样式表的时候,我们要注意他们的优先级。那么这些样式表的优先级是怎样的?

       很简单,在理论上来说行内样式表的优先级是最高的,因为行内样式表距离要加css的标签最近,所以总结起来他们的优先级可以用四个字来描述:就近原则。


第二大部分

css样式的定义:

选择器{样式}

选择器{样式:样式值;....}

注意:在css样式中的某些样式是具有继承性的,也就是说:css中的某些样式不仅可以作用于该标签,还可以作用于该标签的后代中。


css样式选择器:

1.基本选择器

1.全局选择器 :*{...}

2.标签(标记)选择器 :标签{...}

3.类别选择器:.className{....}

4.id选择器:#idName{....}

注意:类别选择器和id选择器都是先定义后使用。

类别选择器的特点:

1.同一个页面可以使用多个类别选择器,但是id选择器只能在一个页面出现一次

2.一个类别选择器可以被多个页面使用

id选择器的特点:

1.在一个页面中相同的id名只能出现一次,所以同一个id名的选择器只能在一个页面选择一次。

注意:在样式不一样的情况下,如果是多个类别选择器,则所有的样式都可以实现,使用方法

<p class="className1 className2.....">....</p>
但是对于多个id选择器来说,即使他们的样式不同,也不可以写成上面的形式。


注意:在样式一样的情况下,也就是常说的发生冲突的情况下,这时候需要考虑选择器的优先级:

1.两个都是类别选择器的时候:那个在后面那个就会显示,因为代码是从上向下读的,所以前面的会被后面给代替掉。

2.但是当选择器不一样时,这时候就要考虑选择器的优先级拉

选择器的优先级:

行内>id选择器>类别选择器>标记选择器>全局选择器>权重

可以用权重来表示:

行内 1000

id选择器  100

类别选择器   10

标记选择器   1

全局选择器   0

权重根据文献是 0.1


举个例子:

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/


注意:有些情况下,我们可以为某些样式设置最高权重,可以通过!important来实现。!important一般都是写在分号之前。


2.层级选择器

1,群组选择器

群组选择器一般用在这样的情况:

当多个标签都要设置成某种一样的样式时。即(标记1,标记2,....){.....}

类似:h1,span{color:red;}这样的写法相当于:h1{color:red;}

span{color:red;}

2,后代选择器

后代选择器的写法:中间用空格隔开(可以是标签或者其唯一的标记(类或id))

3,子元素选择器

子元素选择器的写法:中间用大于号>隔开(可以是标签或者是其唯一的标记(类或者id))

注意后代选择器和子元素选择器的区别:

后代选择器的话是相对于其所有的后代来说的,包括"儿子","孙子","重孙子"....等等

子元素选择器的话是相对于其第一代儿子来说的,不包括其儿子后面的代数。

4,动态伪类选择器

动态伪类选择器的话,最常见的地方一般就是a标签。

动态伪类选择器可以分为:

1.标签:link{}     链接时的状态

2.标签:visited{}    访问过后的状态

3.标签:hover{}    鼠标滑过的状态(重要)

4.标签:active{}    鼠标点击的状态

这些情况对于a标签都可以使用,但是对于其他的标签来说最常用的是:hover和:active

5,:nth选择器

:nth选择器的话其实就是将标签设置上了个数;可以将其分为三个部分:

1.标签:first-child{...}        第一个子元素

2.标签:last-child{...}        最后一个子元素

3.标签:nth-child(n){....}   第n个子元素



第三大部分


css的样式:也可以成为css格式化排版。

文字样式(排版):

1.font-family:...         字体

2.font-size:12px;       字体的大小

3.color:red;#0000;... 字体的颜色

4.font-weight:bold;normal 字体的加粗

5.font-style:italic;... 字体的样式

段落样式(排版):

1.text-align:.. 文本对齐方式

2.text-indent:... 文本缩进

3.text-decoration:... 文本是否加划线

4.line-height:... 行间距

5.line-height:height 保持文本上下居中显示

背景样式(排版):

1,background-color:.. 背景颜色

2,background-image:url(路径) 背景图片

3,background-repeat: 背景是否平铺

4,background-position:left/center./... 背景位置

注意:背景样式(排版)是复合属性;那么什么是复合属性呢?

    复合属性:就是可以将其他的属性复合起来,即只写一个background就可以了。

列表样式(排版):

1.list-style-type:... 列表符号类型

2.list-style-image:url(路径) 列表的前面的图片

3.list-style-position 列表的前面的位置

注意:列表属性也是复合属性。

 





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值