Css学习手册之基本篇

每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时,又得百度一下该怎么用,低效且不愉快,强制自己好好的学习下基本功

I. 基本使用姿势

0. 几种css使用姿势

主要有下面三个使用姿势,其中优先级为 c > b > a

  • a.直接引入css文件
  • b.在html中,直接写css:
  • c.在标签中直接写css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- 方式 a -->
<link rel="stylesheet" type="text/css" href="mystyle.css">


<!-- 方式 b -->
<style>
p {
color: red
}
</style>


<!-- 方式 c -->
<div style="color:red; font-size:12pt">dd</div>

对于标签的样式定义,特别是在引入css文件时,发现一个标签可能多重命中方式,有通过id进行设置的,有class设置的,也有标签设置的,他们之间的优先级是:

1
2
3
4
1. 内联样式表的权值最高 1000;
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1

1. css使用方式

a. 基本使用

在实际的使用中,经常出现的定义class, 根据id或者直接对标签,来指定css属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
<!-- 直接通过标签名 + {} 方式来确定标签对应的属性 -->
p {
background-color: yellow;
}


<!-- 通过id来确定css样式: # + id + {} -->
#tabId {
background-color: red;
}


<!-- 通过定义class方式: . + className + {}-->
.clzName {
background-color: blue;
}
</style>

上面是基本的使用姿势,往往我们经常会遇到组合的方式,如希望 设置: div标签内部的 p 标签中的文本颜色等,常见组合有四种

b. 后代选择器 (空格分割)

如上面的case, div 标签内部所有的p标签中文本,都设置为红色

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
div p {
color: red
}
</style>

<div>
<span>
<p> 红色的文本内容 </p>
</span>
<hr/>
<p> 红色的文本内容 </p>
</div>

c. 子元素选择器 (>号分割)

这个相比较与后代选择器,区别就是子元素只匹配直接关联的子元素(也就是中间不能有嵌套)

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
div > span {
color: red
}
</style>

<div>
<p>
<span> 默认黑色的文本内容 </span>
</p>
<hr/>
<span> 红色的文本内容 </span>
</div>

d. 相邻兄弟 (+号分割)

可选择紧接在另一元素后的元素,且二者有相同父元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
div+p
{
background-color:yellow;
}
</style>

<p>(默认黑色的内容).</p>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<p>(黄色的内容).</p>

e. 普通兄弟 (~号分割)

后续兄弟选择器选取所有指定元素之后的兄弟元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
div+p
{
background-color:yellow;
}
</style>

<p>(默认黑色的内容).</p>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>(黄色的内容).</p>
<p>(黄色的内容).</p>
<span>默认黑色</span>
<p>(黄色的内容).</p>

2. 背景属性

  • background-color: 背景色
  • background-image: 背景图
  • background-repeat: 背景图重复的方式( no-repeat 不重复; repea-xt 水平重复; repeat-y 垂直重复)
  • background-position: 背景的位置 ( left, top, center, right, bottom,可以组合使用)

支持简写方式:

1
2
3
body {
background: #ffffff url('img_tree.png') no-repeat right top;
}

3. 文本属性

  • color: 设置颜色
  • direction: 文本方向 (ltr 左到右; rtl 右到左; inherit 从父元素继承)
  • letter-spacing: 字符间距
  • text-align: 文本对齐方式 (left, center, right)
  • line-height: 行高
  • text-decoration: 修饰 (none 标准; underline 下划线; overline 上划线; line-through 删除线; blink 闪烁)
  • text-indent: 首行缩进
  • text-shadow: 阴影
  • text-transform: 控制字母 (capitalize 首字母大写; uppercase 全大写; lowercase 全小写)
  • vertical-align:垂直对其
  • white-space: 设置元素中空白的处理方式
    • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
      标签为止。
    • pre-wrap 保留空白符序列,但是正常地进行换行。
    • pre-line 合并空白符序列,但是保留换行符。
    • pre 空白会被浏览器保留。其行为方式类似 HTML 中的
       标签。

5. 字体属性

  • font-size: 字体大小
    • 16px == 1em
  • font-family: 字体系列
    • Serif: 字符在行的末端拥有额外的装饰
    • Sans-serif: 这些字体在末端没有额外的装饰
    • Monospace: 所有的等宽字符具有相同的宽度
  • font-style: 字体样式
    • italic 浏览器会显示一个斜体的字体样式。
    • oblique 浏览器会显示一个倾斜的字体样式。
    • inherit 规定应该从父元素继承字体样式。

