CSS.选择器&css常见样式

一、选择器：

1.基本选择器（应用最广）：

基本选择器

<1>	标签选择器	根据标签名获取
<2>	id选择器	通过id属性获取
<3>	类选择器	根据class属性获取
<4>	通用选择器	通配符*

<1>标签选择器：根据标签名获取
例：p{

}

<2>id选择器：通过id属性获取
例：#x{
}
<3>类选择器：根据class属性获取
例：.x{
}
<4>通用选择器:通配符*
优先级：
<2>-<3>-<1>-<4>
2、包含选择器：
子代选择器：获取某个标签的第一级子标签
后代选择器：获取某个标签的所有子标签
分组选择器（逗号选择器）：使用逗号给多个标签设置样式
3、属性选择器：

/* 某个标签里面的某个属性值 */ 
.container[class]
{
 color:red; 
}

/* 确切到某一个值 */ 
input[type*="e"]
{ 
color: red 
}
/* 以什么为开始 */
input[type^="e"]
{ 
color: blue 
}
/* 以什么为结束 */ 
input[type$="rl"]
{ 
color: green 
}
/* 表示下一个标签 */ 
.msg+p
{ 
color: yellow 
}
/* 属性名称可以等于某一个值 */
 [title="这是一个标题"]
{ 
color: blue 
}

4、伪类选择器：同一个标签，不同的状态，有不同的样式是使用冒号表示
例：
：link------链接点击前
：visited------链接被访问过后
：hover-------"悬停"鼠标放到标签上
：active-------"激活"鼠标点击标签但是不松手
：focus------某个标签获得焦点时的样式
：：before------某个标签元素内容前加上内容
：：after------某个标签元素内容后加上内容
与content合用

p:before{
		content: "swk:"
	}

常用的伪类
元素名	作用	例如
:link	选择所有未被访问的链接	a:link
:visited	链接被访问过后	a:visited
:hover	"悬停"鼠标放到标签上	a:hover
:active	"激活"鼠标点击标签但是不松手	a:active
:focus	某个标签获得焦点时的样式	a:focus
::before	某个标签元素内容前加上内容（与content合用）	p::before
::after	某个标签元素内容后加上内容（与content合用）	p::after
::first-line	选择每个 <p> 元素的首行	p::first-line
::first-letter	选择每个 <p> 元素的首字母	p::first-letter
::selection	选择用户选择的元素部分	p::selection

二、css常见样式

1.css语法结构：
选择器{
       属性：属性值；
       属性：属性值；
       属性：属性值；
       }
2.控制字体：
设置字号---font-size:12px;
设置字色---color:red;
设置字体---font-family:'宋体';
设置行高---line-height:xx%;
设置字体粗细---font-weight:normal(正常）bold(粗体）
3.样式特点：
<1>继承：网页中子元素会继承父元素的样式
<2>层叠性：如果子元素定义了与父元素相同的样式,子元素会覆盖掉父元素标签定义的样式（后面定义的样式会覆盖掉前面定义的样式）
4.控制文本：
<1>设置中文文本缩进---text-indent:2em(可以取负值）
<2>文本水平对齐的方式---text-align:left\center\right
<3>对象空白处理---white-space:normal(自动换行）pre(空白受保护或者换行)nowrap(强制在同一行内显示）
<4>文本大小写的控制---text-transform:none(默认)capitalize(文本中每个单词以大写字母开头）uppercase(仅有大写字母)lowercase(仅有小写字母）
<5>元素垂直方向对齐---vertical-align:baseline(默认)
5.边框
<1>boder-image---使用图片作为边框
<2>border： 5px solid red;（border-width、border-style、border-color）
<3>border-style--- 属性指定要显示的边框类型
<4>border-width---简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
<5>border-color---属性设置四条边框的颜色
属性值：

dotted	定义点线边框
dashed	定义虚线边框
solid	定义实线边框
double	定义双边框
groove	定义 3D 坡口边框。效果取决于 border-color 值
ridge	定义 3D 脊线边框。效果取决于 border-color 值
inset	定义 3D inset 边框。效果取决于 border-color 值
outset	定义 3D outset 边框。效果取决于 border-color 值
none	定义无边框
hidden	定义隐藏边框

<6>border-radius---圆角边框
<7>text-decoration---属性规定添加到文本的修饰
属性值：
 

none	默认。定义标准的文本
underline	定义文本下的一条线。
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
blink	定义闪烁的文本
inherit	规定应该从父元素继承 text-decoration 属性的值