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>标签之间是样式
#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