CSS - 1 CSS 基础知识_css 层 -1-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51487151/article/details/124409971

1 CSS 基础知识

1.1 简介

cascading style sheet，层叠样式表，主要用于配合HTML结构，添加页面样式，辅助布局

HTML4.0开始，结构和样式进行了分离

前端三层：

HTML：结构层，从语义的角度去搭建网页结构

CSS：样式层，从美观的角度去修饰页面样式

JavaScript：行为层，从交互的角度去描述页面的行为

1.2 CSS基础概念

1.2.1 样式

两种样式：文字样式，盒模型样式

1.2.2 布局

辅助页面布局，协助HTML，如并排显示，精确定位显示

1.3 CSS常用属性

文字三属性：color，font- size，font- family，也就是颜色，字号，字体

CSS属性样式, k:v

1.3.1 color

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
</head>
<body>
     <p>看看我是什么颜色</p>
</body>
</html>

默认是黑色

<p style="color:orangered">看看我是什么颜色</p> //橘红样式

1.3.2 font-size

chrome最小字号为8像素，默认为16px

 <p style="font-size:26px; color:orangered">看看我是什么字号</p>

1.3.3 font-family

<p style="font-size:26px; color:orangered; font-family: Arial ">looks me</p>

1.3.4 盒子三属性

width，height和background-color

<div style="width: 100px; height: 100px; background-color:red"></div>