CSS学习笔记

信息点

属性值参考资料：https://www.w3schools.com/cssref/pr_class_display.asp

CSS简介

Cascading Style Sheets 层叠样式表，一种描述 HTML 文档样式的语言

优点：可以设计和布局不同网页、不同设备、不同屏幕尺寸

样式表

类型（位置）	插入方法
外部 CSS	<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
内部 CSS	写在网页的head中：<style>…
行内 CSS	写在style属性里：<p style=“color:red;”>text

样式优先级：行内样式>内/外部样式表>浏览器默认。内/外部样式中，后出现的优先级更高

选择器分类

选择器：指向需要设置样式的 HTML 元素，分类如下

选择器	符号	示例	解释
简单	无 # .	h1 #para1 .class1, div.class1	标签名 id class
组合器	空格 > + ~	div p div > p div + p div ~ p	div下的所有p元素 div的子元素中，标签为p的 div同级的下一元素，且标签为p div同级的后续元素中，标签为p的
伪类	:	h1:hover	元素的特殊状态
伪元素	::	p::after	元素的指定部分
属性	[]	a[target="_blank"]	带有特定属性或属性值的元素

• 【*】通配网页上的所有元素
• 可以用逗号连接各选择器名，以便为多种元素设计同一样式

伪类

伪类名称对大小写不敏感

按元素的状态选中

第一行多用于input，第二行多用于链接

enabled	disabled	checked	focus
启用了	禁用了	选中了	获得焦点时
link	visited	hover	active
未访问	已访问	悬停时	激活了

按元素类型和位置选中

唯一子元素	第一个子元素	最后一个子元素	第n个子元素	倒数第n个子元素
only-child	first-child	last-child	nth-child(n)	nth-last-child(n)
only-of-type	first-of-type	last-of-type	nth-of-type(n)	nth-last-of-type(n)

• only表示p元素的数量为1，first last nth nth-last指定元素的位置
• p : nth-child(n) {}：定位p元素的父级 - 定位第N个子元素 - 若此元素为p，为其设置样式
• p : nth-of-type(n) {}：定位p元素的父级 - 定位第N个p元素 ，为其设置样式

按范围和数据有效性

valid	invalid	in-range	out-of-range
设置了有效值	设置了无效值	值在指定范围内	值在指定范围外

按属性值

required	optional	read-only	read-write
required	不是required	readonly	不是readonly

其它

lang(language)	not(selector)	root	empty	target
带指定语言标签	不是某个元素	根元素	没有子元素	活动中的元素

为不同语言定义不同规则

<style>q:lang(en) {  quotes: "~" "~";}</style>
<p>文本 <q lang="en">文本</q> 文本</p>
显示结果：文本~文本~文本

伪元素

可以设置元素指定部分的样式

::after	::before	::first-letter	::first-line	::selection
在元素前面插入	在元素后面插入	选中元素首字母	选中元素首行	用户选中部分

• first-line伪元素只能应用于块级元素
• 伪元素可以与类结合使用，p.intro::first-letter {}

自定义标签

myHero {color:red;}  
<myHero>My First Hero</myHero>

CSS注释

注释可以出现在任何位置，浏览器会忽略注释

/* 单行注释 */
/* 多行
注释 */ 

颜色

颜色值	描述	示例
颜色名	共16种颜色	black
HEX值	用十六进制值依次表示红、绿、蓝	#ff6347
RGB值	用数字依次表示红、绿、蓝	rgb(255, 99, 71)
RGBA值	RGB值+透明度	rgba(255, 99, 71, 0.5)
HSL值	依次为色相、饱和度、明度	hsl(9, 100%, 64%)
HSLA值	HSL值+透明度	hsla(9, 100%, 64%, 0.5)

• 注意：子元素会继承父元素的透明度

图标

可通过图标库添加，导入图标后，可以进一步设置图标的尺寸、颜色

<script src="https://kit.fontawesome.com/yourcode.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

由外部CSS导入

<link rel="stylesheet" 
      href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<p class="lnr lnr-pencil"></p>

由JS导入

<script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js">
</script>
<svg class="lnr lnr-pencil">
  <use xlink:href="#lnr-pencil"></use>
</svg>

CSS length单位

length的属性值中，除了inherit, normal，常常用到以下单位

相对长度

