CSS 基础
zKing 2019-01-09 CSS
摘要
CSS：cascading style sheet 层叠样式表
# 选择器的分类
- 元素选择器
- a{}
- 伪元素选择器
- ::before{}
- 类选择器
- .link{}
- 属性选择器
- [type=radio]{}
- 伪类选择器
- :hover{}
- id 选择器
- #id{}
- 组合选择器
- [type=checkbox]+label{}
- 否定选择器
- :not(.link){}
- 通用选择器
- *{}，一般很少会使用通用选择器，会有性能问题
# 选择器的权重
!important > 内联样式 > id 选择器 > 类选择器 > 元素选择器 > 其它选择器
- 所谓的权重，也就是优先级，比如同时使用
id选择器和类选择器，两者又有着相同的属性的话，id选择器设置的属性值会优先使用 - 注意避免使用
!important，使用后会产生一些性能问题。 - 相同权重，后写的生效
计算权重偏方
- id 选择器 +100
- 类、伪类、属性选择器 +10
- 元素、伪元素选择器 +1
- 其他 +0
注意，这里的“权重相加”是不能进位的。
# 非布局样式
这里来总结一些跟布局无关的 CSS 属性，关于 CSS 布局的内容则会另外准备一篇文章。
# 字体
- 字体族（font-family）
- sans-serif（无衬线）
- serif（衬线）
- monospace（等宽）
- fantasy（梦幻）
- 多字体 fallback 机制
- 顾名思义，
font-family的值会根据我们的书写顺序，会匹配系统所拥有的字体进行选择
- 顾名思义，
- iconfont 字体转图标
- 可以将一些特殊的字体转成小图标，在通过
<i>标签嵌入到网页中
- 可以将一些特殊的字体转成小图标，在通过
- @font-face
- 为了某些特殊需求，开发者可以自己下载字体，放在服务器上来进行访问，这样浏览器会使用服务器资源中的字体，而不是使用本机的字体。
- 新的 @font-face 规则中，必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
为了适应移动端和 PC 端，一般推荐使用以下的字体族设置
body {
font-family: Tahoma, Arial, Roboto, ”Droid Sans”, ”Helvetica Neue”,
”Droid Sans Fallback”, ”Heiti SC”, ”Hiragino Sans GB”, Simsun, sans-self;
}
windows 系统一般使用衬线字体，而 MAC 系统则是使用等宽字体。关于字体族更多的介绍可以点击 这里
另外关于字体大小的设置问题，我会在“移动端适配”的专题再来进行总结。
# 行高
- line-height 可以撑起
display:block的高度，并不能改变字体display:inline的高度 - vertical-align 可以改变文字对齐的基准，默认是根据基线对齐，可以根据需要进行垂直对齐
# 颜色
网页上表示颜色的写法有以下三种：
- 单词式，比如：red
- 十六进制(rgba)，比如：#ff0000，rgb(255,0,0)
- hsla，比如：hsla(0, 100%, 50%, 100%);
- 关于颜色，可以再 chrome 开发者工具上进行调试
- rgba(r,g,b,a)函数表示其中 a 表示的是改颜色的透明度，取值范围是 0~1，其中 0 代表完全透明。
- hsla(Hue,Saturation,Lightness,alpha)函数表示色调、饱和度、亮度、透明度
# 背景
CSS 在设置背景中有很多属性，但是在开发中，一般只使用 background 来进行简写。
/*
*1.设置背景颜色
*2.设置背景图片链接
*3.设置背景图片不重复显示
*4.设置背景图片是否滚动
*5.设置背景图片位置，靠右，并距离上方 50 px
**/
body {
background: #ffffff url("img.png") no-repeat fixed right top 50px;
}
以上是常用的写法，还可以进行 CSS3 中背景图片的扩展
- 规定区域
body {
background: #ffffff url("img.png") no-repeat right top;
background-size: 63px 100px; /*规定背景图片的大小*/
/* background-size:cover/contain 也可以是使用提供的值，来使背景图片自适应 */
background-origin: content-box; /* 规定背景图片的定位区域。*/
background-clip: content-box; /* 用来表示背景的绘制区域*/
}
- 渐变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/*线性渐变 - 从上到下（默认情况下）*/
#grad1 {
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
background: linear-gradient(red, blue);
}
/*线性渐变 - 从左到右*/
#grad2 {
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
background: linear-gradient(to right, red, blue);
}
/*线性渐变 - 对角*/
#grad3 {
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
background: linear-gradient(to bottom right, red, blue);
}
/*线性渐变 - 从下到上*/
#grad4 {
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
background: linear-gradient(0deg, red, blue);
}
/*彩虹颜色的线性渐变*/
#grad5 {
height: 200px;
margin: 100px 0 0 100px;
background: linear-gradient(
to right,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
}
/*带有多个颜色结点的从上到下的线性渐变：*/
#grad6 {
width: 200px;
height: 200px;
background: linear-gradient(red 10%, green 20%, blue 70%);
}
/*径向渐变 - 颜色结点均匀分布（默认情况下）
*在颜色后面加百分比则不均匀
* circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
*/
#grad7 {
width: 200px;
height: 100px;
margin: 100px 0 0 100px;
background: radial-gradient(ellipse, red, green, blue);
}
/*重复的径向渐变*/
#grad8 {
width: 200px;
height: 100px;
margin: 100px 0 0 100px;
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<!--注意： Internet Explorer 9 及之前的版本不支持渐变。-->
<div id="grad1"></div>
<div id="grad2"></div>
<div id="grad3"></div>
<div id="grad4"></div>
<div id="grad5"></div>
<div id="grad6"></div>
<div id="grad7"></div>
<div id="grad8"></div>
</body>
</html>
- 多背景
body {
background: url("img1.png") no-repeat, url("img2.png") no-repeat;
}
# 图片
关于图片的介绍可以我之前总结过的其他两篇文章
另外，CSS3 有一个新的属性可以用来给图片加滤镜 filter，但是需要考虑兼容性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document</title>
<style>
img {
width: 33%;
height: auto;
float: left;
max-width: 235px;
}
.blur {
filter: blur(4px);
}
.brightness {
filter: brightness(250%);
}
.contrast {
filter: contrast(180%);
}
.grayscale {
filter: grayscale(100%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.invert {
filter: invert(100%);
}
.opacity {
filter: opacity(50%);
}
.saturate {
filter: saturate(7);
}
.sepia {
filter: sepia(100%);
}
.shadow {
filter: drop-shadow(8px 8px 10px green);
}
</style>
</head>
<body>
<p>
<strong>注意:</strong> Internet Explorer
<span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。
</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300" />
<img
class="blur"
src="pineapple.jpg"
alt="Pineapple"
width="300"
height="300"
/>
<img
class="brightness"
src="pineapple.jpg"
alt="Pineapple"
width="300"
height="300"
/>
<img
class="contrast"
src="pineapple.jpg"
alt="Pineapple"
width="300"
height="300"
/>
<img
class="grayscale"
src="pineapple.jpg"
alt="Pineapple"
width="300"
height="300"
/>
<img
class="huerotate"
src="pineapple.jpg"
alt="Pineapple"
width="300"
height="300"
/>
<img
class="invert"
src="pineapple.jpg"
alt="Pineapple"
width="300"
height="300"
/>
<img
class="opacity"
src="pineapple.jpg"
alt="Pineapple"
width="300"
height="300"
/>
<img
class="saturate"
src="pineapple.jpg"
alt="Pineapple"
width="300"
height="300"
/>
<img
class="sepia"
src="pineapple.jpg"
alt="Pineapple"
width="300"
height="300"
/>
<img
class="shadow"
src="pineapple.jpg"
alt="Pineapple"
width="300"
height="300"
/>
</body>
</html>
# 边框
边框的属性为 border，可以简写三个属性值：大小、线型、颜色，可以看以下的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>test</title>
<style>
div {
width: 300px;
height: 100px;
border: 2px solid blue;
}
#div1 {
margin-top: 70px;
background-color: aquamarine;
border-radius: 10px 50px; /*对折分布*/
box-shadow: yellow 100px 50px 30px; /*向右移动距离,向下移动距离,模糊程度*/
}
#div2 {
margin-top: 70px;
border-radius: 10px 50px 30px 5px; /*顺时针分布*/
box-shadow: red 100px 50px;
}
</style>
</head>
<body>
<div></div>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
在以上的例子中，#div1和#div2使 CSS3 的新特性，使用boder-radius来使用圆角，使用box-shadow来为块级元素制造阴影效果。
# 滚动和文字拆行
- overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条，默认是 visible
- visible，内容不会被修剪，会呈现在元素框之外。
- scroll，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- hidden，内容会被修剪，并且其余内容是不可见的。
注意
overflow 属性只工作于指定高度的块元素上。
可以使用overflow-x,overflow-y来进行内容的裁剪
overflow-wrap(word-wrap) 通用换行控制，允许长单词换行到下一行
- normal 只在允许的断字点换行（浏览器保持默认处理）。
- break-word 在长单词或 URL 地址内部进行换行。
word-break 针对多字节文字
- normal 使用浏览器默认的换行规则。
- break-all 允许在单词内换行。
- keep-all 只能在半角空格或连字符处换行。
white-space 空白处是否断行
- normal 默认。空白会被浏览器忽略。
- pre 空白会被浏览器保留。其行为方式类似 HTML 中的
<pre>标签。 - nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
<br>标签为止。 - pre-wrap 保留空白符序列，但是正常地进行换行。
- pre-line 合并空白符序列，但是保留换行符。
- inherit 规定应该从父元素继承 white-space 属性的值。
text-overflow 规定当文本溢出包含元素时发生的事情
- clip 修剪文本。
- ellipsis 显示省略符号来代表被修剪的文本。
- string 使用给定的字符串来代表被修剪的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {
width: 200px;
height: 100px;
margin: 100px 0 0 100px;
border: 1px dashed black;
}
.p1 {
/*单词拆分换行*/
word-break: keep-all;
}
.p2 {
/*文本溢出属性指定应向用户如何显示溢出内容*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
<p class="p1">
This paragraph contains some text. This line
will-break-at-hyphenates不是吧,测试下
</p>
</div>
<div>
<p class="p2">
This paragraph contains some text. This line
will-break-at-hyphenates不是吧,测试下
</p>
</div>
</body>
</html>
# 装饰性属性及其他
- 字重/粗体(font-weight)
- bold
- bolder
- 字体样式(font-style)
- normal (正常)
- italic （斜体）
- oblique （直接让文字右倾斜）
- 下划线(text-decoration)
- solid
- dashed
- none
- 指针(cursor)
- move
- pointer
- help
- wait
- zoom-in
- zoom-out
# CSS hack
- 为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的 CSS 样式，把这个针对不同的浏览器/不同版本写相应的 CSS code 的过程，叫做 CSS hack!
- 主要是 IE6-IE11，和 Firefox/Safari/Opera/Chrome 的上古版本
- 关于 “css Hack”具体内容可以看这篇 文章，就不再过多介绍
# CSS 定制化
- 浏览器本身带有的默认样式，但这些样式已经不再满足人们的需求，所以需要自己定制
- 以前是使用
CSS reset来重制默认样式，但是现在可以使用更好的方式—— Normalize.css - 接下来就可以开始自定义自己想要的 CSS 样式，一般可以使用 UI 框架，如：Bootstrap，Semantic UI