这是我参与「第五届青训营 」笔记创作活动的第2天
前言
CSS是指层叠样式表 (Cascading Style Sheets),用来渲染HTML标签的外观样式。例如设定元素的位置、颜色、大小等,由万维网联盟(W3C)制定的标准。
,目的是控制网页元素的外观与位置,目前最新的版本是CSS3标准。
目录
- 引入样式表
- css选择器
- 属性
引入样式表
内部样式表
<head>
<style type="text/css">
</style>
</head>
内联样式
<div style="">
</div>
外联样式
<html>
<link href="" type="text/css" rel="stylesheet"/>
</html>
css选择器
.class 类选择器
匹配所有使用改类名的元素
#id ID选择器
匹配使用改id的元素
* 通配符选择器
匹配页面中所有元素
属性
尺寸
width 宽度
height 高度
min-width 最小宽度
max-width 最大宽度
min-height 最小高度
max-height 最大高度
边距
margin 外边距
margin-left 左外边距 margin-right 右外边距 margin-top上外边距 margin-bottom 下外边距
padding 内边距
padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距
布局
position 定位
static常规 fixed 基于浏览器视窗 relative 常规 相对布局 absolute 绝对布局
浮动 float
display 显示
block 块元素 inline-block行内块元素 inline 行内元素 flex flex容器 inline-flex 行内flex容器 grid grid容器 inline-grid 行内grid容器
字体
font-family 设置字体
font-weight 字重(字体粗细)
font-style 字体风格
color 文本颜色
line-height 行高(行间距)
text-align 对齐方式
总结
css可以美化html外观,对网页元素进行布局及定位,对html进行响应式布局。
配合js实现网页交互、特效。