em	rem	ex	ch	%	vw	vh	vmin	vmax
倍数	根元素的倍数	x的高度	0的宽度	父元素	占视窗的%	占视窗的%	vw和vh中的最值	vw和vh中的最值

绝对长度

cm	mm	in	px	pt	pc
厘米	毫米	英寸	像素 (1/96英寸)	point (1/72英寸)	pica (1/6英寸)

display属性

块元素：div，h1~h6，p，form，header，footer，section

行内元素：span，a，img

块元素	block	flex	grid	inline-block
行内元素	inline	inline-flex	inline-grid
其它	none	initial	inherit

• 块元素默认占满整行，行内元素没有高度、宽度属性
• 特殊地：inline-block为可设置高度、宽度的行内元素

隐藏元素的两种办法

display: none        #隐藏元素及其布局
visibility: hidden   #只隐藏元素的内容，不隐藏其布局

position属性

属性值	描述
static(默认值)	静态定位，不受 top、bottom、left 、right属性的影响
fixed	随浏览器窗口移动，带top、right、bottom 和 left 属性
absolute	position属性值非static的祖先，如果没有，跟随body
relative	偏离其默认位置，如left: 30px
sticky	按滚动位置定位，老版浏览器可能不支持，Safari需要-webkit-前缀

• 更多属性值：initial，inherit

示例：随滚动条移动的div

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #cae8ca;
}

<p>一些文本</p>
<div class="sticky">我是有粘性的！</div>
<p style="padding-bottom:2000px">一些文本</p>

float与clear属性

1. float：left|right|none|inherit
   在父元素中的浮动位置。浮动元素会生成一个块级框，空间不足时会自动换行。

2. clear：left|right|none|inherit|both
   不允许存在浮动元素的地方

3. overflow：内容溢出元素框时发生的事情。另有overflow-x和overflow-y属性

属性值	visible(默认)	hidden	scroll	auto	inherit
描述	在框外显示	修剪内容	显示滚动条	必要时显示滚动条

cursor属性 光标样式

auto(默认)	crosshair	default	e-resize	help	move
n-resize	ne-resize	nw-resize	pointer	progress	s-resize
se-resize	sw-resize	text	w-resize	wait

height和width属性

属性	属性值
width|height	auto，initial，inherit，length
max-width|min-width|max-height|min-height	none(默认)，length

• length：数字+单位px|cm
• 内外边距、边框不计入width和height
• width和height超出极值时，浏览器自动添加滚动条，获得更佳效果

边距属性

简写：top right bottom left;

属性

内	padding	padding-top	padding-right	padding-bottom	padding-left
外	margin	margin-top	margin-right	margin-bottom	margin-left

属性值

auto	length	%	inherit
水平居中	单位：px pt cm	包含元素宽度	从父元素继承

区别

1. 内边距没有auto属性值
2. 外边距的length允许负值，内边距的length不允许负值
3. 内边距计入元素的width，外边距则不会。如果希望width不变，可添加box-sizing属性

div {  width: 300px;  padding: 25px;}
div {  width: 300px;  padding: 25px;  box-sizing: border-box;}

外边距合并

一般情况下，两元素的垂直外边距相遇时，只保留一个最大的垂直外边距。

特殊地，行内框、浮动框或绝对定位之间的外边距不会合并

边框属性

圆角属性 border-radius: 5px

颜色 样式 宽度

	border-color	border-style	border-width
border-top	border-top-color	border-top-style	border-top-width
border-right	border-right-color	border-right-style	border-right-width
border-bottom	border-bottom-color	border-bottom-style	border-bottom-width
border-left	border-left-color	border-left-style	border-left-width

• 首列：单条边框，多个属性。顺序：border-width, border-style（必需）, border-color
• 首行：多条边框，单个属性。属性值不足4个时，上与下样式相同，左与右样式相同
• 其它：单条边框，单个属性

style属性值

普通						3D
dotted	dashed	solid	double	none	hidden	groove	ridge	inset	outset
点线	虚线	实线	双线	无	隐藏	坡口	脊线	内嵌	外凸

width属性值

thin	medium	thick	length

轮廓属性

在边框之外，不计入元素尺寸，用于凸显元素。可能会与其他内容重叠。

相关属性：outline，outline-style，outline-color，outline-width，outline-offset（轮廓与边框之间的透明空间）

