CSS基础2.0
常用的属性
字体属性
- 使用
font-family设置字体 - 使用
font-size设置字体大小 - 使用
font-weight设置字体的粗细 - 使用
font-style设置字体倾斜
<body>
<style>
div{
font-family: '楷体';
font-size: 100px;
font-weight: 100;
font-style: italic;
}
</style>
<div>
柯南
</div>
</body>
font-weight除了用数字表示外，还可以用bolder，bold，normal，lighter等单词表示。有了这些属性，之前的一些html标签的功能，自己就可以实现出来。
文本属性
文本颜色
color 属性值的写法:
- 预定义的颜色值(直接是单词)
- [最常用] 十六进制形式
- RGB 方式
文本对齐
控制文本水平方向对齐,使用text-align
- center：居中
- left：左对齐
- right：右对齐
<body>
<style>
div{
text-decoration: underline;
}
</style>
<div>
名侦探柯南
</div>
</body>
文本装饰
使用text-decoration:加取值来装饰文本
常用取值:
- underline 下划线. [常用]
- none 啥都没有. 可以给 a 标签去掉下划线.
- overline 上划线. [不常用]
- line-through 删除线 [不常用]
<body>
<style>
div{
text-decoration: underline;
}
</style>
<div>
名侦探柯南
</div>
</body>
文本缩进
使用text-indent:加取值来设置文本缩进
- 单位可以使用
px或者em. - 使用
em作为单位更好. 1 个em就是当前元素的文字大小. - 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
<body>
<style>
div{
text-indent: 2em;
text-decoration: underline;
}
</style>
<div>
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
</div>
</body>
行高
行高指的是上下文本行之间的基线距离.
使用line-height:加取值来设置行高
<body>
<style>
div{
text-indent: 2em;
font-size: 16px;
line-height: 32px;
}
</style>
<div>
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南名侦探柯南
</div>
</body>
注意1: 行高 = 上边距 + 下边距 + 字体大小
注意2: 行高也可以取 normal 等值
注意3: 行高等与元素高度, 就可以实现文字居中对齐.
<body>
<style>
div{
height: 100px;
line-height: 100px;
}
</style>
<div>
名侦探柯南
</div>
</body>
背景属性
背景颜色
使用background-color:加取值设置背景颜色，和文本颜色一样有三种设置方式，默认的transport是透明的
<body>
<style>
div{
background-color: red;
}
</style>
<div>
名侦探柯南
</div>
</body>
背景图片
使用background-image: url(#);来设置背景图片
注意:
url不要遗漏.url可以是绝对路径, 也可以是相对路径url上可以加引号, 也可以不加.
<body>
<style>
div{
background-image: url(章鱼哥.jpg);
}
</style>
<div>
名侦探柯南
</div>
</body>
背景平铺
使用background-repeat:加取值来设置背景平铺
重要取值:
- repeat: 平铺
- no-repeat: 不平铺
- repeat-x: 水平平铺
- repeat-y: 垂直平铺
默认是repeat的，背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方。
背景位置
使用background-position:修改图片的位置.
参数有三种风格:
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点)
- 混合单位: 同时包含方位名词和精确单位
背景尺寸
使用background-size:加取值来设置背景尺寸
- 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60p
- 也可以填百分比: 按照父元素的尺寸设置.
- cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
- 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.
注意
contain和cover的区别，contain是尽可能的把图片显示出来，cover是尽可能的把图片拉伸。
圆角矩形
通过 border-radius 使边框带圆角效果.html+css不能直接使用圆形，需要进行一些设置，让 border-radius 的值为正方形宽度的一半即可生成圆形.
div {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 100px;
/* 或者用 50% 表示宽度的一半 */
border-radius: 50%;
}
元素的显示模式
- 独占一行的块级元素，比如div，h1-h6,table…
- 不独占一行的行内元素，比如span,a,u
可以使用display来实现块级元素和行内元素的切换。（一般都是行内转块级)它还有一个作用可以把元素隐藏。（display:none）
CSS中的盒模型
每一个 HTML 元素就相当于是一个矩形的 “盒子”
这个盒子由这几个部分构成
- 边框 border
- 内容 content
- 内边距 padding
- 外边距 margin
边框
- 粗细: border-width
- 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
- 颜色: border-color
<body>
<style>
div{
width: 200px;
height: 100px;
background-color: rgb(128,0,0);
border: 5px black solid;
}
</style>
<div>
</div>
</body>
边框会撑大盒子
使用box-sizing: border-box;来让边框不要撑大盒子
border还可以分方向单独设置
border-bottom: 4px solid;
top
left
right
内边距
padding 设置内容和边框之间的距离.
默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距
- padding-top
- padding-bottom
- padding-left
- padding-right
外边距
和内边距类似，只不过是控制盒子和盒子之间的距离.
弹性布局
用来描述元素之间的关系（相对位置关系）
基础概念:
- 被设置为
display:flex属性的元素, 称为 flex container - 它的所有子元素立刻称为了该容器的成员, 称为 flex item
- flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
<body>
<style>
div{
width: 100%;
height: 120px;
background-color: red;
display: flex;
}
span{
width: 100px;
background-color: green;
display: block;
}
</style>
<div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</body>
此时，div就是弹性布局的容器，里面的span就按弹性布局的规则进行排列了，这几个元素是水平方向排列，然后高度也和父元素一样高（可自动指定），水平方向默认左对齐。弹性布局就解决了一行里如何排列元素的问题。
注意:
当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效.
常见属性
justify-content
使用justify-content加取值设置容器中子元素水平方向排列方式
| 值 | 描述 |
|---|---|
| flex-start | 默认值，项目位于容器开头 |
| flex-end | 项目位于容器的结尾 |
| center | 项目位于容器的中央 |
| space-between | 项目在行与行之间留有间隔 |
| space-around | 项目在行之前、行之间、行之后都留有空间 |
align-items
使用align-items加取值设置容器中子元素垂直方向排列方式
| 值 | 描述 |
|---|---|
| flex-start（stretch） | 默认值，项目位于容器上方 |
| flex-end | 项目位于容器的下方 |
| center | 项目位于容器的垂直中央 |
<body>
<style>
div{
width: 100%;
height: 150px;
background-color: red;
display: flex;
justify-content: space-around;
align-items: center;
}
span{
width: 100px;
height: 100px;
background-color: green;
display: block;
}
</style>
<div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</body>
注意:
align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents
总结
这些基础的CSS用法了解之后，就可以实现一个比较好看的静态网页了，其中还有一些其它的功能，用到时再去查文档，要在使用中学习，不要硬记。
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
