本文目录
@[TOC]
前言
在"学习CSS的简单总结(1)" 里总结了怎样使用css。
本文是总结一下具体的使用。
1.选择器
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身,以p元素举例:
p{
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>case</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<p>
元素选择器
</p>
<p>
所有的p标签都会被应用
</p>
</body>
</html>
结果图:
此举动是将所有p标签的文字设置为红色。
class选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.)
.important1 {
color:rgb(106, 0, 255);
font-size: 36px;
}
.important2 {
color:rgb(0, 255, 166);
font-size: 66px;
}
在html中使用``class="important1"
``
<div class="important1">
类选择器
</div>
<div class="important2">
设定为class=***
</div>
结果图:
id选择器
在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。
首先,ID 选择器前面有一个 # 号 -也称为棋盘号或井号。
#intro {font-weight:bold;}
<div id="intro">
id选择器
</div>
结果图:
选择器分组
可以将任意多个选择器分组在一起,对此没有任何限制。
例如,如果您想把很多元素显示为灰色,可以使用类似如下的规则:body, h2, p, table, th, td, pre, strong, em {color:gray;}
2.关键字
背景
background
:简写属性,作用是将背景属性设置在一个声明中。background-attachment
:背景图像是否固定或者随着页面的其余部分滚动。background-color
:设置元素的背景颜色。background-image
:把图像设置为背景。background-position
:设置背景图像的起始位置。background-repeat
:设置背景图像是否及如何重复。
文本
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
:设置字体的粗细。
列表
list-style
:简写属性。用于把所有用于列表的属性设置于一个声明中。list-style-image
:将图象设置为列表项标志。list-style-position
:设置列表中列表项标志的位置。list-style-type
:设置列表项标志的类型。
边距
element
: 元素。padding
: 内边距。border
: 边框。margin
: 外边距。
3.小结
关于css理解起来有一些抽象。
如果想要真正的理解,还是得自己手动敲一敲代码,这个代码的学习就着这样,如果只是单纯的看书、看资料,会产生一些错误的想法。就是思想跟上了动手能力却跟不上。
还有一些关键字的细节,基本都是英文单词的意思,想不起来了不用使劲背,多敲两遍自然就有印象了。