看完小编前段时间发表的HTML学习之后，相信大家对网站建设与网页编写有了一定的初步了解，今天我们来开始介绍层叠样式表css，css是为HTML页面的排版美化而设计的，可以实现html无法设计的效果，一般是用来配合html来使用的，一般模式：选择器{属性:值}即selector{property:value}例如：body{corlor:red;font-size：12px;}，他有三种引入方式：行内样式、内部样式表、外部样式表。
css三种嵌入方式：
一、行内样式
使用style属性引入CSS样式。
示例：
<h1 >style属性的应用</h1>
<p >直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用，在测试的时候可以使用。
例如：
<!DOCTYPE> <html> <head> <meta charset=”utf-8″ /> <title>行内样式</title> </head> <body> <!–使用行内样式引入CSS–> <h1 >Leaping Above The Water</h1> <p >我是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；还可以写为十六进制字符，例如ffcc00,fc0十六进制的颜色可以在颜色表中查询，这里我给大家提供一个，当然网上也有很多，大家也可以自己百度一下：
还有一种颜色的表示方式就是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的属性，敬请期待吧
本文【css层叠样式表怎么做】由作者： 自旋锁 提供，本站不拥有所有权，只提供储存服务，如有侵权，联系删除！
本文链接：https://www.cuoshuo.com/blog/4458.html