background属性

可简写的五项

要严格按照顺序，可以有缺省

background-*	color	image	repeat	attachment	position
属性值		url(“a.jpg”)	repeat-x|no-repeat	fixed|scroll	right top

• attachment：设置图片固定或随页面滚动

更多属性

background-*	size	clip	origin
属性值	尺寸	绘制区域	放置位置

font属性

简写：italic small-caps bold 12px/30px Georgia, serif;

注意：size和family是必需的，多种font-family用逗号分隔

属性 font-*	style	variant	weight	size	line-height	family
常用属性值	italic	small-caps	bold	length	length	字形

• 都有inherit和normal属性值
• small-caps：小型大写字母（小写字母转大写，但只占半行位置）

font-family

要准备多种字体以适应不同浏览器，字形名称多于一个单词时，要使用引号

1. 五种通用字体，至少选择一个，作为后备

Serif	Sans-serif	Monospace	Cursive	Fantasy
衬线，优雅	无衬线，简约	等宽，机械式	草书	装饰性/俏皮

2. 更多字体 谷歌字体等。引入Google Fonts API，可以增加数百种字体样式，无需翻墙

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

文本属性

默认的文本样式在 body 选择器中定义

对齐与间距

属性	描述	属性值
text-align	水平对齐	center/left/right/justify（分散对齐）
vertical-align	垂直对齐	top/middle/bottom/right
text-indent	首行缩进	length 允许负值
letter-spacing	字符间距	可以为负数
word-spacing	单词间距	可以为负数

其它属性

属性	描述	属性值
color	颜色
text-decoration	文本装饰	overline/underline/line-through/none
text-transform	大小写	uppercase/lowercase/capitalize
text-shadow	阴影	h-shadow v-shadow blur color
text-overflow	溢出示意	clip(修剪)|ellipsis(省略号)
line-height	行高
direction	文本方向	ltr/rtl/inherit
white-space	处理空白	nowrap表示禁止换行

• 在W3C compliant CSS中，color属性必需与background-color属性成对出现

unicode-bidi属性

重写文本以支持多语言，要与direction属性配合使用

normal	embed	bidi-override	initial	inherit
	创建附加的嵌入层面	创建附加的嵌入层面	设置默认值

• 使用bidi-override属性时，是否重新排序取决于 direction 属性

列表属性

简写：list-style: square inside url(“sqpurple.gif”);

list-*	style-type	style-image	style-position
	none|circle|square|upper-roman|lower-alpha	url(‘a.gif’)	outside|inside

表格属性

table、th、td元素常用属性：

属性	描述	属性值
caption-side	标题位置	top|bottom|inherit
table-layout	布局算法	automatic(按内容)|fixed(按表格)|inherit
border-collapse	是否折叠边框	separate|collapse|inherit
border-spacing	边框间距	length
empty-cells	空白单元格	hide|show|inherit

• border-collapse:collapse(折叠边框)时，border-spacing和empty-cells属性不生效

隔行填充

tr:nth-child(even) {background-color: blue;}

z-index

指定元素叠放位置，属性值（可以为负）越小，越是在上层。

未指定时，后出现的元素显示在上方

CSS应用 导航栏

可以是删除了项目符号、内外边距的链接列表

常用样式	属性与属性值
垂直导航栏	display: block
水平导航栏 行内	display: inline
水平导航栏 浮动	display: block; float: left
粘性	position:-webkit-sticky; position:sticky; top:0;

CSS应用 下拉菜单

1. 创建带下拉命令的div1
2. 创建放置下拉内容的div2
3. 根据div1的位置，确定div2的位置，position: relative
4. 默认不显示（display: none），鼠标悬停时显示（display: block）

• 如果希望下拉内容的宽度与下拉按钮的宽度一样，可将宽度设置为 100％
• 使用box-shadow能使下拉列表看起来像一张卡片

<style>
.dropdown 			              {  position: relative;}
.dropdown-content 	              {  display: none;}
.dropdown:hover .dropdown-content {  display: block;}
</style>

<div class="dropdown">
  <span>把鼠标移到我上面</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>

CSS应用 样式引用语法

样式2下，引用样式1，并修改部分属性值

.class1 {...}
.class2:hover .class1 {display: block;}