CSS层叠样式表

来源：互联网发布：淘宝polo衫编辑：程序博客网时间：2024/05/16 02:12

CSS:Cascading Style Sheets 层叠样式表

CSS的发展

.css1:字体、颜色

css2:分离样式 html和css分开写（class和id）
css3：圆角的属性，阴影的属性，盒子模块等等

CSS优点：提高页面浏览速度。缩短改版时间，降低维护费用。更好控制页面布局。实现表现和结构、内容相分离。更方便搜索引擎的搜索。
样式表分为：嵌入式样式表、外部样式表、内联样式表。
外部样式表：当有很多的页面都是用相同的css样式表，如果要改变颜色、字体、或者其他格式化功能，在一个样式表文件中一次改变就方便很多，这是用外部样式表会方便很多。

外部样式表的样式会放在一个单独的文件中，这个文件推荐使用.css作为拓展名。
例：一个文件css.css里的内容 .Name{height:Xpx; width:Xpx;}
在.html的文件里想引用这个样式,则在<head>段使用<link>标记,就可以将外部的样式表文件链接回来,具体输写如下
<head><link rel="stylesheet" type="text/css" href="css.css(外部文件的名)"/></head>
<body><div class="Name"> 外联样式表</div></body>

嵌入式样式表:在同一个网页上。<style>标签之间是样式

<head><style type="text/css"> .sheet1{height: 50px;width: 50px;background-color: lightblue;}
#sheet2{height:100px;width: 100px;background-color: lightgrey;}
</style></head>
<body><div class="sheet1">嵌入式样式表</div>
<div id="sheet2">嵌入式样式表</div></body>

内联样式表：大多数html的标记都有一个style如：<h1 style="color:red;">
选择器：<head><style> 以下定义的样式都是写在这里 </style></head> <body> 调用上面的样式都是在这里</body>

a、元素选择器（类型选择器）：例如：定义em{color:blue;} 调用格式<em>编辑的内容</em>
b、类选择器：定义格式: .类名{属性:值;} 用class属性等于类名
c、ID选择器 :定义格式: #id{属性:值;} 用id属性行等于id名
d、通配符选择器:改变所有元素的样式.格式:*{color:blue}
e、伪类选择器 :格式:a:hover(常用)鼠标光标放在上面时反应的选择器/a:link 未访问是的反应/a:visited 已访问过的反应/a:active 获得焦点如被点击的链接上的选择器.
d、伪元素选择器 p:first-line{第一行的格式} p:first-letter{如段落的第一个字母}
f、包含选择器

选择器的特殊性值的计算方法:a:内联样式 b:id选择器 c：属性选择器包括类选择器或者伪类选择器 d：元素选择器或伪元素选择器。通配符选择器*的特殊值为0,0,0,0.
CSS属性单位：长度单位：绝对单位（cm、mm、in、pt、pc）、相对单位（px、em、ex（16px=1em=100% 1px=0.0625em=6.25%））

CSS样式由样式规则组成。样式规则是一个告诉浏览器如何渲染网页上特定元素的声明。一个样式规则由一个选择器和一个声明快组成。
ID选择器和类选择器的选择：是否一个文档内重复使用a.类选择器可以在一个文档内根据需要多次使用 b.ID选择器只能在文档内应用一次.
字体属性:
- 字体名称:font-family
- 字体倾斜:font-style
- 字体的变体:font-variant
- 设置字重:font-weight
- 字体字号:font-size
- 缩写形式:font 顺序应按font-style font-variant font-weight font-size font-family排列.
文本属性:
- 文本首行缩进:text-indent
- 文本对齐方式:text-aglin
- 文本修饰方式:text-decoration
- 文本阴影特效:text-shadow
- 设置行高:line-height
- 设置字间距:letter-spacing
- 设置词间距:word-spacing
- 文本大小写形式:text-transform
- 空白显示形式:white-space

0 0