css基础知识
1.1基本概念
css层叠样式表(CascadingStyle Sheets)
HTML描述了要呈现的内容,而CSS则定义了这些内容的呈现形式,比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离,有利于分工合作,也有利于快速更换不同的呈现形式
使用样式表可以有3种方式
同过css方便了管理,对html的快速应用有更好的方式
(1) 内联样式
<p style="font-size:24px;color: green ">内联样式的演示</p>
将样式定义在style属性中
内容和表现形式高度耦合,维护困难,不利于分工合作
只能应用于当前标签
对于普通的实验方便
(2) 内部样式
<style>
p{
font-size: 36px;
color: red;
}
</style>
</head>
<body>
<p>内部样式的演示1</p>
<p>内部样式的演示2</p>
<body>
在<head>标签中通过<style>标签来实现
内容和表现形式的耦合程度降低了,但都还是在html文件中,没有实现完全分离
定义的样式只能在当前页面中使用
(3) 外部样式表
首先需要定义一个样式表文件(.css)
/*定义了应用于段落的样式:
字体大小:36
颜色:红色
*/
p{
font-size: 36px;
color: red;
}
Css中也可以使用注释,形式为/*......*/
然后在需要使用这些样式的html文件中引入该样式表文件
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/E102-01-02.css">
</head>
外部样式表使得内容和表现形式彻底分离,有利于分工合作及维护。可在多个html中引用
推荐尽量使用外部样式
外部样式的对于工作方便
但后面的案例为了方便,还会大量使用内部样式甚至内联样式
1.2颜色
自然界的颜色量是无穷的,但是计算机只能保存有限的信息
需要将连续的量(无穷)转换为离散的量(有限)的
所有的颜色都可以由红色(red)、绿色(green)和蓝色(blue)三种颜色调配而成,这三种颜色俗称三原色
CSS中用8位表示一个颜色,那么可以表示256(28)种颜色,所以总共可以表示256*256*256种颜色
CSS中有多种颜色表示形式:
(1)十六进制形式:
<p style="color: #ff0000">十六进制颜色表现形式</p>
(2)RGB颜色
<p style="color: RGB(255,0,0)">RGB颜色表现形式</p>
(3)RGBA颜色
在RGB颜色基础上增加了透明度量(Alpha),该分量的取值范围为0(完全透明)—1.0(完全不透明)
<p style="color: RGBA(255,0,0,0.5)">RGBA颜色表现形式</p>
(4)HSL颜色
颜色也可以由另外三个分量来表示,即色调、饱和度、和明度
<p style="color: HSL(120,50%,50%)">HSL颜色表现形式</p>
(5)HSLA颜色
在HSL颜色的基础上增加了Alpha分量
<p style="color: HSLA(120,50%,50%,0.4)">HSLA颜色表现形式</p>
(6)预定义颜色
CSS提供了一些常用的预定义颜色,如red、blue等
<p style="color: red">预定义颜色表现形式</p>
1.3尺寸单位
cm:厘米
mm:毫米
in:英寸(inch)
px:像素(pixel)
%:百分比
em:em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
EM特点
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写em的时候,需要注意两点:
1. body选择器中声明font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
vw:vw就是当前屏幕宽度的1%
补充一句,当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,
但是100vw是相对于屏幕可见宽度来设置的,所以会出现50vw 比50%大的情况
vh:vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开,
但是设置height:100vh,该元素会被撑开屏幕高度一致。
px:绝对单位%相对尺寸单位
绝对单位:px,in,cm,mm
相对单位:em,%,vw,vh,em
2.基础属性
属性名:属性值
background-color:red
p{
background-color:red
font-size:24px
}
2.1字体相关属性
font-family:字体名称
font-size:字体大小
font-style:字形如斜体加粗
font-variant:字母变化如大小写
font-weight:字体的粗细
可以简写:
顺序font-style font-variant font-weight font-size font-family
前面三个可以省略,使用默认值,font-size和font-family是必须指定特定值得
这种书写方式更加简洁
<style>
p{
/* font-family: 楷体;
font-size: 60px;
font-style: italic;
font-variant: small-caps;
font-weight: 900;*/
font: 60px楷体;
}
</style>
2.2文本相关属性
文本相关属性主要包括颜色,对齐方式,修饰效果等
color:设置文本的颜色
text-decoration:
默认值none 下划线underline 上划线overline 删除线line-through
color:red;text-decoration: line-through;
text-shadow 设置文字阴影,第一个设置左右平移,正向右负向左,第二个设置上下平移,正向下负向上,在设置颜色
text-shadow: 2px 2px #0000ff;
左2下2
direction 文字排列方式
ltr从左往右 rtl从右往左
text-align文本对齐的方式
left左对齐
right右对齐
center居住
justify两端对齐
vertical-align文本垂直对齐方式
top靠上对齐
bottom靠下对齐
middle垂直居中对齐
text-indet文本缩进
letter-spacing字符之间的间距
word-spacing字(单词)的间距
line-height设置行高,实际上是调整行间距