入门 |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

2.PNG

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;
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sanhuamao/p/13590069.html