CSS 选择器:
CSS id选择器:
<!DOCTYPE html>
<html>
<head>
<title>Node</title>
<style type="text/css">
#red {color: red;}
#green {color: green;}
</style>
</head>
<body>
<p id="red">id选择器:red -- 红色</p>
<p id="green">id选择器:green -- 绿色</p>
</body>
</html>
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
如上,在使用sidebar选择器时,应用在p标签上会使用第一个CSS样式
id选择器即使不被用来创建 派生选择器,也可以单独使用
#sidebar {
border: 1px dottde #00;
padding:10px;
}
CSS 类选择器:
.center{text-align:center;}
<h1 class="center">
Hello!
</h1>
-
和id选择器一样,class也可以被用作派生选择器
.fancy td {
color: #f60;
background:#666;
}
CSS 属性选择器:
[title]
{
color:red;
}
CSS 创建:
外部样式表:
-
每一个页面可以使用< link >标签链接到样式表文件(位于文档头部)
<head>
<link rel="stylesheet" type="text/css" href="*.css" />
</head>
内部样式表:
-
在文档头部的< style >标签中定义内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
#nu {color: ber;}
.nm {color:bre;}
</style>
</head>
内联样式表:
-
和标签叠在一起,用 “style”属性表示设置css样式
<p style="color:bre">
Hello!
</p>
如果一个元素拥有多个CSS选择器,会按照内部 -->外部的次序进行设置渲染 -
CSS 样式:
背景样式:
背景色:
-
background-color属性: 设置背景色,接受任何颜色值
背景图像:
-
background-image属性:设置背景图像(url图像相对位置)
-
background-repeat属性:设置背景无限平铺
-
background-position属性:背景定位(居左,居中,居右)
-
关键字:
图像防止的关键字,作用就是可以简单明了;
关键字
|
等价和含义
|
center
|
中心居中
|
top
|
顶部居中
|
bottom
|
底部居中
|
right
|
右侧居中
|
left
|
左侧居中
|
-
百分数值:
(左上角)百分数值同时应用于元素和图像
-
长度值:
元素内边距左上角的偏移
背景关联:
-
background-attachment属性:页面向下滚动时,背景也会一起滚动
文本样式:
缩进文本:
-
text-indent属性: 实现文本缩进,属性值是px/em/负值/百分 数
水平对齐:
字间隔:
字符转换:
文本装饰:
-
text-decoration属性:
none:无
underline:为元素添加下划线
overline:为文本顶端添加上划线
line-through:为文本添加删除线
blink:为文本添加闪烁效果
处理空白符:
-
white-space属性: 文档中对 空格、换行、tab字符的处理
下面的表格总结了 white-space 属性的行为:
值
|
空白符
|
换行符
|
自动换行
|
pre-line
|
合并
|
保留
|
允许
|
normal
|
合并
|
忽略
|
允许
|
nowrap
|
合并
|
忽略
|
不允许
|
pre
|
保留
|
保留
|
不允许
|
pre-wrap
|
保留
|
保留
|
允许
|
文本方向:
-
direction属性: 块级元素中的文本书写方向,表中列布局的方向……
-
unicode-bidi属性:行内元素
文本属性:
属性
|
描述
|
color
|
设置文本颜色
|
direction
|
设置文本方向。
|
line-height
|
设置行高。
|
letter-spacing
|
设置字符间距。
|
text-align
|
对齐元素中的文本。
|
text-decoration
|
向文本添加修饰。
|
text-indent
|
缩进元素中文本的首行。
|
text-shadow
|
设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
|
text-transform
|
控制元素中的字母。
|
unicode-bidi
|
设置文本方向。
|
white-space
|
设置元素中空白的处理方式。
|
word-spacing
|
设置字间距。
|
字体样式:
字体属性
属性
|
描述
|
font
|
简写属性。作用是把所有针对字体的属性设置在一个声明中。
|
font-family
|
设置字体系列。
|
font-size
|
设置字体的尺寸。
|
font-size-adjust
|
当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
|
font-stretch
|
对字体进行水平拉伸。(CSS2.1 已删除该属性。)
|
font-style
|
设置字体风格。
|
font-variant
|
以小型大写字体或者正常字体显示文本。
|
font-weight
|
设置字体的粗细。
|
链接样式:
链接的四种状态:
-
a:link 普通的,未被访问的链接
-
a:visited 用户已访问的链接
-
a:hover 鼠标指针位于链接上方
-
a:active 链接被点击时刻
文本修饰:
-
text-decoration属性:常用于去掉链接中的下划线
列表样式:
列表类型:
? 影响列表的样式,最简单的方法就是改变其标志类型
列表项标记:
-
list-style-type属性: 设置列表的列表项的标志
列表项图像:
-
list-style-image属性: 将列表项标志设置为一个图像
列表标志位置:
简写列表样式:
表格样式:
表格边框:
-
border属性: 设置表格的边框样式(双线框)
-
border-collapse属性:将双线框折叠为单线框
宽度和高度:
-
width属性: 设置宽度
-
height属性: 设置高度
表格对齐:
表格内边距:
-
padding属性: 可以设置 , 元素标签的内边距
表格颜色:
属性
|
描述
|
border-collapse
|
设置是否把表格边框合并为单一的边框。
|
border-spacing
|
设置分隔单元格边框的距离。
|
caption-side
|
设置表格标题的位置。
|
empty-cells
|
设置是否显示表格中的空单元格。
|
table-layout
|
设置显示单元、行和列的算法。
|
轮廓样式:
-
outline属性:在元素周围绘制一条线
-
outline-color属性:设置轮廓的颜色
-
outline-style属性:设置轮廓的样式
-
outline-width属性:设置轮廓的宽度
-
如果您觉得本文的内容对您的学习有所帮助:
关键字:
CSS