前端学习笔记三
1.文本属性
1.color--颜色
定义方式：(1)color-nanme
(2)hex-number--如果十六进制的颜色出现重复时，可省略
（3）rgb--三原色（0-255 ，0-255 ，0-255）
（4）hsl
2.text-align--对齐方式
（1）left--左对齐(默认)
（2）right--右对齐
（3）center--居中对齐
（4）justify--分散对齐（左右两边对齐，要设置宽高才能有效果）
3.text-decoration--文本修饰
-
none：默认，定义标准的文本，没有任何修饰。
-
underline：定义在文本下方的一条线
-
overline：定义在文本上方的一条线
-
line-through：定义穿过文本的一条线
4.text-transform--文本转换
-
none：默认
-
capitalize：文本中每个单词以大写字母开头
-
uppercase：所有单词字母都大写
-
lowercase：所有单词字母都小写
5.text-indent--文本缩进
百分比或者像素值都可以
6.text-shadow
-
h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值
-
v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值
-
blur：可选。模糊的距离。
-
color：可选。阴影的颜色。
7.direction--文本方向
1. ltr：默认的，文本方向从左到右 left to right
2.rtl：文本方向从右到左。right to left
8.letter-spacing-字符间距
字符之间的距离，可以是负数
9.word-spacing--字间距
单词与单词之间的距离，可以是负数
10.line-height--行高
-
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
-
length：设置固定的行间距 px em 。
-
%：基于当前字体尺寸的百分比行间距。
注意：一般情况下，行距比字号大7 8像素即可。
2.基本选择器（重点）
1.标签选择器
使用标签名作为选择器
语法格式：标签名{ 属性值... }
2.id选择器
在标签中定义一个id并为之取名，然后再style中定义样式
语法格式：#id名{ 属性值... }
3.class（类）选择器
在标签中定义一个class并为之取名，然后再style中定义样式
语法格式：.类名{ 属性值...}
ps1:类选择器可以定义多个类名
ps2：类选择器可以一对多，id选择器只能一对一
4.通配符选择器
用*表示，能作用在页面中的所有元素中
5.伪类选择器
伪类选择器用：表示
a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/
以上4个选择器必须严格按照这个顺序来写（记忆小技巧：lovehate加粗字母顺序记忆）
6.结构伪类选择器
-
:first-child 获取第一个子元素
-
:last-child 获取最后一个子元素。注意：IE8不支持X:last-child。
-
:nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。
-
:nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）
-
:first-of-type 选择特定元素的第一个子元素
-
:last-of-type 选择特定元素的最后一个子元素
-
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
-
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取
PS：child和type的区别：child是先去选择第几个，然后再去确定前面的特定元素；
type是先确定特定元素，然后再去选择第几个
:only-child--匹配没有任何兄弟元素的元素（独生子女）
:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素
-
:empty 现在的元素里面没有任何的内容或子节点
-
:root 匹配文档的根节点
-
E:nth-child ：对父元素里面所有孩子排序选择(序号是固定的)，先找到第n个孩子，然后看看是否与E匹配
-
E:nth-of-type：对元素里面指定子元素进行排序，先去匹配，然后再找第n个孩子
:target 该元素的id被当做页面的超链接来使用
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！