文章目录
1. CSS简介*
CSS是级联样式表(Cascading Style Sheets)的缩写。HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现。
2. CSS语法
一条CSS样式规则由两个主要的部分构成:选择器,以{}包裹的一条或多条声明。
- h1为选择器,常是你需要改变样式的 HTML 元素。
- 每条声明由一个属性和一个值组成(无论是一条或多条声明,都需要用{}包裹,且声明用;分割)
- 属性是你希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
选择器
一个页面上的元素众多,选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外,还有id和class选择器。其中class选择器使用非常普遍。
id选择器
语法如下:
#id{
属性1:属性值;
}
class选择器
语法如下:
.类名{
属性1:属性值;
}
id和class区别
①一个HTML标签只能应用于一个id选择器
②一个HTML标签可以应用多个class选择器
③id选择器是以“#”开头,并且只能在单个元素使用
④class选择器是以“.”开头,可以多个元素应用,中间用“,”隔开
3. CSS 如何生效
- 外部样式表
- 内部样式表
- 内联样式
4. 尺寸与对齐
我们可以用 height
和 width
设定元素内容占据的尺寸。常见的尺寸单位有:像数 px,百分比 %等。
对于元素中的文本,我们可以简单的设置text-align
属性为left
, center
, right
即可。
5. 盒子模型
从内到外,这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
-
content 盒子的内容,如文本、图片。
-
Padding 填充,也叫内边距,即内容和边框之间的区域
-
Border 边框,默认不显示
-
Margin 外边距,边框以外与其它元素的区域
一个元素真正占据的宽度应该是:左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距
6.定位
position属性用于对元素进行定位。
设置了元素的position属性后,我们才能使用top, bottom, left, right属性,否则定位无效。
该属性有以下一些值:
-
static 静态
position: static
这是元素的默认定位方式。 -
relative 相对
position: relative
这将把元素相对于他的静态(正常)位置进行偏移。
-
fixed 固定
position: fixed
这将使得元素固定不动(即使你上下左右拖动浏览器的滚动条)。 -
absolute 绝对
position: absolute
将使元素相对于其最近设置了定位属性(非static)的父元素进行偏移。
7.溢出
当元素内容超过其指定的区域时,我们通过溢出overflow
属性来处理这些溢出的部分。
溢出属性有以下四个值
visible
默认值,溢出部分不被裁剪,在区域外面显示hidden
裁剪溢出部分且不可见scroll
裁剪溢出部分,但提供上下和左右滚动条供显示auto
裁剪溢出部分,视情况提供滚动条
8.浮动
float
属性让某元素水平方向上向左向右进行一定,其周围其他元素也会重新排列;
一个浮动元素会尽量向左或向右移动,直到外边缘碰到包含框或者另一个浮动框的边框为止;
一个元素浮动后,其后的元素将尽可能包围它,或者说出现在这个浮动元素的左或右方。如果希望浮动元素后面的元素在其下方显示,可使用clear: both样式来进行清除。
9.不透明度
用opacity
对任何元素设置不透明度。
值在[0.0~1.0]之间,值越低,透明度越高.
10.伪类与伪元素
伪类(pseudo-class)或 伪元素 (pseudo-element),用于定义元素的某种特定的状态或位置等。
如以下情况:
- 鼠标移到某元素上变换背景颜色
- 超链接访问前后访问后样式不同
- 保证段落的第一行加粗,其它正常
使用伪类/伪元素的语法:
/* 选择器后使用 : 号,再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}