快捷导航
 
层叠样式表(CSS)基础介绍
VIEW CONTENTS
-推马SEO 门户 SEO知识 查看内容

层叠样式表(CSS)基础介绍

2018-10-22 22:20| 发布者: relaxing| 查看: 890| 评论: 3
摘要: 看完小编前段时间发表的HTML学习之后,相信大家对网站建设与网页编写有了一定的初步了解,今天我们来开始介绍层叠样式表css,css是为HTML页面的排版美化而设计的,可以实现html无法设计的效果,一般是用来配合html来 ...

看完小编前段时间发表的HTML学习之后,相信大家对网站建设与网页编写有了一定的初步了解,今天我们来开始介绍层叠样式表css,css是为HTML页面的排版美化而设计的,可以实现html无法设计的效果,一般是用来配合html来使用的,一般模式:选择器{属性:值}即selector{property:value}例如:body{corlor:red;font-size:12px;},他有三种引入方式:行内样式、内部样式表、外部样式表。

css三种嵌入方式:

层叠样式表(CSS)基础介绍

一、行内样式

使用style属性引入CSS样式。

示例:

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

实际在写页面时不提倡使用,在测试的时候可以使用。

例如:

<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>行内样式</title> </head> <body> <!--使用行内样式引入CSS--> <h1 style="color:red;">Leaping Above The Water</h1> <p style="color:red;font-size:30px;">我是p标签</p> </body> </html>

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例:

<head>

<style type="text/css">

h3{

color:red;

}

</style>

</head>

例如:<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>内部样式表</title> <!--使用内部样式表引入CSS--> <style type="text/css"> div{ background: green; } </style> </head> <body> <div>我是DIV</div> </body> </html>

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。

语法:

1、链接式

<link type="text/css" rel="styleSheet" href="CSS文件路径" />

2、导入式

<style type="text/css">

@import url("css文件路径");

</style>

例如:<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title> <!--链接式:推荐使用--> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--导入式--> <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <ol> <li>1111</li> <li>2222</li> </ol> </html>

行内样式>内部样式>外部样式(后两者是就近原则)。

css注释格式如下:

/* 注释如下*/

css中的颜色值表示如下:

可以是直接写英文单词,例如蓝色尽可以写blue;还可以写为十六进制字符,例如#rrggbb\#ffcc00,#rgb如:#fc0十六进制的颜色可以在颜色表中查询,这里我给大家提供一个,当然网上也有很多,大家也可以自己百度一下:

层叠样式表(CSS)基础介绍

还有一种颜色的表示方式就是rbg模式,例如:

rgb(x,x,x) 其中x是一个0-255的整数值如:rgb(255,204,0)

rgb(x%,x%,x%) 其中x是一个0-100的整数值如rgb(100%,80%,0%)

Css的长度单位:

相对长度单位:px 像素(Pixel) em 相对于当前文本字体尺寸的倍数 % 百分比

绝对长度单位:in英寸(Inch) pt 点(Point) cm 厘米(Centimeter)mm 毫米(Millimeter)。

换算比例:1in = 2.54cm = 25.4 mm = 72pt

Css的七大类选择器:

标签选择器 例如:p{};

类选择器 例如.div{};(一个点加命名的类名)

Id选择器 例如 #div{};(斜体井号加ID名,ID是不可重复的,类可以相同)

通配符选择器:*{};

伪类选择器:

a:link{}没有访问时的链接;

a:visited{}已经访问过时的链接;

a:hove{}鼠标滑过时的链接;

a:active{}已经选中的链接;

:first-child{}为第一个字符设置样式;

:last-child{}为最后一个字符设置样式;

:nth-child(){}可以为指定字符设置样式

派生选择器(后代选择器、子元素选择器和相邻兄弟选择器):

后代选择器: 以空格分隔

div ul li {color:#0099cc;}

子元素选择器: 以>分隔

div >ul li

相邻兄弟选择器: 以+分隔

div + div ul li

最后一个就是组合选择器,以逗号隔开

h1, h2, h3, h4, h5, h6 { color: green }

好了,css基础就给大家介绍到这里,有什么不懂得地方可以给小编留言,如果您有什么好的建议也可以关注小编,我们共同学习,共同讨论,共同进步,接下来我们会介绍下css的属性,敬请期待吧


鲜花

握手

雷人

路过

鸡蛋
relaxing

[大笑][大笑][大笑]

2018-10-22 22:01 引用
relaxing

[爱慕][爱慕][爱慕]

2018-10-22 21:41 引用
relaxing

[可爱][可爱][可爱][可爱]

2018-10-22 21:21 引用

VR视频更多
周排行

让创业更简单

  • 反馈建议:service_media@36kr.com
  • 客服电话:
  • 工作时间:周一到周五

云服务支持

精彩文章,快速检索

关注我们

Copyright 推马SEO-SEO网络推广|优化排名|SEO教程-seo站长论坛  Powered by©  技术支持: