Css学习手册之基本篇

Css学习手册之基本篇

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

<!-- more -->

I. 基本使用姿式

0. 几种css使用姿式

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

• a.直接引入css文件
• b.在html中，直接写css:
• c.在标签中直接写css

<!-- 方式 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. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1

1. css使用方式

a. 基本使用

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

<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标签中文本，都设置为红色

<style>
div p {
  color: red
}
</style>

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

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

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

<style>
div > span {
  color: red
}
</style>

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

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

可选择紧接在另外一元素后的元素，且两者有相同父元素

<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. 普通兄弟 (~号分割)

后续兄弟选择器选取全部指定元素以后的兄弟元素。

<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，能够组合使用)

支持简写方式:

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 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
  • pre-wrap 保留空白符序列，可是正常地进行换行。
  • pre-line 合并空白符序列，可是保留换行符。
  • pre 空白会被浏览器保留。其行为方式相似 HTML 中的 <pre> 标签。

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模型

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

主要是用来控制一个标签和其余标签的位置，好比两个标签之间作间隔区分等，比较有用

padding与margin的区别

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: 边框的颜色

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

<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. 块级元素(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
  • 绝对定位的元素的位置相对于最近的已定位父元素，若是元素没有已定位的父元素，那么它的位置相对于<html>

如一个测试

<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（浮动），会使元素向左或向右移动，其周围的元素也会从新排列。

每每是用于图像，但它在布局时同样很是有用。

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

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

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

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

若是图像是右浮动，下面的文本流将环绕在它左边

若是你把几个浮动的元素放到一块儿，若是有空间的话，它们将彼此相邻

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

13. 水平 & 垂直对齐

• css实现对齐方式

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

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

一个case以下

<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 给图片加上一个白色背景边框

<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: 用给出的字符串代替

一个实例：

<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 指定特殊的字体

通常的使用姿式以下:

<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°

<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 来使用动画

一个实例

<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：滤镜
  • 详细参数: filter参数

5. 文字布局

常见的文字是横排，从左到右，若是但愿改为竖排的，能够怎么办 ？

writing-mode： 适用于：除 <' display '> 属性定义为table-row-group | table-column-group | table-row | table-column以外的全部元素

• horizontal-tb： 水平方向自上而下的书写方式。即 left-right-top-bottom（相似IE私有值lr-tb）
• vertical-rl： 垂直方向自右而左的书写方式。即 top-bottom-right-left（相似IE私有值tb-rl）
• vertical-lr： 垂直方向自左而右的书写方式。即 top-bottom-left-right

III. 其余

我的博客： 一灰灰Blog

基于hexo + github pages搭建的我的博客，记录全部学习和工做中的博文，欢迎你们前去逛逛

声明

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

• 微博地址: 小灰灰Blog
• QQ： 一灰灰/3302797840

扫描关注