选择器
通用选择器
- 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示。
id选择器
- HTML元素以id属性来设置id选择器,CSS中id选择器以 # 来定义
class选择器
- class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点"."号显示
标签选择器
- 以 HTML 标签作为 CSS 修饰所用的选择器。
内联选择器
- 第四种内联选择器即直接在标签内部写 CSS 代码。
属性选择器
- CSS 属性选择器通过已经存在的属性名或属性值匹配元素。
后代选择器
后代组合器(通常用单个空格 字符表示)组合了两个选择器,如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先(父母,父母的父母,父母的父母的父母等)元素,则它们将被选择。利用后代组合器的选择器称为后代选择器。
相邻兄弟选择器
相邻兄弟选择器 (+) 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。
例如:
ul li{background:red}
子元素选择器
当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.
CSS创建
1.外部样式表
1.用以下方法引入写在外部的样式
<link rel="stylesheet" type="text/css" href="文件名.css">
2.内部样式表(样式写在style内)
写在头部<head><style></style></head>
3.内联样式
** 样式直接写在标签内 **
背景
背景颜色
background-color
背景图像
background-image
背景图像 - 水平或者垂直平铺或者不平铺
background-repeat
水平平铺:repeat-x
垂直平铺:repeat-y
不平铺:no-repeat
背景图像- 设置定位
background-position
关键字:
top、bottom、left、right和center
注意: 可以使用长度值,也可以使用百分比
Text(文本)
Text color
颜色属性被用来设置文字的颜色
颜色是通过CSS最经常的指定:
- 十六进制- 如"#FF0000 "
- 一个RGB值- “RGB(255,0,0)”
- 英文单词 - 如"red"
文本对齐方式
文本排列属性是用来设置文本的水平对齐方式
text-align:属性值可以设置为
center、left、right、justify(两端对齐)
文本修饰
text-decoration属性用来设置或删除文本的修饰
1.下划线:underline
2.删除线:line-through
3.波浪线wavy
4.实线:solid
5.虚线:dashed
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母,或每个单词的首字母大写。
实例
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
通过使用 text-indent
属性,所有元素的第一行都可以缩进一个给定的长度。
文本间隔
word-spacing
属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
所有CSS文本属性
属性 | 描述 |
---|---|
color | 设置文本颜色 |
direction | 设置文本方向 |
letter-spacing | 设置字符间距 |
line-height | 设置行高 |
text-align | 对齐元素中的文本 |
text-decoration | 向文本添加修饰 |
text-indent | 缩进元素中文本的首行 |
text-shadow | 设置文本阴影 |
text-transform | 控制元素中的字母 |
unicode-bidi | 设置或返回文本是否被重写 |
vertical-align | 设置元素的垂直对齐 |
white-space | 设置元素中空白的处理方式 |
word-spacing | 设置字间距 |
如有其他需要请评论关注私信