Css学习手册之基本篇

一灰灰blog

发布于 2018-04-18 17:32:05

1.9K0

发布于 2018-04-18 17:32:05

文章被收录于专栏：小灰灰

Css学习手册之基本篇

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度

Css学习手册之基本篇

Css学习手册之基本篇

Css学习手册之基本篇

I. 基本使用姿势

0. 几种css使用姿势

1. css使用方式

a. 基本使用

b. 后代选择器 （空格分割）

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

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

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

2. 背景属性

3. 文本属性

5. 字体属性

6. 链接

7. 列表

8. box模型

a. Margin 外边距

b. padding 内边距

c. border 边框

d. outline 边缘轮廓

9. 尺寸

10. 显示

a. display

b. visibility

11. 定位 position

12. float 浮动

13. 水平 & 垂直对齐

II. CSS3高阶用法

1. 边框 border

2. 文本

a. text-shadow

b. text-overflow

c. word-wrap & word-break

d. 字体

3. 动画

a. transform

b. transition

c. 动画

4. 图片

5. 文字布局

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

b. 后代选择器（空格分割）