层叠样式表
Posted dream2060
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了层叠样式表相关的知识，希望对你有一定的参考价值。
CSS简介一种用来表现html文件样式的计算机语言
CSS作用：定义网页的外观（字体、背景、文本、布局、边缘、列表及其他）
所谓样式表：是样式化HTML的一种方法HTML是文档内容，而样式表是文档的表现，或者说是外观。
所谓层叠，将一组样式一起层叠使用，控制某一个或多个HTML元素，按样式表中的属性依次显示
特点：
控制页面中的每一个人元素
对HTML语言处理样式最好的补充
把内容处理相分离减少工作量
使用css的样列：
<!DOCTYPE html>
<html>
<head>
<title>第一个使用css的样列</title>
<style> /*适应该标记将css嵌入到HTML中*/
p { /*为段落b标记p定义样式，使用多个层叠样式*/
font-size: 30px; /*设置段落中的字号为30像素*/
color: yellow; /*设置段鸾中间的字体为黄色*/
border: 2px solid blue; /*设置段落边框为蓝色2像素*/
text-align: center; /*设置段落中的字体居中*/
background: green; /*设置段落背景颜色为绿色*/
} /*样式选择器的结束大括号*/
</style>
</head>
<!--HTML中可以使用空行调节编码格式-->
<body>
<p>Linux</p>
<p>Apache</p> <!--使用段落标记显示一个字符串-->
<p>php</p>
</body>
</html>
css的规则组成：主要由选择器和声明俩部分组成；列子：p{text-indent：3em} 这个当中的选择器是p
声明则是定义样式元素，他用于设置HTML元素的样式。形式：选择器{属性：值1；属性：值2；、、、、}声明和选择器一起使用。
属性和值之间用：连接多个属性的复合样式声明之间应该用分号；隔开，最后一个属性的值后面可以不用分号
如果在HTML中直接使用style属性声明样式，则不需要{}而是直接将多层叠样式元素声明在style属性的双引号即可：<h1 style="font-size:x-large;color:red;">html中直接加标签
css注释/*******************/
` 长度单位：em（font-size:2em）是一个与一个字符高度大致相同的单位
px（font-size：12px）是一个像素单位
pt（font-size：12pt）是一个磅的单位
%（font-size：80%）是一个百分比
颜色的单位和URL值
颜色的值是一个关键字或一个RGB格式的数字，16个关键字：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow、RGB颜色可以有以下四种形式：
#rrggbb
#rgb
#rgb（x，x，x）x是一个0-255的整数、
#rgb（y%，y%，y%）y是一个0.0到100.0的整数
指定背景图片需要使用URL值4种方式：
body{bcakground:url(xsphp.gif)}不用引号
body{background:url(http://www.lampborther.net/xsphp.gif)}完整的URL
body{bcakground:url(‘xsphp.gif‘)}使用单引号
body{background:ur("xsphp.gif")}使用双引号
在HTML文档中放置css的几种方式
内联样式表：使用style属性内联、可以应用于任何的body元素、除了basefont、papam和scrip标记。css声明当做自己的值，而每个值用分号；隔开
列子：<p style="color:red;font-family:serif">这段样式是红色的serif字，如果字体可以用的话</p>
嵌入一张样式表：
使用style元素嵌入到HTML中使用<style>需要放在HTML文档的head部分
<head>
<style type="text/css" media=""screen">
body{ background:url(foo.gif) red;color:black}
p em{ background: yellow; color:black}
.note{ margin-left: 5em; margin-right:5em}
</style>
</head>
以上是关于层叠样式表的主要内容，如果未能解决你的问题，请参考以下文章