入门 |CSS选择器与常用样式

CSS引入类型

行内样式

结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中。

<input style="color:#ccc">

内联样式

在HTML页面内部，存放于head标记当中，样式写在style标记内。

<style>选择器 {属性名：属性值；属性名：属性值；......}</style>

外部样式表

外联式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中

<link type="text/css" rel="stylesheet" href="css/main.css" />

• href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
• type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CS样式表。
• rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

CSS选择器

基本选择器

类选择器

选择器	示例	说明	css
.class	.intro{}	选择所有class="intro"的元素	1

ID选择器

选择器	示例	说明	css
#id	#idname{}	选择所有id="idname"的元素	1

通配符选择器

选择器	示例	说明	css
*	*{}	选择所有元素	2

标签选择器

选择器	示例	说明	css
element	p{}	选择所有 元素	1

---

复合选择器

后代、子代、兄弟选择器

选择器	示例	说明	css
后代选择器	div p{}	选择 元素内的所有 元素	1
子元素选择器	div>p{}	选择所有父级是 元素的 元素	2
相邻兄弟选择器	div+p{}	选择所有紧接着 元素之后的 元素	2

交集、并集选择器

选择器	示例	说明	css
element.classname	div.red{}	选择 标签并且类名为red的 元素	1
element#idname	div#blue{}	选择 标签并且id名为blue的 元素	1
element,element	div,p{}	选择所有 元素和 元素	1

其他选择器

选择器	示例	说明	css
element1-element2	p~ul	选择p元素之后的每一个ul元素	3
element> element:first-child	p > i:first-child{}	匹配所有 元素中的第一个 元素	3

---

伪类选择器

链接伪类选择器

选择器	示例	说明	css
:link	a:link{}	选择所有未访问的链接	1
:visited	a:visited{}	选择所有已访问的链接	1
:hover	a:hover{}	选择所有鼠标划过的链接	1
:active	a:active{}	选择所有已选中的链接	1

位置伪类选择器

选择器	示例	说明	css
:first-child	p:first-child{}	匹配第一个 元素	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:first-child element	p:first-child i{}	匹配所有作为第一个子元素的 元素中的所有 元素	3

伪元素选择器

选择器	示例	说明	css
E::first-letter	p::first-letter	选择每一个 元素的第一个字母	3
E::first-line	p::first-line	选择每一个 元素的第一行	3
E::selection	p::selection	匹配p中被用户选中或处于高亮状态的部分	3
E::before	div::before	在div内的前面，必须有content属性，它是一个盒子	3
E::after	div::after	在div内的后面	3

[案例]：放图片上有边框效果

div{
	300px
	height:200pc
	position:relative
    overflow:hidden
}

div:hover::after{
	content:""
	position:absolute
	100%
	height:100%
	top:0
	left:0
	border:20px solid rgba(255,255,255,0.5)
	box-sizing:border-border
}

[案例]：鼠标在元素上面时加上小图标

div{
	300px
	height:200pc
	position:relative
    border:1px solid #ccc
    font-family:"icomoom"
}
div::before{
    content:"\ea51"
    position:absolute;
    right:10px;
    top:5px
}

其他选择器

选择器	示例	说明	css
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个 元素的第一个字母	1
:first-line	p:first-line	选择每一个 元素的第一行	1
:before	p:before	在每个 元素之前插入内容	2
:after	p:after	在每个 元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有 元素	2
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读） 属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

属性选择器

选择器	示例	说明	css
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute^=value]	a[src^="https"]	选选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素	3
[attribute|=language]	[lang|=en]	选择 lang 属性以 en 为开头的所有元素	2

---

CSS字体样式

语法

font: "font-style font-variant font-weight font-size/line-height font-family"
//按顺序，其中font-size和font-family的值是必需的。

font-size

• 相对长度单位

  1. em:相对于当前对象内的字体尺寸
  2. px:像素
  

• 绝对长度单位

  1. in:英寸
  2. cm:厘米
  3. mm:毫米
  4. pt:点
  5. xx-small、 x-small、 small、 medium
  

• 其他单位

  1. %:设置为基于父元素的一个百分比值
  2. inherit:规定应该从父元素继承字体尺寸
  3. smaller:设置为比父元素更小的尺寸
  4. larger:设置为比父元素更大的尺寸
  

font-family

• 可以设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体

  p{font-family:"Times New Roman", Times, serif;}
  