6. 链接

  • a:link {color:#000000;} / 未访问链接/
  • a:visited {color:#00FF00;} / 已访问链接 /
  • a:hover {color:#FF00FF;} / 鼠标移动到链接上 /
  • a:active {color:#0000FF;} / 鼠标点击时 /

注意: a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。

注意: a:active 必须在 a:hover 之后。

7. 列表

在html中,列表主要是 : li, ul, ol 等

默认 ol 是以数字排序; ul 是以符号排序; li 为列表内的元素标签

用的较多的属性

  • list-style-type: 设置列表项标志的类型。
    • none 无标记。
    • disc 默认。标记是实心圆。
    • circle 标记是空心圆。
    • square 标记是实心方块。
    • decimal 标记是数字。
    • decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
    • lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
    • upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
    • lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    • upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
    • lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
    • lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
    • upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
    • hebrew 传统的希伯来编号方式
    • armenian 传统的亚美尼亚编号方式
    • georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
    • cjk-ideographic 简单的表意数字
    • hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
    • katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
    • hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
    • katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
  • list-style-image: 用图片作为列表的前置,如 ( url(‘sqpurple.gif’);)
  • list-style-position: (outside, inside)感觉不出太大的差别

8. box模型

box

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

主要是用来控制一个标签和其他标签的位置,比如两个标签之间做间隔区分等,比较有用

padding与margin的区别

demo

a. Margin 外边距

主要是标签与周边的距离设置

  • margin-top:100px;
  • margin-right:50px;
  • margin-bottom:100px;
  • margin-left:50px;

b. padding 内边距

定义元素边框与元素内容之间的空间

  • padding-top:25px;
  • padding-bottom:25px;
  • padding-right:50px;
  • padding-left:50px;

c. border 边框

这个有些时候还是挺有用的,设置一个标签四周的边框,一般可以设置线粗细,样式,颜色等

  • border-width : 线的粗细
  • border-style
    • dotted: dotted:定义一个点线边框
    • dashed: 定义一个虚线边框
    • solid: 定义实线边框
    • double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
    • groove: 定义3D沟槽边框。效果取决于边框的颜色值
    • ridge: 定义3D脊边框。效果取决于边框的颜色值
    • inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
    • outset: 定义一个3D突出边框。 效果取决于边框的颜色值
  • border-color: 边框的颜色

一个非常有意思的点是,边框支持分别设置上下左右四个线的形式,如只设置一个左右有颜色的

1
2
3
4
5
<div>
<p style="border-left-style:dashed;
border-left-color:red;
border-right-style:solid;"> 只有左右边框的情况</p>
</div>

d. outline 边缘轮廓

outline主要作用在border上,绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用

  • outline-color
  • outline-style
    • none
    • dotted: dotted:定义一个点线边框
    • dashed: 定义一个虚线边框
    • solid: 定义实线边框
    • double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
    • groove: 定义3D沟槽边框。效果取决于边框的颜色值
    • ridge: 定义3D脊边框。效果取决于边框的颜色值
    • inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
    • outset: 定义一个3D突出边框。 效果取决于边框的颜色值
  • outline-width

从实际体验来讲,这个和border的效果差不多

9. 尺寸

这个主要就是用来控制标签的宽高等相关尺寸的属性,常见的设置如下

  • width: 定宽
  • height: 定高
  • min-width: 最小宽
  • max-width: 最大宽
  • min-height: 最小高
  • max-height: 最大高
  • line-height: 行高

10. 显示

控制标签的显示隐藏等

  • display属性设置一个元素应如何显示
  • visibility属性指定一个元素应可见还是隐藏

a. display

none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

块元素是一个元素,占用了全部宽度,在前后都是换行

内联元素只需要必要的宽度,不强制换行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1. 块级元素(block)特性:

总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

2. 内联元素(inline)特性:

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;

3. 块级元素主要有:

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

4. 内联元素主要有:

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

5. 可变元素(根据上下文关系确定该元素是块元素还是内联元素):

applet ,button ,del ,iframe , ins ,map ,object , script

b. visibility

hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,也就是说,该元素虽然被隐藏了,但仍然会影响布局。

11. 定位 position

position 属性指定了元素的定位类型。在使用top, bottom, left, right之前,一般需要先确定position属性,明确具体的定位方式

  • static
    • 默认值,即没有定位,元素出现在正常的流中
    • 静态定位的元素不会受到 top, bottom, left, right影响。
  • relative
    • 元素的位置相对于浏览器窗口是固定位置
    • 即窗口是滚动的它也不会移动,常用来做悬浮按钮
  • fixed
    • 相对定位元素的定位是相对其正常位置。
  • absolute
    • 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于

如一个测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>

注意

当多个元素在同一个位置时,就会出现重叠的问题,特别是relative这种场景,在网页右下角添加悬浮窗时,经常会出现遮盖的问题,这时可以用 z-index 属性来指定覆盖顺序,越大,则越上面

12. float 浮动

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

往往是用于图像,但它在布局时一样非常有用。

元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动,下面的文本流将环绕在它左边

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻

1
2
3
4
5
6
7
8
<!-- 注意多个浮动的图片时,缩小浏览器窗口大小,布局会发生改变 -->
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

13. 水平 & 垂直对齐

根据前面学习到的几个属性(text-align, margin, position)等来实现各种标签的对齐方式

  • text-align: left, right, center
    • 通常是对于文本的对其方式,比如一个标签块内文本是如何对齐的,靠左,靠右还是居中
  • margin: auto
    • 标签的对齐方式,如希望一个div标签水平居中,就可以这么玩
    • 图片需要居中对齐,采用这种方案 (注意 在img使用时,一般需要指定 display:block;margin:auto,这样才会生效)

一个case如下

1
2
3
4
5
6
7
<div style="width:200px; border: 3px solid blue; padding: 4px">
<div style="width:50%; border:3px solid red; margin: auto; padding: 20px"> 这是一个测试标签居中对其的示例 </div>
</div>
<br/>
<div style="width:200px; border: 3px solid blue; padding: 4px">
<div style="width:50%; border:3px solid red; text-align: center; padding: 20px"> 这是一个测试标签内文本居中对齐的示例 </div>
</div>

II. CSS3高阶用法

1. 边框 border

前面介绍了边框的设置,主要还是线条类型,粗细以及颜色,现在则可以扩展,设置圆角、阴影,边框图

  • border-radius: 2px (四周圆角)
    • 一个值: 四个圆角值相同
    • 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
    • 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
    • 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
  • border-image: url(border.png) 30 30 round; (边框由图来替代)
    • border-image-source 用于指定要用于绘制边框的图像的位置
    • border-image-slice 图像边界向内偏移
    • border-image-width 图像边界的宽度
    • border-image-outset 用于指定在边框外部绘制 border-image-area 的量
    • border-image-repeat 设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。
  • box-shadow: 10px 10px 2px #bbbbbb (设置阴影)
    • h-shadow 必需的。水平阴影的位置。允许负值
    • v-shadow 必需的。垂直阴影的位置。允许负值
    • blur 可选。模糊距离
    • spread 可选。阴影的大小
    • color 可选。阴影的颜色

一个实例,捷足 box-shadow 给图片加上一个白色背景边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
#boxshadow {
position: relative;
<!-- 添加边框阴影 -->
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
}

/* Make the image fit the box */
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}

#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 20%;
bottom: 0;
}
</style>

<div id="boxshadow">
<img src="https://raw.githubusercontent.com/liuyueyi/Source/master/img/info/blogInfoV2.png" alt="Norway">
</div>

2. 文本

除了前面说的文本颜色,大小,decorate, transform等之外,这里额外的加了一些特性

a. text-shadow

5px 5px 5px #FF0000; 阴影,参数说明同 box-shadow

b. text-overflow

文字逸出时,怎么办( 配合overflow:hidden,将逸出的隐藏掉)

  • clip: 修剪文本
  • ellipsis: 用省略号代替逸出的文本
  • string: 用给出的字符串代替

一个实例:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
div.ov {
width: 120px;
white-space:nowrap;
border: 1px solid black;
overflow:hidden;
text-overflow:ellipsis
}
</style>
<div class="ov">
这是一个会移除的文本
</div>

c. word-wrap & word-break

word-wrap 文本太长时,换行的策略

  • normal 只在允许的断字点换行
  • break-word 在长单词或 URL 地址内部进行换行。

还有一个主要针对英文单词的换行策略 word-break

  • normal 使用浏览器默认的换行规则。
  • break-all 允许在单词内换行。
  • keep-all 只能在半角空格或连字符处换行。

d. 字体

@Font-face 指定特殊的字体

一般的使用姿势如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style> 
@font-face
{
<!-- 字体命名 -->
font-family: myFirstFont;
<!-- 指定字体文件路径 -->
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</style>

3. 动画

a. transform

实现转换,最常见的就是旋转一定角度了

  • translate(x, y): 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动
  • rotate(30deg): 表示顺时针渲染30°
  • scale(2,3): 表示x轴扩大2倍,y抽扩大3倍
  • skew(30deg,20deg): X轴(水平方向)倾斜30°;Y轴(垂直方向)倾斜20°
  • matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功

b. transition

过渡,配合上面的transform可以实现旋转or放大的动画效果

如一个case,在鼠标放上去时,放大且旋转360°

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style> 
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s, background 2s;
}

div:hover {
width: 200px;
height: 200px;
background:blue;
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
</style>

<div>鼠标移动到 div 元素上,查看过渡效果。</div>

c. 动画

通过 @keyframes 来创建动画的效果,通过 animation 来使用动画

一个实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>

<div>哈哈</div>

4. 图片

支持图片圆角设置

  • border-radius: 8px;
  • 自由缩放:
    • max-width: 100%;
    • height: auto;
  • filter:滤镜

III. 其他

个人博客: 一灰灰Blog

基于hexo + github pages搭建的个人博客,记录所有学习和工作中的博文,欢迎大家前去逛逛

声明

尽信书则不如,已上内容,纯属一家之言,因本人能力一般,见识有限,如发现bug或者有更好的建议,随时欢迎批评指正

扫描关注

QrCode