理解CSS| 青训营笔记

51 阅读1分钟

这是我参与「第五届青训营 」笔记创作活动的第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实现网页交互、特效。