03_css属性和选择器

一、文本属性

text-decoration

• none
• underline
• overline
• line-through

letter-word-spacing

• letter-spacing设置字母之间的间距
• word-spacing设置单词之间的间距

text-transform

• 设置文字的大小写转换
• capitalize：将每个单词首字符变为大写
• uppercase：将每个单词的所有字符变为大写
• lowercase：将每个单词的所有字符变为小写
• none：没有影响

text-indent

• 设置首行字符缩进

text-align

• 可用于设置元素内容在元素中的水平对齐方式
• left:左对齐
• right：右对齐
• center：正中间显示
• justify：两端对齐

二、文字属性

font-size

• px
• em单位：1em代表100%，2em代表200%，0.5em代表50%（相对于父元素）
• 百分比（相对于父元素）

font-family

• 用于设置字体名称
• 一般来说中文字体适用于中文和英文，但英文字体只适用于中文字体

font-weight

• 用于设置文字的粗细（重量）
• 100|200|300|400|~|900：每一个数字表示一个重量
• normal：等于400
• bold：等于700
• strong、b、h1~h6等标签的font-weight默认就是bold

font-stlye

• 设置文本的常规、斜体显示
• normal：常规显示
• italic：用字体的斜体显示（前提font-family这种字体本身是支持斜体的）
• oblique：文本斜体显示（让文字倾斜）
• em、i、cite、address、var、dfn等元素的font-style默认就是italic

font-variant

• 可以影响小字母的显示形式
• normal：常规显示
• small-caps：将小写字母替换为缩小过的大写字母

line-height

• 用于设置文本的最小行高
• 行高的严格定义：两行文字基线（baseline）之间的间距
• 基线（baseline）：与小写字母x最底部对齐的线
• 行距：上一行的底线（bottom）和下一行的顶线（top）之间的距离（行高-文字所占据的高度）
• height与line-height的区别：
• height：元素的整体高度
• line-height:元素中每一行文字所占据的高度+行距

font缩写属性

• font-style font-variant font-weight font-size/font-height hont-family
• font-style、font-variant、font-weight可以随意调换顺序，也可以省略
• /line-height可以省略，如果不省略，必须跟在font-size后面

三、更多选择器

属性选择器

• 包含title属性

[title]{
	color: #f00;
}

• 为title属性且值为one div元素

[title="one div元素"]{
	font-size:25px;
}

• [atter|=val]
  title属性值恰好等于one或者以单词one开头且后面紧跟着字符-的元素

[title|="one"]{
	color:red;
}

一般用在lang属性上

• [atter~=val]
  title属性值包含单词one的元素（单词one与其他单词之间必须用空格隔开）

[title~="one"]{
	color:red;
}

.one{
	color:red;
}

两个选择器效果一致

后代选择器（descendant combinator）（*）

• div元素里面的span元素（包括直接、间接元素）

div span{
	color:red;
}

子代选择器（child combinators）（*）

• div元素里面的直接span子元素(不包括间接子元素)

div>span{
	color:red;
}

div > span{
	color:red;
}

相邻兄弟选择器（adjacent sibling combinator）

• div元素后面紧挨着的怕元素（且div、p元素必须是兄弟关系）

div+p{
	color:#f00;
}

全兄弟选择器（general sibling combinator）

• div元素后面的p元素（且div、p元素都必须是兄弟关系）

div~p{
	color:#f00;
}

选择器组——交集选择器（*）

• 同时符合2个条件的元素：div元素、class值有one

div.one{
	color:#f00;
}

• 所有同时符合3个条件的元素：div元素、class值有one、title属性值等于test

div.one[title="test"]{
	color:#f00;
}

选择器组-并集选择器（*）

• 所有的div元素+所有class值有one的元素+所有的title属性值等于test的元素

div, .one, [title="test"]{
	color:#f00;
}