• 用Unicode编码形式定义

  p{font-family:"\5FAE\8F6F\96C5\9ED1";}
  

• 注意：如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明

font-style

font-style:normal  		// 正常显示文本
font-style:italic    		// 以斜体字显示的文字
font-style:oblique    		// 文字向一边倾斜

font-weight

font-weight:normal
font-weight:bold|bolder|lighter|number（400相当于normal，700相当于bold）	

font-variant

font-variant:normal|small-caps  //正常|小写字母

---

CSS文本样式

color

color:＃FF0000
color:rgb(255,0,0)
color:red
color:rgba(255,0,0,0.7)
color:hsl(120,100%,25%)		//色相-饱和度-明度
color:hsla(240,100%,50%,0.05)		//色相-饱和度-明度-阿尔法

text-align

text-align:center|right|left|justify		//居中|居右|居左|两边对齐

direction

direction:ltr|rtl	 //从左到右|从右到左

line-height

line-height:3		//此数字会与当前的字体尺寸相乘来设置行间距
line-height:100px
line-height:200%;	

居中用法：只要height=line-height

text-decorate

text-decorate:none|underline|overline|line-through  //无装饰|顶线|下划线|中穿线
text-decorate:underline dotted red  //红色虚线

text-indent

text-indent:50px 	//首行缩进

text-shadow

text-shadow: h-shadow v-shadow blur color;

• h-shadow 必需 水平阴影的位置 允许负值。
• v-shadow 必需 垂直阴影的位置 允许负值
• blur 可选 模糊的距离
• color 可选 阴影的颜色

text-transform

text-transform:capitalize|uppercase|capitalize 		//每个单词以大写字母开头|全大写|全小写

white-space

• pre 空白会被浏览器保留。其行为方式类似 HTML 中的

   标签。

• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
  标签为止。
• pre-wrap 保留空白符序列，随屏幕大小正常地进行换行。
• pre-line 合并空白符序列，但是保留换行符

word-spacing

word-spacing:20px		//字间距

---

CSS三大特性

CSS叠层性

解决样式冲突问题，权重相同，就近原则

CSS继承性

子标签会继承父标签的某些样式，如字号、字体颜色

CSS优先级

类别	权重（可叠加）
*	0,0,0,0
每个标签	0,0,0,1
每个类、伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式	1,,0,0,0
每个!impotent	无穷大

自己的优先，可忽略继承权重

---

CSS背景

语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

//多背景案例
background:url() no-repeate top left,url() no-repeate bottom right
:hover{background-position:bottom right,top left}

background-color

background-color:#ffffff	//十六进制
background-color:bule	//颜色
background-color:rgb(255,0,255)		
background-color:rgba(255, 0, 0,0.3)		

background-image

background-image: url(bgimage.gif)	//图像的URL

//线性渐变
//起始位置，起始颜色，结束颜色
background:linear-gradient(top,green,red)	
background:linear-gradient(left top,green,red)
//起始位置，颜色 位置，颜色 位置
background:linear-gradient(left,green 0%,red 50%,blue 100%)

• radial-gradient()：径向渐变

• repeating-linear-gradient()：重复的线性渐变

• repeating-radial-gradient()：重复的径向渐变

background-repeat

background-repeat: repeat	//重复
background-repeat: repeat-x	//背景图像将在水平方向重复
background-repeat: repeat-y	//背景图像将在垂直方向重复
background-repeat: no-repeat	//不重复

background-attachment

background-attachment: scroll	//默认，背景图像会随着页面其余部分的滚动而移动
background-attachment: fixed	//固定

background-position

background-position:center;		
background-position:left top|left center|left bottom|right top|right center|right bottom|center top|center center|center bottom		//水平垂直位置,如果仅指定一个关键字，其他值将会是"center"

background-position:0％ 0％|100％100％|20%	//如果仅指定了一个值，其他值将是50％ 
background-position10px 20px	//水平垂直位置,如果仅指定了一个值，其他值将是50％

background-size

background-size: length|percentage|cover|contain

• length 宽高 如果只设置一个值，则第二个值会被设置为 "auto"
• percentage 以父元素的百分比来设置背景图像的宽度和高度
• cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，图片比例不变
• contain 把图像图像扩展至最大尺寸，完整显示图片

background-origin

//定背景图片的定位区域。图片可以放置于 content-box、padding-box 或 border-box 区域
background-origin:content-box;